Hier soll gezeigt werden, wie man die Ansichten seiner Shopware 6 Erlebniswelten für mobile Ansichten optimieren kann. Vieles was bei Shopware 5 einfach ging, ist in Shopware 6 komplizierter geworden. Natürlich sind auch viele spannende neue Funktionen wie der Rule Builder oder die Dynamischen Produktkategorien dazu gekommen. Aber gerade wenn man an seinen ersten Shopware 6 Projekte sitzt schaut man relativ oft in die Röhre.

Übersicht:


1. Was ist das Problem auf mobilen Endgeräten?

Worauf will ich hinaus? In den Einkaufswelten (von Shopware 5) konnte man bestimmte Sektionen zum Beispiel für die mobile Ansichten ausblenden. Das ist bei Shopware 6 ohne ein zusätzliches Plugin nicht mehr möglich. Heißt alle Elemente die man in seine Erlebniswelt einbaut werden vom kleinsten bis zum größten Viewports identisch ausgegeben. Hierbei verwendet man dann natürlich so große Bilder, dass Sie auf dem größten Viewport noch gut aussehen.

Aber das sind genau die Bilder, die wir auf mobilen Endgeräten definitiv nicht ausliefern sollten da solche Riesen Bilder auf Mini Endgeräten unnötig lange Ladezeiten mit sich bringen und das beste Mittel auf dem Weg nach unten bei den Google Suchergebnisseiten sind.


2. Das Plugin zur Responsive Optimierung der Erlebiswelten

Die gute Nachricht für schnelle Lösungen in Form von Plugins für um die hundert Euro findet sich hier unter diesem Link:

Responsives Anzeigen und Ausblenden für Erlebniswelten
https://store.shopware.com/flink71241235154/responsives-anzeigen-und-ausblenden-fuer-erlebniswelten.html

Erlebniswelten Plugin für Viewports

Erlebniswelten Plugin für Viewports

Das ist aktuell wahrscheinlich auch die empfehlenswerteste Methode um die Ausgabe der Elemente und Sektionen der Einkaufswelt individuell für die unterschiedlichen Viewports ausgeben zu lassen. Besonders spannend hört sich hierbei die Funktion Inhalte mit Bildern für bessere Performance nachladen an.

Plugin Dokumentation:
https://docs.flinkfactory.com/plugins/FlinkCmsResponsiveHelper/configuration/


3. Ausblenden auf mobile / Desktop Ansicht mit (S)CSS

Eine Sache ist völlig absurd… wenn man die Standard Erlebniswelt für die Kategorien mit Sidebar auswählt, dann wird die Sidebar auch einfach auf mobilen Endgeräten angezeigt. Sprich man hat oben die Sandwich Navi, dann kommt die Sidebar und dadrunter wohlgemerkt erst die Liste der Artikel. Ich dachte zuerst das wäre ein Bug. Aber nein es gibt auch Foren-Beiträge die dieses Verhalten bestätigen.

Standard Kategorie-Layout mit Sidebar (Mobile Ansich)
https://forum.shopware.com/t/standard-kategorie-layout-mit-sidebar-mobile-ansich/93584

Im Beitrag wird auch schon „gesagt“ was man machen kann. Man muss die Sektion anklicken und dann im Feld Mobiles Sidebar-Verhalten die Option Nicht angezeigt auswählen.

Shopware 6 Sidebar deaktivieren auf mobile

Shopware 6 Sidebar deaktivieren auf mobile

Aber was macht man mit anderen Elementen die man ausblenden möchte?

Ich will es hier auch noch einmal an der Sidebar demonstrieren… auch wenn es hier die oben beschriebene, definitiv bessere Variante gibt.

Man könnte nämlich auch beiden Sidebar Elementen Navigation & Filter im Layout Bereich eine Klasse zuordnen. Hierfür muss aber zunächst erst einmal die Standard Kategorie kopiert werden, da diese sich sonst nicht bearbeiten läßt.

So machen wir es beim Navigation Element:

Responive Webdesign mit CSS

Responive Webdesign mit CSS

Wie man sieht habe ich der Klasse einen sprechenden Namen gegeben und Schleichwerbung eingebaut. Mit der Zeile .g2g-hideonmobile in meinem CSS Code kann ich nun jeden Bereich, der diese Klasse zugeordnet bekommen hat ganz einfach ausblenden. Es kann übrigens nicht schaden sich eine kleine Liste der Elemente und Bereiche zu machen, insbesondere wenn man plant halbwegs zahlreiche Bereiche auszublenden.

Noch etwas besser wäre es gleich 3-4 Klassen anzulegen, die man dann noch mit dem Viewport Kürzel erweitert.


.g2g-hideonmobile-sm,
.g2g-hideonmobile-md,
.g2g-hideonmobile-lg,
.g2g-hideonmobile-xl {
display: none;
}

// AB 576px = SM / SMALL
@include media-breakpoint-up(sm) {
.g2g-hideonmobile-sm {
display: block;
}
}
// AB 768 = MD / MEDIUM
@include media-breakpoint-up(md) {
.g2g-hideonmobile-md {
display: block;
}
}
// AB 992 = LG / LARGE
@include media-breakpoint-up(lg) {
.g2g-hideonmobile-lg {
display: block;
}
}
// AB 1200 = XL / XTRA LARGE
@include media-breakpoint-up(xl) {
.g2g-hideonmobile-xl {
display: block;
}
}

Und den Sidebar Elemente würden wir dann die Klasse g2g-hideonmobile-lg zuordnen, da hier der Umbruch bei 992px stattfindet. .Bei Elementen mit Texten ist diese Herangehensweise „halb so schlimm“ – bei essentiellen Elementen des Shops… naja. Also macht es auf keinen Fall mit der Sidebar. Bilder kann man theoretisch auch auf diese Weise ausblenden. Natürlich wäre es besser, wenn wir auch den Code im Quelltext erst gar nicht mehr angezeigt bekämen, aber fürs erste kann man sich so helfen.


4. Erlebniswelt-Banner frisieren

Erlebniswelt-Banner haben in der Regel nicht nur ein, nein sondern gleich zwei Probleme. Erstens werden immer die gleichen Banner ausgegeben, egal wie klein oder groß der Viewport / Monitor ist. Zweitens werden die Bilder immer abgeschnitten. Man muss sich also genau überlegen wo man zusätzliche Grafik-Elemente oder Text einbindet, weil alles was zu weit am Rand ist wird in dem einen oder anderen Viewport mehr oder weniger beschnitten werden. Bei Text kommt noch einmal hinzu, dass dieser auf kleineren Viewports immer kleiner und unleserlicher wird. Daher rate ich grundsätzlich davon ab Text in BAnner einzubinden, sofern nicht unterschiedliche Bild-Dateien verwendet werden.

Wer sich etwas mit Bootstrap und SCSS auskennt sollte einfach das Einkaufswelten TWIG Plugin verwenden und selber etwas sauberes zaubern. Wichtig ist es hierbei dann die Bilder auch abhängig von Viewports oder Bildschirmauflösung auszugeben.

Moori Twig Compiler

Moori Twig Compiler

Hier geht es zum Plugin im Store:
https://store.shopware.com/moorl29420842994f/html-erlebniswelten-element-mit-twig-compiler.html

Noch ein sehr gutes Plugin von moori ist das Foundation Plugin:
https://store.shopware.com/moorl50852475974f/foundation-basis-version.html

Hier wird es genauer erklärt:
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

Aber mal im Ernst. Wer hat schon Lust für jeden Banner 3 oder 4 Bild-Dateien anzulegen? Richtig: niemand. Daher kommt hier nochmal ein kleiner Geheimtipp für die faulen Ladezeiten-Profis.
https://www.w3docs.com/snippets/css/how-to-crop-and-center-an-image-automatically-in-css.html

Diese Methode habe ich auf Codepen gefunden, wo einige Leute Bilder von Pexels einbinden. Diese sind in der Regel riesig und werden über den Link zur Bild-Datei (mit zusätzlichen Infos garniert und) beim Einbinden verkleinert. So könnte man also beide Varianten kombinieren und statt unterschiedlichen Bild-Dateien einfach nur unterschiedliche Links mit den jeweiligen Größenangaben einbinden.


5. Der einzige (wirklich) Responsive Erlebniswelten Slider

Beim Slider wird es etwas schwer mit Code. Warum wir das wissen? Weil wir den Super-Mega Slider erfunden haben. Den einzigen Slider für Shopware 5 oder 6, der nie etwas von den Bildern abschneidet und immer (!) sein Format behält. Als ob das nicht schon genug wäre erlaubt es der Slider 3 unterschiedliche Hintergründe zu verwenden. Neben Bildern lassen sich nämlich auch Farben oder sogar Videos als Hintergrund im Slide anzeigen. Das i-Tüpfelchen ist dann noch die YouTube Video Funktion. heißt man kann im selben Slider: Bilder, Videos, Hintergrundfarben und YouTube Videos kombinieren und es sieht auf allen Endgeräten gut aus.

Ein weiterer Pluspunkt: Man kann den Slider auch einfach nur als Banner verwenden in dem man nur einen einzelnen Slide einbindet.

Shopware Responsive Slider

Shopware Responsive Slider


6. Weiterführende Links

Bootstrap
https://getbootstrap.com/

Twig:
https://twig.symfony.com/

Du brauchst Hilfe bei der Umsetzung mit Shopware? Dann setze dich jetzt mit uns in Verbindung.