CMS Erweiterungen für Shopware 6

Bei den CMS Erweiterungen für Shopware 6 handelt es sich um eine Erweiterung, das Bestandteil von Shopware Evolve ist und erweiterte Funktionen für die Erlebniswelten bereitstellt.

Installation

Wenn für die Shopdomain mindestens der Shopware Evolve Plan im Shopware-Account hinterlegt ist, kannst Du die Erweiterung unter Erweiterungen > Meine Erweiterungen herunterladen und installieren.
Wichtig ist, dass Du Dich zuvor im Reiter Shopware Account mit Deinem Account angemeldet hast.
Nachdem die Erweiterung installiert wurde, kannst Du diese über den Schalter links neben der Erweiterung aktivieren.

Funktionen

In der Erweiterung werden folgende Funktionen bereitgestellt:

Quickview

Diese Funktion ermöglicht eine Produktansicht direkt im Listing.
Hierdurch muss der Kunde das Listing nicht verlassen, um eine detailliertere Übersicht des Produkts zu erhalten.

Aktivierung
Die Aktivierung der Funktion ist in der jeweiligen Erlebniswelt möglich und steht für folgende Elemente vom Typ Commerce zur Verfügung: "Drei Spalten, Produkt-Boxen", "Produkt-Slider" und "Cross-Selling".
Wenn Du im Erlebniswelten-Editor ein entsprechendes Element markiert hast, kannst Du im Punkt Verhalten die Quickview aktivieren (1).
Diese wird dann in allen Kategorien verwendet, denen diese Erlebniswelt zugewiesen ist.

Ansicht im Frontend

Quickview bei Suchergebnissen

Darüber hinaus kannst Du diese Produktansicht auch für die Suchergebnisse aktivieren.

Aktivierung
Die Funktion aktivierst Du direkt in der Konfiguration der Erweiterung. Gehe hierzu in der Administration auf Deine Erweiterungen und öffne die Konfiguration der CMS-Extension Erweiterung über die drei Punkte auf der rechten Seite. Im Anschluss kannst Du die Funktion aktivieren und speichern.

Ansicht im Frontend

Die Scroll-Navigation bietet Dir die Möglichkeit, in einer Erlebniswelt Navigationspunkte zu setzen. Anhand dieser Navigationspunkte wird auf der linken Seite ein Navigationsmenü eingeblendet, über das direkt zu den einzelnen Abschnitten gesprungen werden kann. Außerdem können die Abschnitte direkt über URL-Parameter aufgerufen werden.

Aktivierung
In der Erlebniswelten kann je Sektion ein Navigationspunkt angelegt werden. Hierzu stellt die Erweiterung einen neuen Abschnitt Scroll-Navigation in den Sektions-Einstellungen bereit.

Für die Zuweisung eines Navigationspunkts öffne zunächst die Sektion-Einstellungen über das Symbol auf der linken Seite der Sektion (1). Auf der rechten Seite kannst Du nun die Konfiguration der Scroll-Navigation (2) ausklappen. Dort kannst Du dann den Navigationspunkt aktivieren (3) und einen Namen vergeben (4). Wenn der Navigationspunkt aktiviert ist, wird auf der linken Seite ein zusätzliches Symbol eingeblendet (5). Hierdurch kannst Du direkt erkennen, ob bei einer Sektion der Navigationspunkt aktiv ist.

Für die korrekte Funktion der Scroll-Navigation empfehlen wir, dass die einzelnen Sektionen mindestens Bildschirmfüllend seinen sollten. Bei zu kleinen Sektionen kann es sonst vorkommen, dass das Sprungverhalten zu
den Sektionen nicht mehr exakt erfolgt.

Animiertes Scrollen
Diese Funktion erzeugt ein automatisches Scrollen beim Wechsel zu einem Navigationspunkt.
Wenn in einer Erlebniswelt mindestens ein Navigationspunkt gesetzt ist, kann in den Einstellungen der Erlebniswelt (über das Zahnradsymbol aufrufbar) im Punkt Scroll-Navigation (1) das animierte Scrollen (2) aktiviert werden.

Zur Individualisierung kannst Du aus verschiedenen Scrollverhalten (3) wählen und eine Animationsdauer (4) einstellen. Außer beim Scrollverhalten Konstant (Linear) stehen noch weitere Einstellungen (5) zur Verfügung.
Das elastische Scrolling (6) ist eine Animation, die vor und nach dem Scrollvorgang das Bild etwas "springen" lässt.
Alternativ kannst Du den Grad der Verlaufskurve (7) einstellen. Dieser Wert steuert die Beschleunigung bzw. Verlangsamung des Scrollens (nicht bei Konstant (Linear) bzw. aktivem elastischen Scrollen).

Ansicht im Frontend - Desktop

Auf der linken Seite befindet sich die Navigationsleiste (1), um zu den einzelnen Navigationspunkten zu gelangen.
Wenn Du mit der Maus über einen der Navigationspunkte hoverst, wird der Name des Abschnitts eingeblendet.

Ansicht im Frontend - Mobil

In der mobilen Ansicht befindet sich das Navigationsmenü unten rechts.
Über die Pfeil-Button (1) kannst Du zwischen den einzelnen Navigationspunkten wechseln.
Über den Button mit den 3 Strichen (2) kannst Du das Menü ausklappen.

In der ausgeklappten Übersicht (1) werden Dir nun die einzelnen Abschnitte mit den jeweiligen Bezeichnungen aufgelistet.

Aufruf per URL-Parameter

Es ist möglich, einen Navigationspunkt direkt über einen URL-Parameter aufzurufen. Hierzu wird der Name des Navigationspunkts verwendet.
In unserem Beispiel ist der Name des Navigationspunkts "Lorem Ipsum". Der Aufruf erfolgt über die URL
https://dein-shop.de/Test-Landingapge/#lorem%20ipsum

Sichtbarkeit einzelner Blöcke definieren

Die Erweiterung stellt eine Funktion bereit, um die Sichtbarkeit einzelner Blöcke einer CMS-Seite über Rule-Builder-Regel zu steuern.

Um die Einstellungen hierfür vornehmen zu können, klicke zunächst einmal auf den gewünschten Block (1). Hierdurch werden die Block-Einstellungen (2) auf der rechten Seite aufgerufen. Dort klappe die Sichtbarkeits-Einstellungen (3) auf. Wähle eine Rule-Builder-Regel (4) aus, um die Sichtbarkeit des Blocks zu definieren. Wenn keine Regel ausgewählt ist, wird der Block immer angezeigt. Optional kannst Du die ausgewählte Regel negieren (5).

Eigene Formulare

Neben dem Standard Formular kannst Du mit den CMS-Erweiterungen für Shopware 6 auch eigene individuelle Formulare in den Erlebniswelten einfügen.

Um Deiner Erlebniswelt ein eigenes Formular hinzuzufügen, klicke auf Inhalte > Erlebniswelten und wähle die Erlebniswelt, zu der das Formular hinzugefügt werden soll. Klicke dann auf das + Symbol, um einen neuen Block hinzuzufügen und wähle als Block-Kategorie Formular aus. Neben dem Standard-Formular, bspw. für den Kontakt, kannst Du nun auch ein eigenes Formular in Deine Erlebniswelt ziehen.

Anschließend öffnet sich ein Popup Fenster, in dem Du auswählen kannst, ob Du eine zuvor von Dir erstellte Vorlage nutzt oder ein neues Formular erstellst.

Auch wenn Du auf eine Vorlage zurückgreifst, lässt diese sich anschließend komplett bearbeiten.

Optionen

Wenn Du ein neues Formular erstellst oder ein bestehendes bearbeitest, öffnet sich das Fenster Formular Einstellungen mit den Reitern Optionen und Felder. Im Reiter Optionen triffst Du die grundsätzlichen Einstellungen des Formulars.

Name (intern) (1): Trage hier ein, wie das Formular intern heißen soll. wenn Du das Formular beispielsweise in den Vorlagen abspeicherst, wird dieser Name verwendet.
Überschrift (2): Die Überschrift wird in der Erlebniswelt, also im Frontend, als Überschrift für das Formular verwendet.
Bestätigungstext (3): Der Bestätigungstext wird dem Anwender angezeigt, sobald er das Formular ausgefüllt hat.
Empfänger-Adresse (4): Trage hier alle E-Mail-Adressen ein, an die das ausgefüllte Formular geschickt werden soll. Mehrere Adressen können einfach eingetragen werden, indem hinter jeder Adresse die Eingabetaste gedrückt wird.
E-Mail-Template (5): Wähle hier das E-Mail-Template, welches für den Versand des Formularinhaltes an die Empfänger-Adressen genutzt werden soll.

Felder

Im Reiter Felder kannst Du angeben, welche Felder vom Anwender ausgefüllt werden können oder müssen. Hierzu kannst Du Gruppen anlegen, welche dann ein oder mehrere Felder enthalten.

Gruppe (1): Auf der linken Seite siehst Du die Gruppen des Formulars. Über die Punkte auf der linken Seite kannst Du die Reihenfolge der Gruppen per Drag&Drop ändern.
Gruppen Kontextmenü (2): Auf der rechten Seite jeder Gruppe kannst Du die Position der Gruppe verändern, sie löschen oder auch duplizieren. Außerdem kannst Du dort die Gruppe bearbeiten, sodass auf der rechten Bildschirmseite weitere Optionen zu der Gruppe angezeigt werden. Dort kannst Du zum einen den internen Namen der Gruppe angeben. Zum anderen kannst Du hier die Überschrift der Gruppe angeben, die auch im Frontend angezeigt werden soll.
Feld (3): Die Felder befinden sich innerhalb einer Gruppe. Über die Punkte auf der linken Seite kannst Du die Reihenfolge der Felder innerhalb der Gruppe per Drag&Drop ändern.
Feld Kontextmenü (4): Auf der rechten Seite des Feldes kannst Du über das Kontextmenü die Position des Feldes verändern, das Feld in eine andere Gruppe verschieben, es duplizieren oder löschen. Außerdem kannst Du das Feld dort bearbeiten, sodass auf der rechten Bildschirmseite weitere Optionen zu dem Feld angezeigt werden.
Feld hinzufügen (5): Hier kannst Du ein neues Feld innerhalb der jeweiligen Gruppe erstellen.
Gruppe hinzufügen (6): Über diesen Button fügst Du eine neue Gruppe inklusive eines Feldes hinzu.
Optionen (7): Je nachdem ob Du gerade eine Gruppe oder ein Feld bearbeitest, findest Du auf der rechten Seite weitere Optionen für die jeweilige Gruppe oder für das jeweilige Feld.
Bearbeitest Du eine Gruppe, siehst Du die Angaben Name (Intern) und Überschrift. Die Überschrift ist hierbei im Frontend sichtbar, während der Interne Name als interne Identifikation dient. Beispielsweise als Variable in E-Mail-Templates.
Welche Optionen hier angezeigt werden, wenn Du ein Feld bearbeitest, siehst Du hier.
Als Vorlage speichern (8): Über diesen Button kannst Du das soeben erstellte Formular als Vorlage speichern. Beim Hinzufügen neuer Formulare zu Deiner Erlebniswelt, kannst Du diese Vorlagen dann auswählen und weiterbearbeiten.
Fertig (9): Um alle Änderungen in dem aktuellen Formular zu übernehmen, klickst Du abschließend auf Fertig.

Felder Optionen

Wenn Du Felder bearbeitest, siehst Du die Optionen, die Du bearbeiten kannst, auf der rechten Seite. Hierbei unterscheiden sich die möglichen Optionen je nachdem welchen Typ das Feld hat, das Du bearbeitest. Folgende Optionen sind aber bei jedem Typ immer vorhanden.

Name (1): Der Interne Name dient als eindeutige Identifikation für die Verwendung dieses Feldes als Variable. Zum Beispiel in E-Mail-Templates.
Titel (2): Dies ist der Name, den das Feld auch im Formular im Frontend trägt.
Typ: (3): Wähle hier den Typen, den das Feld haben soll. Nach diesem Typen entscheidet sich, welche Werte in das Feld eingetragen werden können und wie diese auszusehen haben. Wir haben die verfügbaren Typen nachfolgend aufgelistet.
Breite (4): Hier legst Du fest, wie breit ein Feld sein soll. Wenn zwei nachfolgende Felder zusammen maximal 100% der Breite verwenden, werden sie im Formular nebeneinander angezeigt. Dies ist beispielsweise sinnvoll, wenn Informationen in zwei Feldern eingetragen werden sollen, aber inhaltlich zusammen gehören, bspw. Straßenname und Hausnummer.
Pflichtfeld (5): Gib hier an, ob das Feld ausgefüllt werden muss oder nicht.
Fehlermeldung (6): Diese Meldung wird dem Benutzer im Frontend angezeigt, wenn es sich um ein Pflichtfeld handelt und dies nicht ausgefüllt wurde.

Textfeld & E-Mail-Feld

Bei dem Feldtyp Text oder E-Mail kannst Du einen Platzhaltertext angeben, der angezeigt werden soll, wenn das Feld noch nicht ausgefüllt wurde.

Nummernfeld

Für Felder mit dem Typ Nummer kannst Du optional angeben, ob es eine Minimal- oder Maximalgrenze geben soll. Außerdem kannst Du angeben, in welchen Schritten der Benutzer Nummern eingeben kann. Trägst Du hier z.B. eine 3 ein, kann der Benutzer hier nur Zahlen 3, 6, 9, 12, 15, usw... auswählen.

Auswahlfeld

Das Auswahlfeld ist eine Checkbox, die der Benutzer aktivieren oder deaktivieren kann. Im Standardwert kannst Du angeben, ob das Feld standardmäßig schon aktiviert sein soll oder nicht.

Auswahl

Bei dem Feldtyp Auswahl kannst Du dem Benutzer eine Auswahl vorgeben, aus der er dann das für sich passende auswählen kann. Wählst Du hier Inhalt = Entität aus, kannst Du im zweiten Schritt auswählen, aus welcher Shop Entität der Benutzer eine Auswahl treffen kann.
Wählst Du Inhalt = Benutzerdefiniert, kannst Du im zweiten Schritt selber Werte angeben, aus denen der Benutzer dann auswählen kann. Tippe die Werte dazu in das Feld Werte und drücke die Enter Taste.

Textfläche

Die Textfläche dient dazu, einen längeren Text einzugeben. Neben dem Platzhaltertext kannst Du hier zusätzlich angeben, wie viele Zeilen der Benutzer verwenden darf und ob der Benutzer die Größe der Textfläche selber verändern darf.