Responsive Einkaufswelt

Shopware 5 Programmierung
1

Hallo zusammen,

ich nutze das Shopware Responsive Template als Grundlage und habe darin einen Breakpoint entfernt, da mir das Theme zu oft umbricht:

@phoneLandscapeViewportWidth: 30em; // 480px
@tabletViewportWidth: 64em; // 1024px ANGEPASST!
@tabletLandscapeViewportWidth: 64em; // 1024px
@desktopViewportWidth: 78.75em; // 1260px

Ich habe den tabletViewportWidth auf 64em gesetzt, sodass ich insgesamt einen Breakpoint weniger habe. Scheinbar verursacht das jedoch Probleme in den Einkaufswelten. Ich habe eine Einkaufswelt erstellt, die oben einen Banner hat und darunter vier Produkte nebeneinander. Leider werden mir diese bei dem einen Viewport so dargestellt:

Ich nehme an, dass ich in irgendeiner JS Datei den nicht genutzten Viewport für die Einkaufswelten deaktivieren muss. Kann mir hier jemand weiterhelfen? Bin langsam am verzweifeln…

2

Hey,

die JavaScript Plugins arbeiten ebenfalls mit den Breakpoints. Hier müsstest Du den StateManager ebenfalls entsprechend konfigurieren. Weitere Infos zum Thema StateManager bekommst Du hier:

jQuery plugins and the StateManager

Sonnige Grüße,
Phil

3

Hallo Grit,

Du bist jemand von der ganz harten Sorte und hast aber dabei hoffentlich vorher ein eigenes Theme auf der Grundlage des haueigenen Responsive Theme gemacht?
Und nachdem du das eigene Theme angelegt hast, kannst du zig Einkaufswelten basteln, die du jeder Kategorie zuordnen kannst. Damit nicht genug. Wenn du bei den Einkaufswelten an den farbigen Balken das Schlosssymbol deaktivierst, kannst du jeden Viewport extra nochmal formatieren. Und erst wenn das alles immer noch nicht zum Ergebnis führt, greife ich in less ein. Da ist aber meine Arbeitsweise.
Ich würde dir empfehlen -> auf Anfang zurück. Bootstrap und die dazugehörige js sind schon hoch komplex.

Grüße

Karsten