responsive design

[bqui]

Hallo,

seit kurzem ist mein Shop online.
Ich bin auch soweit sehr zufrieden; zumindest mit der Desktop- und Tablet-Version...
Aber von testenden Freunden bekomme ich Screenshots, die mir gar nicht gefallen.

Ich nutze das mitgelieferte Grid für die Produktlisten.
Das ist zwar nicht der absolute Designhammer, aber doch ganz gut zu gebrauchen.
Aber es ist nicht responsive programmiert. Und das hätte ich doch im Jahr 2017 erwartet.

Wie gesagt, das Grid ist gut zu gebrauchen, wenn genug Platz da ist.
Auf Mobilgeräten und insbesondere auf Smartphones sie es absolut grässlich aus.

Hier ein paar Screenshots:
Desktop / Tablet

Smartphone bzw. sehr schmales Browserfenster

Gibt es von diesem Grid auch eine responsive Version?
Wenn nicht, welche Datei muss ich ändern?

Danke

[ThoGoe]

Hallo!

Eine vergleichbare responsive Ansicht ist nicht verfügbar, jedoch schnell mittels css-Anweisungen und den entsprechenden Media Querys erstellt. Für die Produktübersicht benötigst du neben der frontend.css (wpshopgermany/views/css) auch noch die productindex.css (wpshopgermany/views/mods/productindex/css). Bitte beachte, dass alle deine Äderungen in den user_views hinterlegt werden und nicht im eigentlichen Shopordner unter wp-content/plugins/wpshopgermany.

Liebe Grüße

[bqui]

Danke für die Info.

Möglicherweise möchte ich doch die Grid-Darstellung etwas weitergehender modifizieren...
Wenn ich den Quelltext richtig verstehe, sind immer 4 Produkte ("width: 25%", leider nicht per css) in einer Reihe. Das ist auf schmalen Bildschirmen nicht so gut, weder für die Bilder noch für den Text.

Wie heißt denn die Datei, die das Grid liefert?
Kann ich die wie die Templates modifizieren und in user_views ablegen?

[maennchen1.de]

Die Datei liegt hier: /mods/mod_productindex/layouts/grid.phtml

[bqui]

Ja, danke!
Ich hatte das gerade schon gefunden. Habe die Listenansicht ja schon mal modifiziert und da lag es nahe mal in die grid.phtml zu schauen.
Dann mache ich mich mal ans Werk

[bqui]

Also für alle, die eine quick-and-dirty-Version gebrauchen können...

Meine kleinen Änderungen funktionieren meiner Ansicht nach gut, wenn im Shop nicht so viele Artikel sind. Bei großen Artikelanzahlen wird's unübersichtlich...

Das habe ich gemacht:
grid.phtml laut Anweisung ins upload-Verzeichnis kopiert (siehe oben). Wichtig ist, die richtigen Unterverzeichnisse zu generieren.

Dann habe ich in der neuen grid.phtml 2 kleine Änderungen vorgenommen:
Zeile 17:

Code: Alles auswählen

$col = 2;

Da stand vorher 4. Die Änderung bewirkt, dass pro Zeile nur noch 2 Produkte angezeigt werden. Deswegen wird es bei vielen Produkten unübersichtlich, weil eine endlose Tabelle entsteht (doppelt so lang wie vorher).
Bei meinem Shop war diese Sache wichtig, weil ich Probleme mit langen Wörtern im Text hatte. Dafür ist bei 4 Produkten pro Zeile kein Platz. Wenn im Text nicht so lange Wörter vorkommen, geht's vielleicht auch mit

Code: Alles auswählen

$col = 3;

Zeile 104:
Hier wird das Produktbild eingebaut. Da ist es wichtig, die Breite auf 100% zu setzen, damit das Bild immer die passende Größe hat (vor allem, wenn weniger Platz als die 140 Pixel vorhanden ist... 140 pixel ist die Original-Bildbreite.

Code: Alles auswählen

<img src="<?php echo $this->callMod('wpsg_mod_produktbilder', 'makeTn', array($p['id'], $arBilder[$nPicIndex], $nPicWidth, $nPicHeight, $bPicMode)); ?>" alt="<?php wpsg_hspc($p['name']); ?>" width="100%" />

Das 'width="100%"' am Ende ist neu. Auf keinen Fall eine Höhe angeben; die wird dann automatisch proportional berechnet.

Bevor ich jetzt das ganze Grid neu programmiere, was ich eigentlich gerne tun würde, ist das hier schon einmal eine Lösung, mit der ich leben kann.

Grüße

[bqui]

Oh oh oh, jetzt hat sich doch noch ein ziemlich dickes Problem gezeigt...

Ich habe im Shop Produkte mit Varianten.
Wenn ich in der Listenansicht oder der Gridansicht der Produkte ein solches Produkt in den Warenkorb legen will, erscheint ein Overlay, in dem ich aufgefordert werde, die Variante auszuwählen. Dieses Overlay wird mit Trickbox oder Lightbox erzeugt.

Leider ist dieses Overlay auch nicht responsive.
Auf meinem Smartphone erscheint also das Overlay und deckt den kompletten Bildschirm ab, so dass ich die Seite nicht mehr bedienen kann.
Leider ist das Overlay größer als der Bildschirm, so dass ich die Variante nicht auswählen und es auch nicht mehr schließen kann.

Wie kann ich das denn jetzt ändern?
Ich bin doch bestimmt nicht der einzige, der seinen Shop auch auf einem Smartphone zum laufen bringen möchte... Da muss es doch schon Lösungen geben, oder?

[ThoGoe]

Hallo!

Vielen Dank für deine Vorgehensweise. Aber auch auf die Gefahr hin, dass ich mich wiederhole (das bitte ich zu entschuldigen), würde ich das Problem mit der Lightbox mittels Media Querys in der frontend.css (wpshopgermany/views/css) lösen.

Liebe Grüße

[bqui]

Hallo,

das mit den CSS-Dateien ist mir gerade zu aufwändig... mich durch kilometerlange css-Regeln zu arbeiten, von denen ich gerade nicht weiß, wofür die gut sind, ist eher was für lange Winterabende...

Damit es schnell geht, habe ich bei grid.phtml und list.phtml jeweils den Link "In den Warenkorb legen" auskommentiert.

Jetzt funktionieren beide Auflistungen genau als das, was sie sind. Die Besucher müssen dann zum Bestellen über die Detailseite gehen.
Das ist zwar definitiv ein Klick zu viel, aber ich habe gerade keine Zeit mich um die css zu kümmern...

Falls mir jemand beschreiben kann, was ich an den css ändern muss, würde ich das natürlich gerne machen.

Grüße

[bqui]

Ach, nochwas...

Ich habe auch die Darstellung der Zubehörprodukte geändert. Da wurden die kompletten Beschreibungen - die bei mir teilweise ziemlich lang sind - angezeigt.
Jetzt habe ich eine Darstellung des Produktes, Preisdaten usw., Variantenauswahl, Facebook-Ankopplung, dazu ein Link zum Bestellen und zur Detailseite.

Das fände ich eigentlich auch für die list.phtml eine gute Lösung.
Kann ich das irgendwo einrichten?

[ThoGoe]

Hallo!

Poste bitte einmal einen Link oder einen Screenshot, damit man sehen kann, was du gemacht hast und was du gerne umsetzen möchtest.

Liebe Grüße

[bqui]

Hallo,

ja gerne schicke ich einen Link:
Shop: http://klangacht.de/shop/
Beispiel Produkt mit Zubehör: http://klangacht.de/produkte/ukulele-knuspergold/

Hier sieht man zuerst die Detailseite des Produktes.
Unter der Produktbeschreibung kommt eine Auflistung des möglichen Zubehörs.
Eines der Zubehörteile (Kabel) hat Varianten.
Ich habe das Template, das die Zubehöre anzeigt, bearbeitet und die Produktbeschreibung herausgenommen. Wenn jemand das lesen möchte, kann er ja auf die Detailseite gehen. Aber ich wollte trotzdem eine Möglichkeit, das Zubehör direkt auf der Seite zu bestellen inkl. Variantenauswahl.
Ich finde, das ist so eine ganz gute Lösung...

Bei der Produktauflistung gibt es ja eine Grid-Ansicht und eine Listenansicht. Zumindest in der Listenansicht könnten man das selbe wie beim Zubehör zeigen. Eventuell könnte das auch in der Grid-Ansicht gehen, da ich jeweils nur wenige Varianten habe (bis auf ein Produkt...).

Grüße

[ThoGoe]

Hallo!

folgende Zeilen sind für die Lightbox in der frontend.css unter wpshopgermany/views/css zuständig:

Zeile 369

Code: Alles auswählen

#wpsg_basket_ajax_message .wpsg_basket_ajax_message_content

Zeile 171

Code: Alles auswählen

#wpsg_basket_ajax_message .wpsg_basket_ajax_message_content

Mittels Media Querys im CSS kannst du die Lightbox ganz nach deinen Wünschen und deinem mobilen Design anpassen.
Bitte beachte, dass diese Änderungen auch in der frontend.css in deinen user-views integriert werden.

Liebe Grüße

[bqui]

Hallo,

danke für die Infos.

Ich habe an diesen beiden Stellen die CSS geändert.

Zeile 171:

Code: Alles auswählen

#wpsg_basket_ajax_message .wpsg_basket_ajax_message_content { 
	width:80%; margin:auto; background-color:white; padding:25px; text-align:center; 
	-webkit-border-radius:15px; 
	-moz-border-radius:15px;
	border-radius:15px;  
}

Zeile 369:

Code: Alles auswählen

#wpsg_basket_ajax_message .wpsg_basket_ajax_message_content { max-height:90%; }

Leider haben diese beiden Änderungen an meinem beschriebenen Problem nichts bewirkt.
Zwar passt die JavaScript-Meldung, dass ich etwas erfolgreich in den Warenkorb gelegt habe, in der Breite jetzt. Ich hatte das vorher garnicht getestet, deswegen weiß ich nicht ob es unterschiedlich ist...
Aber die Variantenauswahl passt immer noch nicht auf den Bildschirm meines Smartphones und legt die Bedienung lahm, weil die Bedienelemente außerhalb des Bildschirms liegen.

Ich bleibe also jetzt erstmal bei meiner quick-and-dirty-Lösung.
Vielleicht gibt's ja noch einen Tip, wo ich etwas drehen könnte...

Grüße

[ThoGoe]

Hallo!

Poste bitte einmal einen Screenshot davon (also von dem Problem ohne "Quick-and-Dirty"-Lösung.

Liebe Grüße