Mobile Darstellung der Produktübersichtsseiten als Grid

Anpassung an PHTML-Dateien, CSS, Javascript und HTML

Moderator: maennchen1.de

onic
Beiträge: 236
Registriert: 20.10.2017, 20:17
Lizenz: wpShopGermany Enterprise

Mobile Darstellung der Produktübersichtsseiten als Grid

Beitrag von onic »

Hallo,

wir haben bei der mobilen Darstelllung der Produktübersichtsseiten festgestellt, dass die Bilder bei der mobilen Darstellung nicht automatisch umgebrochen werden. Es werden immer insgesamt vier Bilder in einer Zeile gezeigt. Dies führt natürlich zu einem Missverhältnis bei der Darstellung von Bild und Text.

Notwendig wäre es, dass die Bilder automatisch in die nächste Zeile umgebrochen werden, wenn der Platz nicht ausreicht.

Ist dies durch eine Änderung des "Templates für Produktübersichtsseite (Gitteransicht)" machbar?

Vielen Dank!
Dateianhänge
mobil Customizer  Rot Pink Rosa.jpg
Benutzeravatar
ThoGoe
m1.Mitarbeiter
Beiträge: 3582
Registriert: 21.07.2014, 08:25
Lizenz: wpShopGermany Enterprise

Re: Mobile Darstellung der Produktübersichtsseiten als Grid

Beitrag von ThoGoe »

Hallo!

Hierfür müssten die CSS-Regeln der Gridansicht für die unterschiedlichen Breakpoints (Auflösungsmöglichkeiten) angelegt werden. Hierfür müsste der jeweilige Inhaltsbereich mit den entsprechenden Inhalten (Bild, Preis, Buttons, ...) angepasst werden. Gerne können wir diese Anpassungen für dich übernehmen. Schreibe uns einfach eine Anfrage und wir erstellen dir ein Angebot.

Liebe Grüße
Wenn du glaubst, es geht nicht mehr, kommt von uns die Hilfe (http://shop.maennchen1.de/kontaktformular/) her.
Hast du wenig Geld, doch dafür Zeit, stell es der Wunschliste (https://wpshopgermany.uservoice.com/for ... 61-general) bereit!
onic
Beiträge: 236
Registriert: 20.10.2017, 20:17
Lizenz: wpShopGermany Enterprise

Re: Mobile Darstellung der Produktübersichtsseiten als Grid

Beitrag von onic »

Vielen Dank für die Antwort,

heißt dies, dass das Shopsystem standardmäßig gar nicht responsive und somit nicht für mobile Geräte geeignet ist?

Dies überrascht.

Meinen Sie, dass dies in nächster Zeit von Ihnen eingebaut wird, auf die Wunschliste geschrieben werden sollte oder auch zukünftig nur mit Programierkenntnissen bzw. einem Programmierauftrag möglich sein wird?

Vielen Dank und beste Grüße
Benutzeravatar
ThoGoe
m1.Mitarbeiter
Beiträge: 3582
Registriert: 21.07.2014, 08:25
Lizenz: wpShopGermany Enterprise

Re: Mobile Darstellung der Produktübersichtsseiten als Grid

Beitrag von ThoGoe »

Hallo!

Der wpShopGermany-Version 4 ist ein responsives Shopsystem, welches nicht nur ein responsives Frontend bietet, sondern auch vom Shopbetreiber auf mobilen Geräten bedient werden kann (Backend).

Jedoch muss beachtet werden, dass verschiedene Themes natürlich in die Responsivität eingreifen und die themeeigenen CSS-Regeln priorisieren und damit die CSS-Regeln des wpShopGermany überschreiben.

Liebe Grüße
Wenn du glaubst, es geht nicht mehr, kommt von uns die Hilfe (http://shop.maennchen1.de/kontaktformular/) her.
Hast du wenig Geld, doch dafür Zeit, stell es der Wunschliste (https://wpshopgermany.uservoice.com/for ... 61-general) bereit!
onic
Beiträge: 236
Registriert: 20.10.2017, 20:17
Lizenz: wpShopGermany Enterprise

Re: Mobile Darstellung der Produktübersichtsseiten als Grid

Beitrag von onic »

Hallo ThoGoe,

ich muss hier jetzt nochmal nachfragen, weil wir jetzt mehr als ein Theme mit dem wpshopgermany gebaut haben und noch bauen werden. Zum Hintergrund. Ich hatte mich vor vielen Jahren schon für euer Plugin entschieden (Version 3). Der Hauptgrund war, dass euer Plugin im Gegensatz zu woocommerce themeunabhängig ist.

Mittlerweile muss ich aber feststellen, dass es doch an dieser und jener Stelle enorme Abhängigkeiten gibt. Ich würde es erstmal sehr gut finden, wenn Ihr eure Kunden auf solche Problematiken vorab hinweisen würdet. Natürlich die vielen PROs aber eben auch die Schwierigkeiten, die auftreten, wenn man z.B. nicht euer Theme verwendet. Themeunabhängig ist das dann alles eben doch nicht und da es enorm viele Designvorlagen gibt, ist das vielleicht auch gar nicht möglich. Wenn man das vorher weiß, kann man sich darauf einstellen.

Welche Möglichkeiten haben wir denn jetzt mit unseren drei unterschiedlichen Designvorlagen (Weta von Elmastudio, Spacious von ThemeGrill und Ansel von Imagelý - Genisis Framework und demnächst Rapuake von Elmastudio) doch noch zu responsiven Produktübersichten zu kommen?

Die Themehersteller sagen nämlich, wir sollen uns an den Pluginhersteller wenden. Gibt es da definitiv keine einfache und allgemneine Lösung?

Vielen Dank und beste Grüße

Christian
Benutzeravatar
maennchen1.de
Administrator
Beiträge: 17868
Registriert: 14.08.2003, 16:55
Lizenz: wpShopGermany Enterprise
Wohnort: Thüringen, Ellersleben
Kontaktdaten:

Re: Mobile Darstellung der Produktübersichtsseiten als Grid

Beitrag von maennchen1.de »

wpShopGermany ist ein Plugin und ist somit abhängig von den Definitionen, die das Theme liefert.
Das Theme kümmert sich bei seinen Definitionen aber nur um die Elemente, die der Hersteller kennt (kennen will).
Wir nutzen in unseren PHTML-Dateien Standard-Definitionen (vom WordPress-Standard-Theme), die nicht zwingend von den einzelnen Theme-Herstellern verwendet werden müssen. Wäre auch ein Unding, wenn jeder Theme-Hersteller sich um jedes Plugin kümmert und umgedreht. Deshalb gibt es in wpShopGermany ebenfalls die Möglichkeit, Anpassungen in die style.css zu schreiben, oder in die Css des Themes.
Kein Support per PN! Alle Fragen beantworten wir hier im Forum. Per PN bitte nur Passwörter, Namen und URLs - sofern notwendig.
Bitte vor dem posten lesen:
Wie poste ich eine Frage zu einem Problem?
FAQ / häufig gestellte Fragen
Anzeige-Fehler / Funktionsfehler in wpShopGermany erkennen und selbst beheben
PHTML-Dateien richtig verwenden (für eigene Anpassungen)
onic
Beiträge: 236
Registriert: 20.10.2017, 20:17
Lizenz: wpShopGermany Enterprise

Re: Mobile Darstellung der Produktübersichtsseiten als Grid

Beitrag von onic »

Hallo ThoGoe,

das verstehe ich, aber es gibt doch eine Unmenge an Plugins, die responsiv Dinge darstellen können. Bildergalerie-Plugins stellen Fotos dar, der Gutenberg mit seinen Spalten alles Mögliche, das Image Hover Plugin von oxilab Bilder und Texte etc.. Verwenden die alle nicht den WordPress-Standard?

Sorry, aber diese Plugins finden sich immerhin noch in den Repositories von WordPress. Entschuldige diesen etwas gemeinen Hinweis, aber ein bisschen ärgern tue ich mich jetzt schon über deine Antwort.

Alle Plugin-Hersteller weisen immer daraufhin, dass alles responsive funktionieren würde. Es ist ihr Markenzeichen. Ich habe noch nirgends gelesen, dass ein Pluginhersteller (wie z.B. NextGen von Imagely) sagt, dass sein Plugin nur mit den hauseigenen Themes funktionieren würde.

Viele Plugin-Hersteller produzieren gar keine Themes und es würde doch auch etwas sonderbar aussehen, wenn man die Plugins dann gar nicht benutzen könnte, oder?

Heißt die Antwort jetzt, nein, wir können da nichts machen, du kannst es aber bei jedem Theme in den zusätzlichen CSS-Anweisungen selbst regulieren? Hier musst du aber dann beim jeweiligen Themenhersteller fragen. Leider kenne ich keinen Themenhersteller, der sagt, dass er wpshopgermany unterstützt, geschweige denn überhaupt kennt . Es ist immer nur woocommnerce. Ich vermute dann fast, dass ich als Shopbetreiber/in dann ziemlich doof dastehe und zusehen muss, wie ich zu einer ansehnlichen Produktübersicht komme.

Würdet ihr dieses Problem aber dann bitte auch nach außen transparent darstellen/kommunizieren? Das wäre wirklich sehr nett, da man sich ja dann auf bestimmte Arbeitsschritte einstellen muss.

Vielen Dank und herzliche Grüße
Christian
Benutzeravatar
ThoGoe
m1.Mitarbeiter
Beiträge: 3582
Registriert: 21.07.2014, 08:25
Lizenz: wpShopGermany Enterprise

Re: Mobile Darstellung der Produktübersichtsseiten als Grid

Beitrag von ThoGoe »

Hallo!

Im Theme "Responsivität" gibt es im Modul "Produktübersichten" noch Nachholbedarf, da stimme ich dir zu. In unserem Theme haben wir die Produktübersicht mittels der dortigen Funktion "Produktview" gelöst.
onic hat geschrieben: 25.06.2019, 09:10
Leider kenne ich keinen Themenhersteller, der sagt, dass er wpshopgermany unterstützt, geschweige denn überhaupt kennt .
Gerne kannst du die responsive Ansicht mittels der frontend.css (unter wp-content/plugins/wpshopgermany-free/views/css/) und den entsprechenden Layouts (grid/list) anpassen. Natürlich stehen wir dir dabei auch zur Seite und helfen gerne weiter.

Meines Wissens wurde in die frontend.css sogar schon ein MediaQuery eingefügt. Suche in dem Code bitte die Stelle @media(max-width:400px) und integriere folgenden Code:

Code: Alles auswählen

	/* Produktübersicht */
	.wpsg_mod_productindex_order span{ float:left; }
	.wpsg_mod_productindex .wpsg_mod_productindex_viewselect { margin-top:6px !important; }
	.wpsg_mod_productindex .wpsg_mod_productindex_order { width:90%; }
	.wpsg_mod_productindex_grid .wpsg_mod_productindex_product { width:45% !important; }
	.wpsg_mod_productindex .wpsg_mod_productindex_order select { width:65%; margin: 2px 0 0 10px; height:20px;  }
	.wpsg_mod_productindex_grid .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productindex_title { font-size:1.5em; }
	.wpsg_mod_productindex_grid .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productindex_infos,
	.wpsg_mod_productindex_grid .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_produktindex_stock,
	.wpsg_mod_productindex_grid .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_produkt_preishinweis { display:none; }
	.wpsg_mod_productindex_grid .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productindex_button { border:1px solid #ccc; }
	.wpsg_mod_productindex_grid .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productindex_button a { font-size:1.2em; }
	.wpsg_mod_productindex_grid .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productview_price { font-size:1.2em; }
	
	.wpsg_mod_productindex_list .wpsg_mod_productindex_product { width:100% !important; }
	.wpsg_mod_productindex_list .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productindex_infos,
	.wpsg_mod_productindex_list .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_produktindex_stock,
	.wpsg_mod_productindex_list .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productindex_description,
	.wpsg_mod_productindex_list .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_produkt_preishinweis { display:none; }
	.wpsg_mod_productindex_list .wpsg_mod_productindex_product .wpsg_mod_productindex_content { margin:0 !important;}
	.wpsg_mod_productindex_list .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productindex_button { border:1px solid #ccc; }
	.wpsg_mod_productindex_list .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productindex_button a { font-size:1.2em; }
	.wpsg_mod_productindex_list .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productview_price { font-size:1.2em; }
	.wpsg_mod_productindex_list .wpsg_mod_productindex_product .wpsg_mod_productindex_content .wpsg_mod_productindex_button { width:100%; text-align:center; }
Diese Anpassungen sollten auf dem Smartphone deine Produktübersicht ein wenig besser aussehen lassen.

Liebe Grüße
Wenn du glaubst, es geht nicht mehr, kommt von uns die Hilfe (http://shop.maennchen1.de/kontaktformular/) her.
Hast du wenig Geld, doch dafür Zeit, stell es der Wunschliste (https://wpshopgermany.uservoice.com/for ... 61-general) bereit!
onic
Beiträge: 236
Registriert: 20.10.2017, 20:17
Lizenz: wpShopGermany Enterprise

Re: Mobile Darstellung der Produktübersichtsseiten als Grid

Beitrag von onic »

Hallo ThoGoe,

erstmal vielen Dank für die Unterstützung und auch die Code-Ergänzung. Also wenn die Hoffnung besteht, dass dort noch Nachbesserungen zu erwarten sind, wären wir hocherfreut.

Ich habe das jetzt gerade mal mit deinem Code versucht, aber an der Ansicht ändert sich vorerst nichts:
mobile-ansicht.png
Vielen Dank und herzliche Grüße

Christian
Benutzeravatar
ThoGoe
m1.Mitarbeiter
Beiträge: 3582
Registriert: 21.07.2014, 08:25
Lizenz: wpShopGermany Enterprise

Re: Mobile Darstellung der Produktübersichtsseiten als Grid

Beitrag von ThoGoe »

Hallo!

Hast du den Code in die frontend.css unter wp-content/plugins oder unter wp-content/uploads integriert? Welche Auflösung hast du in deiner Darstellung?

Liebe Grüße
Wenn du glaubst, es geht nicht mehr, kommt von uns die Hilfe (http://shop.maennchen1.de/kontaktformular/) her.
Hast du wenig Geld, doch dafür Zeit, stell es der Wunschliste (https://wpshopgermany.uservoice.com/for ... 61-general) bereit!
onic
Beiträge: 236
Registriert: 20.10.2017, 20:17
Lizenz: wpShopGermany Enterprise

Re: Mobile Darstellung der Produktübersichtsseiten als Grid

Beitrag von onic »

Hallo,

ich habe den Code zuerst einmal wp-content/plugins integriert, weil ich sehen wollte, ob es grundsätzlich funktioniert. So wie du es oben beschrieben hast, hoffe ich jedenfalls.

Wie meinst du das mit der Auflösung? Ich hatte erstmal nur versucht, die Bildschirmgröße via Browserfenster zu verkleinern und habe dann geschaut, ob die Produkte umgebrochen werden.

Vielen Dank und herzliche Grüße

Christian
Benutzeravatar
maennchen1.de
Administrator
Beiträge: 17868
Registriert: 14.08.2003, 16:55
Lizenz: wpShopGermany Enterprise
Wohnort: Thüringen, Ellersleben
Kontaktdaten:

Re: Mobile Darstellung der Produktübersichtsseiten als Grid

Beitrag von maennchen1.de »

In erster Linie musst du unbedingt prüfen, ob der von dir eingegeben Code vom Browser gelesen wird.
Die Browser machen das unterschiedlich, weshalb ich hier keinen allgemeinen Tipp abgeben kann. Eventuell gibt es Programmierforen, wo du dich schlau machen kannst, wie du CSS verarbeitest.
Kein Support per PN! Alle Fragen beantworten wir hier im Forum. Per PN bitte nur Passwörter, Namen und URLs - sofern notwendig.
Bitte vor dem posten lesen:
Wie poste ich eine Frage zu einem Problem?
FAQ / häufig gestellte Fragen
Anzeige-Fehler / Funktionsfehler in wpShopGermany erkennen und selbst beheben
PHTML-Dateien richtig verwenden (für eigene Anpassungen)
Benutzeravatar
ThoGoe
m1.Mitarbeiter
Beiträge: 3582
Registriert: 21.07.2014, 08:25
Lizenz: wpShopGermany Enterprise

Re: Mobile Darstellung der Produktübersichtsseiten als Grid

Beitrag von ThoGoe »

Hallo!

Bitte poste einmal einen Link zu deinem Shop, damit wir uns das Ganze live ansehen können.

Liebe Grüße
Wenn du glaubst, es geht nicht mehr, kommt von uns die Hilfe (http://shop.maennchen1.de/kontaktformular/) her.
Hast du wenig Geld, doch dafür Zeit, stell es der Wunschliste (https://wpshopgermany.uservoice.com/for ... 61-general) bereit!
onic
Beiträge: 236
Registriert: 20.10.2017, 20:17
Lizenz: wpShopGermany Enterprise

Re: Mobile Darstellung der Produktübersichtsseiten als Grid

Beitrag von onic »

Hallo,

hier sieht alles etwas gequetscht aus: https://kleinefranzosen.de/shop/14-2/

Wenn man das mit eurem ThemeOne macht, sieht alles super aus. Allerdings liegen die Produktübersichtseiten im Plugin. Ich überlege, ob es sinnvoller ist, die Artikel in die Beiträge zu packen und dann die themespezisfischen Beitragsübersichten zu verwenden.

Aber irgendwie beißt sich dann immer wieder die Katze in den Schwanz. Irgendwo hakt es immer...

Vielleicht hast du ja noch eine Idee. Die Arbeit mit den Produktübersichtsseiten scheint aber irgendwie nicht so ganz ausgereift zu sein, jedenfalls nicht themeübergreifend

Vielen Dank und beste Grüße sendet

Christian
Benutzeravatar
ThoGoe
m1.Mitarbeiter
Beiträge: 3582
Registriert: 21.07.2014, 08:25
Lizenz: wpShopGermany Enterprise

Re: Mobile Darstellung der Produktübersichtsseiten als Grid

Beitrag von ThoGoe »

Hallo!

Das Problem ist, dass manche Themes unsere Regeln überschreiben. In deinem Fall ist es ähnlich. Mit dem entsprechenden Mediaquery und der folgenden Regel sieht das Ganze schon besser aus:

Code: Alles auswählen

@media (max-width:400px) {
.wpsg_mod_productindex_product { width:50% !important; }
}
Diese Regeln kannst du entweder in die frontend.css oder in die css deines Childthemes. Dafür müsstest du ein Childtheme von deinem Theme anlegen, damit das Theme weiterhin updatefähig bleibt.

Liebe Grüße
Wenn du glaubst, es geht nicht mehr, kommt von uns die Hilfe (http://shop.maennchen1.de/kontaktformular/) her.
Hast du wenig Geld, doch dafür Zeit, stell es der Wunschliste (https://wpshopgermany.uservoice.com/for ... 61-general) bereit!
Antworten