Einkaufswelten

Die Einkaufswelten bieten die Möglichkeit, die Einkaufswelten und Landingpages voll Responsive zu erstellen.

Übersicht

• Kategorien (1): Hier findest du den Kategoriebaum deines Shops. Per Klick auf eine Kategorie kannst du Einkaufswelten dieser Kategorie anzeigen.
• Filter (2): Hier kannst du nach Endgerät filtern. Es werden dann nur Einkaufswelten angezeigt, die auch den gewählten Endgeräten zugeordnet sind.
• Einkaufswelten (3): Direkt nach Öffnen des Moduls werden Ihnen hier alle Einkaufswelten des Shops angezeigt. Werden Filter gesetzt, passt sich die Tabelle automatisch an.

Die Einkaufswelten sind in der Übersicht nach Kategoriezuordnung sortiert dargestellt, dies ermöglicht, dass du pro Kategorie immer die perfekte Übersicht hast, welche Einkaufswelten für welche Endgeräte erstellt / aktiv sind. Über die Aktionsbuttons können Einkaufswelten wie gewohnt gelöscht, bearbeitet und dupliziert werden sowie eine Vorschau geöffnet werden. Der "Aktiv"-Haken ist hier nicht klickbar, de- / aktivieren kannst du die Einkaufswelt über den "Editieren"-Button. Duplizieren der Einkaufswelten kann auf 2 Arten geschehen, entweder direkt per Klick, dann wird die Einkaufswelt 1:1 kopiert - oder per Dropdown, dann kann direkt das Endgerät ausgewählt werden, für das die duplizierte Einkaufswelt aktiv sein wird. Dies kann jedoch auch im Nachhinein noch angepasst werden.

Eine Einkaufswelt erstellen

Wenn du "Einkaufswelt hinzufügen" anklickst, öffnet sich ein Fenster, in dem alle Einstellungen für die Einkaufswelt getroffen werden können.

Der Designer ist wie bisher auch erst nach Speichern und neu Öffnen der Einkaufswelt verfügbar, da vorher noch das Raster und das Template ausgewählt werden muss.

Allgemein

• Name der Einkaufswelt: Name der Einkaufswelt
• Landingpage: Definiert, ob die Einkaufswelt eine Landingpage werden soll. Weitere Informationen sind im Bereich Landingpages in diesem Wiki Artikel beschrieben
• Aktiv: Schaltet die Einkaufswelt aktiv oder inaktiv.

Generelle Einstellungen

• Responsive Design Anpassungen:
  • Masonry-Effekt: Die Elemente werden je nach Auflösungen des Endgerätes dynamisch angeordnet. Es kann hier also passieren, dass Elemente, die an einem großen Display nebeneinander stehen, auf einem kleineren Display teils untereinander stehen, dafür behalten die Elemente beim Resize ihre Größe in etwa bei.
  • Resize der Elemente: Die Elemente werden, so wie sie angelegt werden, auf dem Endgerät dargestellt. Die Anordnung bleibt immer gleich, jedoch werden Elemente je nach Endgerät schnell kleiner, da alle Elemente ihre Position behalten.
• Raster auswählen: Wähle hier das Raster für die Einkaufswelt aus. In jede Spalte kann ein Element untergebracht werden.
• Template auswählen: Diese Einstellung kann im Normalfall ignoriert werden. Wenn du das Template der Einkaufswelten jedoch anpasst, kannst du das angepasste Template hier laden und verwenden.
• Gerät auswählen: Wähle hier das Endgerät aus, auf dem die Einkaufswelt angezeigt wird. Beachte hierbei, dass für jedes Endgerät eine Einkaufswelt vorhanden sein sollte, da sonst keine Einkaufswelt auf dem Endgerät angezeigt wird.
• Vollflächig anzeigen: Wenn aktiv, wird die Einkaufswelt über die komplette Bildschirmbreite angezeigt, was für ein besonders emotionales Erlebnis beim Kunden sorgt. Wenn dies inaktiv ist, wird die Einkaufswelt innerhalb des Containers angezeigt.
• Container-Breite: Diese Einstellung findet nur im Emotion-Template Verwendung und regelt die Breite des Einkaufswelten-Containers. Im Responsive Theme wird dies vollkommen automatisch angepasst.
• Positionierungsnummer: Wenn du mehrere Einkaufswelten in einer Kategorie nutzt, kannst du hier die Reihenfolge definieren.

Kategoriespezifische Einstellungen

• Kategorie auswählen: Wähle hier die Kategorie, der die Einkaufswelt zugeordnet sein soll. Ab Shopware 5.1.2 können hier auch mehrere Kategorien ausgewählt werden.
• Kategorie Listing: Hier kannst du definieren, ob das Kategorielisting unterhalb der Einkaufswelt angezeigt werden soll

Zeitgesteuerte Aktivierung

Zeitgesteuerte Aktivierung zurücksetzen setzt die Zeitgesteuerte Aktivierung zurück. Falls du die zeitgesteuerte Aktivierung nutzen möchtest, wähle hier Start- und Enddatum sowie -Uhrzeit. Die Einkaufswelt wird dann automatisch aktiviert bzw deaktiviert. Beachte, dass das Aktivieren und Deaktivieren durch den HTTP-Cache verzögert wird, da der HTTP Cache nicht auf diese Steuerung zugreifen kann und die Änderungen somit erst mit leeren des HTTP-Caches im Frontend greifen.

Designer

Der Designer wurde in Shopware 5 leicht überarbeitet. Die Elemente werden im nächsten Schritt gesondert beschrieben. Die Einkaufswelt kann jederzeit als Vorschau für ein bestimmtes Endgerät betrachtet werden, beachte hierbei, dass die Einkaufswelt vor dem Öffnen gespeichert wird, eventuelle Änderungen sind also im Shop zu sehen, sofern du nicht mit Caching arbeitest. Beachte ebenso, dass die Vorschau nur für Geräte funktioniert, denen die Einkaufswelt auch zugewiesen ist. Erstellst du also eine Einkaufswelt für mobile Endgeräte, werden Sie bei der Desktop-Vorschau keine Einkaufswelt sehen. Der Designer selbst wurde leicht überarbeitet, es ist nun einfach möglich, Zeilen hinzuzufügen (Mausklick auf das + am linken Rand) und Zeilen zu löschen (Klick auf das X am rechten Rand). Beachte, dass das Löschen einer Zeile alle darin befindlichen Elemente ebenso löscht, auch wenn diese über mehrere Zeilen gehen. Per Drag&Drop kannst du nun die Elemente auf das Raster ziehen und diese Konfigurieren.

Text Element (ehemals HTML Element)

• Text: Im Text Element können eigene HTML Inhalte in die Einkaufswelt eingebunden werden, hierzu kann der Editor verwendet werden. In diesem kann direkt bearbeitet werden, oder per "HTML Quellcode bearbeiten" auch fertiger Quellcode eingefügt werden.
• Titel: Der Titel wird im Frontend über dem Element selbst angezeigt
• Kein Styling hinzufügen: Hier wird definiert, ob das Styling des Templates auch auf das HTML Element wirken soll oder nicht. Dies ist für unerfahrene Anwender empfehlenswert, da hier die einheitliche Optik im Shop gewahrt wird.

Banner

Im Banner Element kann ein Banner eingebunden und entsprechend verlinkt werden. Wenn hier ein Banner hochgeladen wird, erscheint dies als Vorschau im unteren Bereich des Elements. Die Vorschau enthält ein 3x3 Raster, dies findet Bedeutung, wenn deine Einkaufswelt den Masonry Effekt nutzt. Der Effekt sieht vor, Elemente immer zu füllen, dazu wird an einigen Stellen auch Bildmaterial abgeschnitten. Über setzen des Rasters kann hierzu der Ausgangpunkt für den Zoom verwendet werden.

Hinweis: Wenn der Masonry Effekt genutzt wird, wird das Element im Frontend immer ausgefüllt. Daher kann es passieren, dass in manchen Endgeräten das hinterlegte Bild nicht vollständig angezeigt werden. Hierzu wurde ein 3x3 Raster implementiert, über welches der Ausgangspunkt des Zooms gesteuert werden kann. So wird sichergestellt, dass die wichtigsten Inhalte immer zu sehen bleiben. Im Raster wird der gewünschte Ausgangspunkt einfach per Klick ausgewählt.

Weiter kann im Banner Element noch das Mapping genutzt werden, so wird es möglich, dass einzelne Bereiche des Banners verlinkt sind und z.B. auf eine Artikeldetailseite verweisen. Per Klick auf Bild-Mapping anlegen: öffnet sich die folgende Ansicht:

Hier kann ein neues Mapping erstellt werden, dies kann individuell auf dem Banner platziert und über die dazugehörige Zeile im Mapping verlinkt werden. Hierbei kann Der Link-Typ (intern, extern), Titel sowie "Titel als Tooltipp" konfiguriert werden. Das Mapping verhält sich analog zum Zoom, es zoomt also dynamisch mit, sodass die Positionen im Bild immer weiterhin bestehen bleiben.

Artikel

Im Artikel-Element können Artikel definiert werden. Hierbei wird zwischen den Artikeltypen Ausgewählte Artikel, Newcomer, Topseller & zufälliger Artikel unterschieden. Ausgewählte Artikel können frei aus dem Sortiment definiert werden, alle anderen Typen werden automatisch vom System ermittelt. Nur Produktbild sorgt dafür, dass der Kunde im Frontend nur das Bild des Artikels sieht.

Kategorie Teaser

Der Kategorie Teaser stellt in der Einkaufswelt eine Kategorieverlinkung bereit. Hierzu kann ein beliebiger Artikel oder ein ausgewähltes Bild verwendet werden. Ebenso kann bestimmt werden, ob die Zielkategorie eine Artikelkategorie oder eine Blog-Kategorie ist.

Blog-Artikel

Der Blog Artikel verlinkt Blog Artikel eine Blog Kategorie in der Einkaufswelt. Hierbei kann die Blog Kategorie ausgewählt werden sowie die Anzahl der angezeigten Artikel und dessen Tumbnailgröße.

Banner-Slider

Im Banner Slider kannst du mehrere Banner in einer Slidesow laufen lassen. Hier kannst du die folgenden Optionen einstellen:

• Titel: Titel des Elementes, dieser wird im Frontend als Overlay angezeigt.
• Pfeile anzeigen: Zeigt die Pfeile im Frontend an, damit der Kunde im Frontend manuell durch die Banner navigieren kann.
• Nummern anzeigen: Zeigt die Nummerierung der Banner im Frontend an. Beachte, dass diese Funktion nur im Emotion-Theme Verwendung findet.
• Scroll-Geschwindigkeit: Hier stellst du die Scrollgeschwindigkeit in "ms" ein, diese Zeit wird Shopware warten, um von einem Banner zum nächsten zu wechseln.
• Automatisch rotieren: Definiert, ob Shopware die Banner automatisch rotiert oder nicht.
• Rotationsgeschwindigkeit: Dies stellt die Zeit ein, die ein Banner sichtbar bleibt, bevor Shopware zum nächsten Banner rotiert.

In der Banner Verwaltung können dann die Bilder hochgeladen werden und für jedes Bild per Doppelklick ein Link, Alt-Text und ein Titel definiert werden.

Youtube-Video

Hier kann ein YouTube Video eingebunden werden. Die Einstellungen beschränken sich hier auf die Video-ID und die Einstellung, das Video in HD zu zeigen. Die YouTube Video-ID findest du hier:

iFrame-Element

Im iFrame-Element können bereits bestehende URLs eingebettet werden.

Hersteller-Slider

Der Hersteller-Slider bietet die Möglichkeit, Hersteller Logos als Slider in die Einkaufswelt einzubinden. Du kannst hier die folgenden Einstellungen treffen:

• Herstellertyp: Hersteller einer Kategorie holt sich nur Hersteller einer ausgewählten Kategorie. Ausgewählte Hersteller lässt dich die gewünschten Hersteller komplett selbst definieren.
• Überschrift: Hier kann die Überschrift definiert werden, die dann als Overlay auf dem Element dargestellt wird.
• Pfeile anzeigen: Zeigt die Pfeile zur manuellen Navigation im Slider an.
• Nummern anzeigen: Zeigt die Seitennummern im Slider an. Beachte, dass diese Einstellung von Shopware 5 Themes nicht mehr unterstützt wird.
• Scroll-Geschwindigkeit: Definiert die Zeit, die der Slider benötigt, um die Seite zu wechseln.
• Automatisch rotieren: Lässt den Slider automatisch rotieren.
• Rotations-Geschwindigkeit: Definiert die Zeit, die eine Seite sichtbar bleibt, bevor der Slider die Seite wechselt.

Artikel-Slider

Der Artikel Slider kann Artikel in einer Vorschau in die Einkaufswelt einbinden. Hier finden sich folgende Einstellungen:

• Listentyp:
  • Ausgewählte Artikel: Hier kannst du die Artikel komplett selbst definieren. Wenn du diese Option auswählst, erscheint im unteren Bereich eine Artikel-Auswahl, in der du die anzuzeigenden Artikel suchen und auswählen kannst.
  • Newcomer Artikel: Hier werden alle neuen Artikel im Shop ausgegeben.
  • Topseller-Artikel: Hier werden alle Topseller ausgewählt.
  • Preis (aufsteigend): Die Artikel werden in aufsteigender Reihenfolge ausgewählt.
  • Preis (absteigend): Die Artikel werden in absteigender Reihenfolge ausgewählt.
• Kategorie-Auswahl: Hier wird die betreffende Kategorie ausgewählt, aus der die Artikel geholt werden. Möchtest du alle Kategorien ausgeben, wähle einfach die Hauptkategorie des Shops.
• Max Anzahl: Definiert, wie viele Artikel maximal im Slider angezeigt werden.
• Überschrift: Hier kann die Überschrift definiert werden, die dann als Overlay auf dem Element dargestellt wird.
• Pfeile anzeigen: Zeigt die Pfeile zur manuellen Navigation im Slider an.
• Nummern anzeigen: Zeigt die Seitennummern im Slider an. Beachte, dass diese Einstellung von Shopware 5 Themes nicht mehr unterstützt wird.
• Scroll-Geschwindigkeit: Definiert die Zeit, die der Slider benötigt, um die Seite zu wechseln.

HTML5 Video-Element

Das HTML Video Element kann genutzt werden, um ein selbst gehostetes Video in die Einkaufswelt einzubinden. Dieses Element sieht folgende Einstellungen vor:

• Video Modus:
  • Skalieren wird das Video so im Element platzieren, dass das Video stets zu 100% sichtbar bleibt und das Seitenverhältnis erhalten bleibt. Hier kann es aber Formatbedingt zu schwarzen Balken im Element kommen.
  • Füllen wird das Element unter Berücksichtigung des Seitenverhältnisses so vergrößert, dass keine schwarzen Balken im Element erscheinen, jedoch kann Formatbedingt ein Teil des Videos abgeschnitten werden.
  • Strecken wird das Video ohne Rücksicht auf das Seitenverhältnis auf die Größe des Elementes strecken. Hier kann es formatbedingt zu Streckungen oder Stauchungen im Bild kommen. Beachte, dass die Elemente je nach genutztem Endgerät unterschiedlich groß dargestellt werden können, dadurch kann es vorkommen, dass ein Video auf dem Desktop unter Umständen anders aussieht, als auf einem Smartphone. Technisch bedingt ist dies aber nicht anders möglich.
• .webm-Video: Gibt die Dateiquelle für das WebM Video an. Hier kann sowohl ein Element aus dem Media-Manager als auch eine externe Quelle genutzt werden.
• .ogv-Video: Gibt die Dateiquelle für das OGG Video an. Hier kann sowohl ein Element aus dem Media-Manager als auch eine externe Quelle genutzt werden.
• .mp4-Video: Gibt die Dateiquelle für das MP4 Video an. Hier kann sowohl ein Element aus dem Media-Manager als auch eine externe Quelle genutzt werden.
• Vorschau-Bild: Hier kann das Bild definiert werden, dass angezeigt wird, wenn das Video noch nicht gestartet wurde.
• Video automatisch abspielen: Spielt das Video automatisch ab, wenn die Seite angezeigt wird.
• Video automatisch vorladen: Lädt das Video automatisch vor, sodass es im Regelfall flüssiger und ohne zwischenladen abgespielt werden kann.
• Video-Steuerung anzeigen: Ist diese Funktion aktiv, wird eine Steuerungsleiste am unteren Rand des Videos dargestellt, mit dem sich das Video steuern lässt. Falls deaktiviert, wird nur ein Play/Pause-Button oben rechts im Element angezeigt. Beachte, dass die Video-Steuerung nur im Modus skalieren zur Verfügung steht.
• Video schleifen: Stellt das Video in Dauerschleife dar.
• Video stumm schalten: Schaltet das Video so lange stumm, bis der Kunde den Ton wieder aktiviert. Beachte, dass der Ton nur mit aktiver Video-Steuerung aktivierbar ist!
• Zoom-Faktor: Wenn der Video-Modus Füllen aktiv ist, kann hier der Zoom-Faktor des Videos gewählt werden.
• Linker Ausgangspunkt: Legt den linken Ausgangspunkt des Videos für die Skalierung in Prozent fest.
• Oberer Ausgangspunkt: Legt den oberen Ausgangspunkt des Videos für die Skalierung in Prozent fest.
• Overlay Text: Legt den Text für das Overlay über dem Video fest.
• Overlay-Farbe: Legt die Farbe des Overlay in RGBA fest.

Code Element

Das Code Element ist für HTML und JavaScript gedacht und führt diesen ohne jegliche Anpassung im Frontend aus. Zuerst wird der HTML-Code ausgeführt, danach der JavaScript Code.

Hinweis: JavaScript ist ohne <script>-Tags einzugeben.

Storytelling

Hast du das Plugin Shopware Storytelling, bzw. Einkaufswelten Advanced, installiert, kannst du die Einkaufswelten noch weiter optimieren, in dem du den Kunden auf Entdeckungsreise schickst und ihn emotional für deine Produkte begeisterst. Mit dem Storytelling Plugin schaffst du folgende Möglichkeiten:

• Einkaufswelt in Abschnitte einteilen, durch die der Kunde geleitet wird.
• SideView Elemente, sodass du in der Einkaufswelt aktiv Produkte bewerben kannst
• QuickView, dass Kunden sich die Artikel anschauen und ggf. gleich merken können, ohne die Einkaufswelt zu verlassen.

Hinweis: Storytelling Einkaufswelten werden immer bildschirmfüllend angezeigt! Ebenso haben Storytelling Einkaufswelten immer Priorität, das bedeutet, dass, sofern eine Storytelling Einkaufswelt in der Kategorie angezeigt wird, keine weitere Einkaufswelt angezeigt werden kann, egal ob diese aktiv ist oder nicht.

Ein ausführliches How-To zum Storytelling findest du hier oder hier.

Zusätzliche Optionen

Einkaufswelten Einstellungen

Zum einen kann der Einkaufswelten Typ gewählt werden, hier wird definiert, ob es sich um eine normale Einkaufswelt, oder eine Storytelling Einkaufswelt handelt. Beachte bitte, dass beim Wechsel der Typen die Einstellungen und Elemente verloren gehen, daher raten wir dir dringend davon ab, bestehende Einkaufswelten in Storytelling Einkaufswelten oder umgekehrt umzuwandeln! In Zeilen pro Abschnitt kann definiert werden, wie viele Zeilen jeder Abschnitt der Storytelling Einkaufswelt haben soll. Grundsätzlich kannst du diese Einstellung auch im Betrieb ändern, beachte aber, dass das verringern von Zeilen die darin befindlichen Elemente löscht! Ebenso kann nun konfiguriert werden, ob angeklickte Artikel in der QuickView geöffnet werden sollen, oder Shopware weiterhin auf die Detailseite springen soll. Die QuickView sieht im Frontend dann wie folgt aus:

Designer

Erstellst du eine Storytelling Einkaufswelt, verändert sich der Designer, um die Erstellung der einzelnen Abschnitte komfortabler gestalten zu können.

Der Designer kann nun keine Zeilen mehr hinzufügen oder entfernen. Dafür kannst du Abschnitte hinzufügen oder entfernen, in denen du deine gewünschten Elemente platzieren kannst. Ansonsten kannst du die Einkaufswelt wie gewohnt gestalten.

SideView Element

Das SideView Element kann ein Banner mit einem ausklappbaren ArtikelSlider bereitstellen, um direkt im Banner die gewünschten Artikel platzieren zu können.

• Side-View Position: Hier kann definiert werden, ob die Artikel von rechts oder von unten in das Banner sliden sollen.
• Side-View Größe: Hier wird definiert, ob die Artikel das Banner komplett überlagern, oder nur zum Teil.
• Kategorie auswählen: Definiert die Kategorie, aus denen die Artikel angezeigt werden sollen. Diese Einstellung wird nur bei den folgenden Listentypen verwendet: Newcomer Artikel, Topseller Artikel, Preis (aufsteigend) sowie Preis (absteigend)
• Listentyp: Hier kann gewählt werden, ob das Element die Artikel selbständig holen soll (Newcomer, Topseller, Preis (aufsteigend) und Preis (absteigend)) oder ob du die Artikel selbst definieren möchtest. In diesem Fall erscheint unten die bekannte Artikeleingabe, in der die Artikel definiert werden können:

• Maximale Produktanzahl: Dies reguliert die maximale Artikelanzahl. Beachte, dass diese Option nur zur Verfügung steht, wenn das Element die Artikel selbständig holt, der Listentyp also nicht auf ausgewählte Artikel steht.
• Pfeile anzeigen: Dies zeigt die Pfeile an, um den Slider manuell durchzublättern. Beachte hierbei, dass wenn die Pfeile nicht angezeigt werden und der Slider im Frontend angehalten wird (durch Mouseover), dieser nicht wieder gestartet wird!
• Automatisch starten: Lässt den Slider automatisch durchlaufen.
• Banner auswählen: Hier wählst du das Banner aus, welches im Element angezeigt werden soll. Bitte beachte hier die Gegebenheiten und Funktionsweise der Banner, welche hier zu finden sind sowie die Tipps zur optimalen Gestaltung der Einkaufswelt.

Landingpages

Einleitung

Landingpages bieten vielfältige Gestaltungs- und Marketingmöglichkeiten im Shop. Angefangen von Themenseiten, in denen sich Marketing betreiben lässt, bis hin zur individuellen Fehlerseite. Da Landingpages auch responsive sein müssen, gibt es diese als Master- und Slave Landingpages, wie das genau funktioniert, wird nachfolgend erklärt.

Master und Slave

Um für jedes Endgerät eine optimierte Landingpage erstellen zu können, gibt es Master und Slaves.

Im Master werden alle übergreifenden Einstellungen wie URL, Teaser-Bild, sowie Kategoriezuweisung, Position und SEO-Angaben definiert. Der Slave dagegen erbt diese Einstellungen vom Master, sodass alle Landingpages für die jeweligen Geräte unter einer URL erreichbar sind und gleiche SEO-Angaben vorweisen, aber dennoch ein anderes Layout angezeigt werden kann.

Hinweis: Der Master ist kein Fallback, wenn also für einen Viewport (Mobile Portrait, Mobile Landscape, ...) keine Landingpage verfügbar ist, wird im Frontend auch nichts angezeigt. Stelle daher sicher, dass für jeden Viewport eine Landingpage existiert.

Ab Shopware 5.1.2

SEO-Titel

Ab Shopware 5.1.2 ist es möglich, SEO Titles zu definieren. Hierzu gibts ein Feld SEO-Titel (1) in den Einstellungen der Landingpages.

Im Standard wird die Eingabe durch den Shopnamen ergänzt. Hier wird der Titel gezogen mit einem Fallback auf den Shopnamen in den Stammdaten.

Tipps & Tricks für optimale Einkaufswelten

Vorwort

Da das Shopware 5 Theme responsive ist, muss immer sichergestellt sein, dass deine Elemente auf allen Geräten möglichst zu 100% sichtbar sind. Dazu geben wir dir hier noch ein paar Tipps an die Hand, damit du optimale Einkaufswelten gestalten kannst. Anders als im Emotion Template gibt es im Responsive Theme keine festen Größen mehr, da diese je nach Endgerät variieren. Viel eher ist das Seitenverhältnis der Inhalte wichtig. Zum ersten solltest du dir klar darüber werden, ob du eine Einkaufswelt für alle Endgeräte erstellen willst, oder je Endgerät separate Einkaufswelten definieren möchtest. Separate Einkaufswelten können wesentlich einfacher erstellt werden, da du hier keine Rücksicht auf andere Geräte nehmen musst.

Im Standard werden 2 Raster für Einkaufswelten mitgeliefert. Diese lassen sich beliebig anpassen. Beachte bitte, dass wir keinen Support für eigene Templates oder Einkaufswelten auf Basis von eigenen Templates / Rastern geben können.

Da die folgenden Anpassungen fast ausschließlich im Resize-Modus nötig werden, gehen wir hier auch nur auf diesen ein.

Die Standard Raster

Die Standard Raster geben folgende Werte vor:

• Zellenhöhe 185 px
• Abstand: 10 px

Wenn wir nun ein übergroßes Bild in ein Banner Element einfügen, finden wir im Frontend folgende Elementgrößen vor: Desktop: 1160 px x 185 px

Das Element wird seine Zeilenhöhe stets behalten, die Breite aber je nach Endgerät verkleinert. Wenn das hinterlegte Bild größer ist, als das Element, wird das Bild je nach gesetztem Ausgangspunkt für den Zoom außen abgeschnitten, es gehen dann also Informationen vom Bild verloren. Wird das Fenster nun kleiner, wird das Element das Bild so lange verkleinern, bis das Banner das Element in der Höhe komplett füllt. Ist das geschehen, wird das Bild nur noch in der Breite beschnitten. Im Fullscreen Modus verhält sich das Element genauso, nur dass es halt über die volle Bildschirmbreite angezeigt wird.

FAQ

Welche Einstellungen sind untereinander kompatibel?

Im Grunde sind fast alle Einstellungen miteinander kompatibel. Es gibt jedoch einige Ausnahmen:

• Wird eine Einkaufswelt (z.B. Startseite) auf dem Desktop vollflächig angezeigt, ist es nicht möglich, in der für Mobile oder Tablet duplizierten Einkaufswelt das Artikellisting darunter anzuzeigen. Hier ist immer nur eine Option einstellbar.

Einkaufswelten ab Shopware 5.2

Screencast

Was ist neu?

In Shopware 5.2.0 wurden sowohl die Einkaufswelten selbst, als auch der Einkaufswelten-Designer grundlegend überarbeitet und optimiert. Somit ist es nun einfacher und intuitiver möglich, Einkaufswelten anzulegen und für die jeweiligen Geräte anzupassen.

Das überarbeitete Modul

• Kategorie-Filter (1): Hier kannst Du nach Kategorien filtern, es werden Dir dann alle Einkaufswelten innerhalb der gewählten Kategorie angezeigt. Ebenso werden alle Einkaufswelten in Unterkategorien gesondert aufgeführt.
• Geräte-Filter (2): Hier kannst Du nach Endgerät filtern, falls Du nach Einkaufswelten suchst, die für bestimmte Geräte erstellt wurden.
• Template-Verwaltung (3): Die Template-Verwaltung hat nun ihren eigenen Platz direkt im Einkaufswelten-Modul. Funktional ändert sich hier aber nichts.
• Einkaufswelt anlegen / Löschen (4): Hier kannst Du nach wie vor Einkaufswelten anlegen / löschen.
• Listing (5): Hier werden Dir abhängig der gewählten Kategorie die Einkaufswelten und Landingpages aufgelistet.

Der neue Designer

Mit Hilfe des überarbeiten Designers ist es möglich, Einkaufswelten mit unterschiedlichem Layout bzw. unterschiedlichen Elementen für die einzelnen Endgeräte auch innerhalb einer Einkaufswelt zu vereinen.

• Tabs (1): Um die Übersicht zu gewährleisten, wurde der Designer in Tabs unterteilt. Du kannst nahtlos zwischen "Einstellungen", "Layout", und "Elemente" hin und her wechseln, ohne dass die Vorschau auf der rechten Seite verschwindet. Lediglich "Freitextfelder" wird beim Anklicken mit voller Fensterbreite angezeigt.
• Anzeige-Einstellungen (2): Hier werden Kategorie(n) definiert und die Einstellung, ob unter der Einkaufswelt noch das Produkt-Listing angezeigt werden soll.
• Vorschau (3): Hier kannst Du die Vorschau der Einkaufswelt aktivieren und deaktivieren.
• Alle Verbindungen aufheben (4): Falls Du Einkaufswelten verkettet hast, kannst Du diese Verkettung hiermit auflösen.
• Warnung (5): Diese Warnung zeigt Dir an, dass dieser Breakpoint der Einkaufswelt nicht im Frontend angezeigt wird. Die Einstellungen hierfür findest Du in den "Device-Einstellungen".
• Breakpoints (6): Hier kannst Du auf die jeweiligen Breakpoints klicken und die Einkaufswelt für den jeweiligen Breakpoint optimieren.
• Ausgeblendete Elemente (7): Hier siehst du, ob und wie viele Elemente im jeweiligen Breakpoint ausgeblendet sind.
• Verketten (8): Mit dieser Funktion kannst Du Breakpoints verketten, sodass Deine Einstellungen automatisch für alle verketteten Breakpoints gelten. Um die Verkettung zu nutzen, aktiviere zuerst den Breakpoint, der als "Master" dienen soll, danach klickst Du in den anderen Breakpoints, die Du verketten willst, auf das Verketten-Icon. Sofern keine abweichenden Einstellungen definiert sind, aktiviert sich die Verkettung. Anderenfalls wirst Du gefragt, ob Du die Einstellungen Deines zu verkettenden Breakpoints überschreiben willst. Bestätige dies mit "Ja", um die Verkettung zu übernehmen.
• Breakpoint-Reichweite (9): Dieser Balken dient als Indikator für Dein Layout. Die Einkaufswelt wird immer in minimal möglicher Größe dargestellt und der farbige Bereich gibt an, wie groß die Einkaufswelt in dem jeweiligen Brekpoint maximal werden kann.

Arbeiten mit dem neuen Designer

Das Arbeiten im neuen Designer ist wesentlich übersichtlicher und angenehmer. Wechsel einfach den Breakpoint über die obere Auflistung und das Grid darunter passt sich automatisch auf die entsprechenden Abmaße an, sodass Du schon beim Erstellen einen sehr guten Eindruck davon bekommst, wie Deine Einkaufswelt später auf dem Endgerät aussehen wird.

Grid-Einstellungen

Der neue Designer unterstützt nun die direkte Änderung von Grid-Einstellungen, sodass Du die Einstellungen für Spalten, Zeilen-Abstand und Zeilen-Höhe direkt in der Einkaufswelt anpassen kannst, der Designer passt sich direkt Deinen Anpassungen an und stellt das Grid entsprechend um. Falls Du Zeilen oder Spalten mit Inhalt löschen möchtest, wirst Du gefragt, ob Du das wirklich bestätigen möchtest, da die Elemente darin ausgeblendet werden!

Platzieren von Elementen

Damit Du ohne separate Einkaufswelt ein alternatives Layout mit anderen Elementen für spezielle Breakpoints erstellen kannst, können Elemente nun ausgeblendet werden. Ausblenden ist nur dann nötig, wenn Du ein Element im aktuellen Breakpoint nicht wiederverwenden möchtest, aber es in anderen Breakpoints zur Verfügung stehen soll.

Das blaue X blendet ein Element auf dem aktuellen Breakpoint aus, sodass es in anderen Breakpoints noch zur Verfügung steht, während das rote X das Element aus der kompletten Einkaufswelt löscht und somit auch aus allen anderen Breakpoints gelöscht wird!

Ausgeblendete Elemente

Befinden sich ausgeblendete Elemente in Deiner Einkaufswelt, wird Dir das anhand des Icons (1) dargestellt:

Bei Klick auf das Icon öffnet sich eine kleine Leiste mit den ausgeblendeten Elementen:

Diese Elemente kannst Du dann wieder auf der Einkaufswelt platzieren oder löschen. Beachte, dass die Elemente beim Löschen komplett aus der Einkaufswelt entfernt werden, also auch in anderen Breakpoints nicht mehr zur Verfügung stehen!

Hinweis: "Ausgeblendete Elemente" können nur für den aktiven Breakpoint geöffnet werden. Wenn Du Dich zur Bearbeitung im Breakpoint "Desktop" befindest, kannst Du nicht direkt die ausgeblendeten Elemente des "Mobile Portrait" Breakpoints öffnen, sondern nur die des aktiven Breakpoints "Desktop".

Neue Modi

Achtung: In Shopware 5.2.0 ist der Modus "Masonry" entfernt worden, bestehende Einkaufswelten, die diesen Modus nutzten, werden mit einem gelben Symbol im Listing gekennzeichnet und lassen sich erst dann speichern, wenn Du einen der nun zur Verfügung stehenden Modi auswählst!

Fluider Modus

Der Fluide Modus ist ein Modus ähnlich dem Masonry Modus, mit der Ausnahme, dass sich die Anordnung der Elemente nicht dynamisch ändert, sondern leiglich die Breite der Elemente. Somit bleibt die Anordnung der Elemente immer gewahrt, ist aber dennoch auf allen Endgeräten anzeigbar.

Zeilen-Modus

Der Zeilen-Modus ist vorrangig für Content-Seiten vorgesehen und ist ein Modus, der ohne feste Zeilenhöhe arbeitet. Der Inhalt einer Zeile bestimmt in dem Fall dessen Höhe.

Achtung: Im Zeilenmodus bestimmt das höchste Element einer Zeile die Zeilenhöhe. Andere Elemente in der Zeile werden nur dann hochskaliert, wenn es die größe der Zelle zulässt, da in diesem Modus das Seitenverhältnis immer bestehen bleibt!

Wie Du hier sehen kannst, passen sich die Elemente an. Dadurch, dass die Elemente schmaler werden, wird das Text-Element länger / höher. Da das Bild aber sein Seitenverhältnis beibehält, wird es an dieser Stelle nicht verändert. Daher muss für die Mobile-Einkaufswelt ein anderes Layout her, im Beispiel wird das Bild einfach in's Hochformat gebracht:

Da das Bild hier nun deutlich höher ist, kann es auch mit der Textlänge mithalten und so sieht die Einkaufswelt auf dem mobilen Endgerät auch wieder besser aus.

Abmaße von Elementen im Zeilen Modus

http://community.shopware.com/Einkaufswelten_detail_1852.html