Shop - Responsive Webdesign

  • Liebes Zeta Team,

    ich verwenden Simple Respsonive Layout in Version 11.4.2 und habe einen Shop implementiert, leider wird der Shop auf Smartphones nicht korrekt angezeigt (geht über den Bildschirmrand hinaus).

    Wird der Shop in der 12er Version korrekt dargestellt? Wenn nicht, mit welchen Responsive Designs wird der Shop korrekt dargestellt?

    Besten Dank
    Tobias

  • Hallo,

    bitte hängen Sie doch einen Screenshot hier an oder nennen Sie uns die URL des Shop, damit wir die Fehlanzeige sehen können. Das sollte nämlich nicht so sein.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Hallo Stefan,

    es handelt sich um die Testversion meiner Homepage unter http://www.vintage-bullibar.de/shop/shop.php
    Derzeit ist noch alles auf einer Seite, also Warenkorb und alle Produkte, ist erst mal nur zum Testen ob die Shopfunktion überhaupt passt. Habe alles mit einem Android Smartphone getestet.

    1. Der Warenkorb geht über die Bildschirmbreite hinaus, aber ich denke, das ist der Tabelle geschuldet und schwer zu ändern?!
    2. Der Bulli Sirup ist mit dem Foto und der Darstellung "Bild rechts text umfließend" angelegt
    3. Die Bullimarmelade ist mit Darstellung Standard angelegt, Text auf meinem Smartphone finde ich nur wenn ich nach rechts scrolle (und weiß das dort Text steht)
    4. Da man bei den ersten beiden Fotos kein Pop up machen kann (was natürlich sehr schön wäre), habe ich mal den Bestellartikel und das Foto voneinander getrennt. Geht zwar zur Not, gefällt mir aber aus zwei Gründen nicht:
    a) Man muss das Foto in der Vorschau sehr klein angeben, damit es auch auf kleinen Smartphone Bildschirm nicht über Rand herausragt (wird leider nicht automatisch verkleinert)
    b) Man verschenkt Platz, da man nicht Foto und Text nahe beieinander oder sogar nebeneinander anordnen kann.

    Gibt es dafür Lösungen?

    Besten Dank
    Tobias

    Ich habe Bilder angehangen

  • Hallo,

    1. ja, die Tabelle läuft über die ganze breite. Das können wir künftig noch etwas optimieren, so dass die Tabelle als ganzes in einem bestimmten Bereich hin und her gescrollt werden kann und man dadurch die Darstellung größer machen kann.

    2-4) Das sieht auf einem iPhone eigentlich ganz ordentlich aus (Solange noch keine Produkte im Warenkorb liegen und die Seite durch die Tabelle verbreitert wird). Als Sie Ihre Screenshots des "Bulli Sirup" machten, lagen da Produkte im Warenkorb und die Tabelle war sichtbar?
    Android ist ein Problem. Welche Version und welchen Browser nutzen Sie da? Bei Android gibt es so viele verschiedene Konstellationen und Versionen, dass man das fast nicht ordentlich testen kann. Bei älteren Android Versionen wird ein Browser mitgeliefert, der schlicht nicht alle modernen Features unterstützt. Könnten Sie testhalber mal versuchen, ob es im Chrome Browser auf Ihrem Android Smartphone besser aussieht (also zumindest die Produkte)?

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Hallo Stefan,
    1. wäre super wenn umsetzbar
    2. die Darstellung ist bei mir auf Android Version 4.1.2 und Firefox auch ohne Warenkorb so, jedoch im Chrome-Browser leicht besser, zumindest das obere Produktbild ragt nicht mehr über die Breite des Screens heraus. Jedoch fehlt beim zweiten Bild der Text komplett. Ist jetzt kein Drama, da man ja die Darstellung Standard nicht verwenden muss. Hilfreich ist schon mal, dass es auf dem iPhone ganz ordentlich aussieht.

    Allg zum Pop Up in Verbindung mit Shop: Funktioniert dies mit Zeta 12 oder muss man dort auch Pop up und Bestellartikel von ein ander trennen?

    Grüße Tobias

  • Hallo,

    danke für die Rückmeldung. Was das PopUp und Shop anbelangt, so haben wir hier eigentlich nichts geändert. Evtl. kannst Du das aber einfach mit der Demo austesten. Die sollte eigentlich dein bestehendes Projekt inkl. Shop konvertieren.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Tjess,

    das mit der scrollenden Warenkorb-Tabelle (1.) (responsive) ist in Version 12 in einigen Layouts bereits implementiert. Hatte ich schlicht vergessen, dass es das bereits so gibt.

    Das könnte man so in bestehende Projekte einbauen:

    • Klicken Sie im Menü Website auf "Erweitert > Attribute"
    • Stellen Sie sicher, dass unten links im Button "Attribute" die Option "Alle anzeigen" angehakt ist
    • Doppelklicken Sie nun in der Liste der Attribute unter "Standard" auf das Attribut "mobile_script"
    • Fügen Sie folgende Textzeilen ein und schließen Sie den Dialog dann mit Klick auf "OK"

    <style>
    @media (max-width: 568px) {
    #basketForm {
    max-width: 100% !important;
    overflow: scroll !important;
    }
    }
    </style>

    Anschließend müssen Sie evtl. Ihre Seiten neu erstellen (Erweitert > Erstellen > Alle Seiten erstellen) und ggf. veröffentlichen.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!