Magento 2 Handbuch

8. Wie funktionieren die CMS-Elemente in Magento 2?

Um sich von Wettbewerbern abzuheben, die Sichtbarkeit in Suchmaschinen zu verbessern und guten Kundenservice zu bieten, sind informative und ansprechend aufbereitete Inhalte ein wirksames Instrument zum Aufbau von Glaubwürdigkeit und Vertrauen. Daher muss die Arbeit mit den Inhalts-Elementen Seiten, Blocks und Widgets in Magento 2 ein integraler Bestandteil eines jeden Marketingskonzepts sein.

Dank in das Admin-Panel integrierter Funktionen eines CMS (Content-Management-System) ermöglicht Magento 2 die komfortable Verwaltung von Inhalten (Texte, Bilder, Filme etc.) und bietet eine sehr gute Grundlage für wirksames Content-Marketing. Der folgende Überblick erläutert bündig, wie die Inhalte für einen Magento Shop verwaltet werden und worauf dabei zu achten ist.

8.1 Seiten-Elemente (Pages) in Magento 2

Mithilfe von CMS-Seiten lassen sich die unterschiedlichen Inhalte logisch strukturiert in einem Magento 2 Shop verwalten und unkompliziert im jeweiligen Corporate Design anzeigen. Neben individuell eingegebenen Texten und eingebundenen Grafiken lassen sich dabei auch fertige Content-Blöcke und sogenannte Widgets verwenden, mit deren Hilfe Inhalte komfortabel an bestimmten Stellen unterbringen lassen. Für Kundenservice und Usability eines Shops sind CMS-Seiten ein ausgesprochen wichtiges Mittel.

8.1.1 Grundlegende Inhaltsseiten

In einer frischen Magento 2 Installation mit Demo-Inhalten sind bereits einige zentrale CMS-Seiten vorbereitet, die entweder übernommen und nach eigenen Bedürfnissen angepasst oder durch andere, selbst angelegte Seiten ersetzt werden können. Interessant sind die vorbereiteten Seiten auch insofern, als sie durch das Vergleichen von Anzeige um Frontend und Code-Struktur im Backend Aufschluss darüber geben, wie bestimmte Inhaltselemente realisiert werden können.

Hier zunächst eine Übersicht der vorbereiteten Inhaltsseiten, die– das sei noch einmal ausdrücklich betont – auch jeweils durch neu angelegte Seiten ersetzt werden können:

Home
Die Demo-Seite „Home“ ist standardmäßig als Startseite des Shops definiert. Sie enthält einen Banner, mehrere statische Blöcke mit Links und eine Liste neuer Produkte.

About Us
Die Seite „About Us“ ist aus dem Footer des Shops verlinkt und soll relevante Informationen über den Shop und das Unternehmen dahinter liefern. Auf dieser Seite können neben Texten und Bildern auch Videos oder Links zu Pressemitteilungen und journalistischen Beiträgen Platz finden.

Customer Service
Ein weiterer wichtiger Punkt in der Sitemap des Shops ist die Seite „Customer Service“. Hier sollten Informationen zum Kundenservice zusammengestellt werden (Bezahlmethoden, Versandkosten, Lieferfristen und -bedingungen sowie Links zur Widerrufserklärung, zu den AGB, zur Datenschutzerklärung und anderen wichtigen Inhalten.

Privacy Policy
Die Seite „Privacy Policy“ ist für die Angaben zum Datenschutz gedacht und daher für die Rechtssicherheit eines Onlineshops zentral. Die Datenschutzerklärung muss die Kunden nach Maßgabe des geltenden Rechtsrahmens vollständig darüber aufklären, was mit ihren Daten geschieht und was sie zu deren zusätzlichem Schutz unternehmen können.

Page Not Found
Die Seite „404 Page Not Found“ sollte zwar möglichst kein Kunde zu Gesicht bekommen – aber sie ist sowohl im Hinblick auf die Customer Experience als auch für die Suchmaschinenoptimierung (SEO) unerlässlich. Wenn eine URL aufgerufen wird, die es nicht oder nicht mehr gibt (etwa aufgrund einer fehlerhaft eingegebenen Adresse oder einer veralteten Verlinkung), sollte eine solche Seite mit sinnvollem Text in der jeweiligen Sprache des Kunden angezeigt werden und ihm mitteilen, wie er nun aus der Sackgasse wieder hinauskommt. Andernfalls wird eine Fehlermeldung des Webservers angezeigt, was sowohl auf Kunden als auch auf Crawler ausgesprochen abschreckend wirkt.

Enable Cookies
Die „Enable Cookies“ Seite wird angezeigt, wenn Besucher des Shops in ihrem Browser Cookies deaktiviert haben. Sie soll erklären, wie Cookies aktiviert werden können.

8.1.1.1 Einstellungen zu Seiten-Standards (Default Pages)

Im Bereich Default Pages der Magento 2 Konfiguration lassen sich grundlegende Einstellungen zur Startseite, zur Seite, die bei 404-Fehlern („Seite nicht gefunden“) angezeigt wird, zur „Enable Cookies“-Seite und zu Breadcrumbs vornehmen. Die entsprechenden Einstellmöglichkeiten finden sich über das Hauptmenü unter Stores > Settings > Configuration > General > Web im Abschnitt Default Pages.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

  • Default Web URL
    In das Feld Default Web URL wird der relative Pfad zu dem Verzeichnis der Magento 2 Installation, in dem sich die Landingpage befindet, eingegeben. Der Standardwert ist „cms“.
    Wenn für einen bestimmten Store View ein abweichende Einstellungen nötig ist, kann der Store View oben links über das Dropdown-Menü ausgewählt werden, dann der Haken bei Use system value, Use Default beziehungsweise Use Website entfernt und der gewünschte Wert in das Feld eingetragen werden.
    Die Änderungen durch einen Klick auf den Button Save Config oben rechts speichern.

  • CMS Home Page
    Im Feld CMS Home Page wird die CMS-Seite festgelegt, die als Startseite, des Shops verwendet wird.
    Wenn für einen bestimmten Store View ein abweichende Einstellungen nötig ist, kann der Store View oben links über das Dropdown-Menü ausgewählt werden, dann der Haken bei Use system value, Use Default beziehungsweise Use Website entfernt und die gewünschte CMS-Seite aus der Liste gewählt werden.
    Die Änderungen durch einen Klick auf den Button Save Config oben rechts speichern.

  • Default No-route URL
    Im Feld Default No-route URL wird der relative Pfad zu dem Verzeichnis in der Magento 2 Installation angegeben, in das umgeleitet werden soll, wenn ein 404-Fehler („Seite nicht gefunden“) auftritt. Der Standardwert ist „cms/index/noRoute“. Wenn für einen bestimmten Store View ein abweichende Einstellungen nötig ist, kann der Store View oben links über das Dropdown-Menü ausgewählt werden, dann der Haken bei Use system value, Use Default beziehungsweise Use Website entfernt und der gewünschte Wert in das Feld eingetragen werden.
    Die Änderungen durch einen Klick auf den Button Save Config oben rechts speichern.

  • CMS No Route Page
    Unter CMS No Route Page wird die Seite festgelegt, die angezeigt wird, wenn ein Fehler 404 („Seite nicht gefunden“) auftritt.
    Wenn für einen bestimmten Store View ein abweichende Einstellungen nötig ist, kann der Store View oben links über das Dropdown-Menü ausgewählt werden, dann der Haken bei Use system value, Use Default beziehungsweise Use Website entfernt und die gewünschte CMS-Seite aus der Liste gewählt werden.
    Die Änderungen durch einen Klick auf den Button Save Config oben rechts speichern.

  • CMS No Cookies Page
    Unter CMS No Cookies Page wird die Seite festgelegt, die angezeigt wird, wenn ein Besucher Cookies deaktiviert hat.
    Wenn für einen bestimmten Store View ein abweichende Einstellungen nötig ist, kann der Store View oben links über das Dropdown-Menü ausgewählt werden, dann der Haken bei Use system value, Use Default beziehungsweise Use Website entfernt und die gewünschte CMS-Seite aus der Liste gewählt werden.
    Die Änderungen durch einen Klick auf den Button Save Config oben rechts speichern.

  • Breadcrumbs for CMS Pages
    Wenn verlinkte Breadcrumb-Pfade oben auf den CMS-Seiten des Shops angezeigt werden sollen, muss die Option Breadcrumbs for CMS Pages auf „Yes“ gestellt sein.
    Wenn für die einzelnen Store Views abweichende Einstellungen nötig sind, kann der jeweilige Store View oben links über das Dropdown-Menü ausgewählt werden, dann der Haken bei Use Website entfernt und die gewünschte Einstellung vorgenommen werden.
    Die Änderungen durch einen Klick auf den Button Save Config oben rechts speichern.

8.1.2 Die Darstellung der Seitenübersicht anpassen und als View speichern

Die Auswahl der Spalten und deren Anordnung in der Tabelle für die Seitenübersicht können je nach Bedarf angepasst werden. Eine sehr komfortable Funktion in Magento 2 ist die Möglichkeit, Tabellenlayouts als sogenannte Grid Views zu speichern, um sie künftig immer wieder per Klick aufrufen zu können. Für die Anzeige der Seiten stehen insgesamt 15 Spalten zur Verfügung, von denen im Standard View lediglich 9 aktiviert sind.

8.1.2.1 Die Auswahl der Spalten für die Seitenübersicht ändern

Um die Auswahl der Spalten für die Seitenübersicht unter Content > Elements > Pages zu ändern, muss oben rechts durch einen Klick auf den Reiter der Spalte Columns mit dem Zahnradsymbol der entsprechende Auswahlbereich geöffnet werden. Nun können die Checkboxen der Bezeichner für die Spalten, die der Tabelle hinzugefügt werden sollen, ausgewählt werden und die Checkboxen der Bezeichner für Spalten, die nicht mehr in der Tabelle angezeigt werden sollen, abgewählt werden.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

8.1.2.2 Die Anordnung der Spalten für die Seitenübersicht ändern

Um in der Seitenübersicht eine Spalte per Drag-and-drop zu verschieben, kann diese ganz einfach in der dunkelgrauen Titelzelle angeklickt, an die gewünschte Position verschoben und dort wieder losgelassen werden.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

8.1.2.3 Layout der Seitenübersicht als Grid View speichern

Entsprechen sowohl die Auswahl als auch die Anordnung der Spalten für die Seitenübersicht den eigenen Vorstellungen für einen bestimmten Zweck, lässt sich das Layout als Grid View speichern, indem die View Steuerung durch einen Klick auf den Reiter mit dem Augensymbol, neben dem der Name des gerade ausgewählten Layouts für die Tabelle (Standard: „Default View“) zu lesen ist, geöffnet und dann mit einem Klick auf den Link Save View As… das Eingabefeld für den Namen des zu speichernden Tabellenlayouts sichtbar gemacht wird.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

8.1.2.4 Ein gespeichertes Tabellenlayout (Grid View) bearbeiten/löschen

Um ein gespeichertes Tabellenlayout (Grid View) für die Seitenübersicht zu bearbeiten, muss es über den Reiter mit dem Augensymbol aus der Liste der zur Verfügung stehenden Layouts ausgewählt sein, damit neben dem Namen ein Bleistiftsymbol sichtbar wird. Nach einem Klick auf das Bleistiftsymbol kann das gespeicherte Layout gelöscht oder sein Name geändert werden.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

Um Änderungen an der Auswahl und Anordnung der Tabellenspalten eines gespeicherten Layouts für die Seitenübersicht vorzunehmen, muss es aktiviert, in Auswahl und Anordnung der Spalten bearbeitet und dann noch einmal unter einem anderen Namen gespeichert werden. Wird die alte Version nicht mehr benötigt, kann sie nach einem Klick auf das Bleistiftsymbol neben der entsprechenden Bezeichnung gelöscht werden.

8.1.3 Seiten verwalten

Die Verwaltung der CMS-Seiten befindet sich in Magento 2 unter Content > Elements > Pages. In der Übersichtstabelle lassen sich Seiten für die Bearbeitung heraussuchen und es können die grundlegenden Eigenschaften von Seiten schnell und direkt in der Tabelle bearbeitet werden.

8.1.3.1 Seiten suchen

Für das Auffinden einer bestimmten Seite oder einer Gruppe von Seiten stehen zwei Möglichkeiten zur Verfügung: zum einen das Suchfeld oben links und zum anderen umfangreiche Filtereinstellungen, mit denen die Auswahl der angezeigten Seiten nach bestimmten Kriterien eingeschränkt werden kann.

Um über das Suchfeld per Stichwort eine oder mehrere Seiten herauszusuchen, muss lediglich ein einschlägiges Stichwort eingegeben und mit einem Klick auf das Lupensymbol gesucht werden. Das Suchwort wird danach in der Zeile Active Filters angezeigt und kann – sobald es als Auswahlkriterium für die anzuzeigenden Seiten nicht mehr benötigt wird – durch einen Klick auf das X-Symbol daneben wieder entfernt werden.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

Um eine oder mehrere Seiten mithilfe von Filtern zu finden, müssen nach einem Klick auf den Reiter Filters mit dem Trichtersymbol alle für die jeweilige Anforderung nötigen Felder ausgefüllt werden. Ein Klick auf den Button Apply Filters löst dann die Suche aus.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

Über den gefilterten Seiten erscheint dann die Zeile Active Filters, in der über das jeweilige X-Symbol einzelne Filter wieder entfernt werden können. Ein Klick auf den Link Clear All ganz rechts in der Zeile entfernt sämtliche Filter.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

In der Übersicht über die CMS-Seiten stehen standardmäßig folgende Filter zur Verfügung:

  • ID
    Filterung der Ergebnisse nach IDs der Seiten

  • Created
    Filterung der Seiten nach Erstellungsdatum

  • Modified
    Filterung der Seiten nach dem Datum der letzten Bearbeitung

  • Store View
    Filterung der Seiten nach Zuordnung zu einem bestimmten Store View

  • Title
    Filterung der Seiten nach im Feld Title enthaltener Zeichenkette

  • URL Key
    Filterung der Seiten nach im Feld URL Key enthaltener Zeichenkette

  • Layout
    Filterung der Seiten nach zugewiesenem Layout

  • Status
    Filterung der Seiten nach Status (Enabled/Disabled)

Hinzu kommen gegebenenfalls weitere Filtermöglichkeiten für zusätzlich aktivierte Spalten.

8.1.3.2 Seiten organisieren und aktivieren/deaktivieren

Einige Grundlegende Operationen lassen sich an den Seiten unmittelbar in der Übersichtstabelle unter Content > Elements > Pages durchführen. Nachdem in der linken Spalte die gewünschte Seite oder die gewünschten Seiten per Checkbox ausgewählt wurden, kann über das Drop-down über der Tabelle (Actions) eine der vier zur Verfügung stehenden Aktionen gewählt werden: Löschen (Delete), Deaktivieren (Disable), Aktivieren (Enable) oder Bearbeiten (Edit) – wobei sich Letzteres hier nur auf Änderungen an einigen grundlegenden Werten bezieht.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

Löschen (Delete)

Das Löschen von Seiten entfernt sie aus der Tabelle, so dass sie künftig nicht mehr zur Verfügung stehen.

Deaktivieren (Disable)

Das Deaktivieren von Seiten sorgt dafür, dass sie für die Anzeige im Frontend nicht mehr zur Verfügung stehen, in der Tabelle aber bestehen bleiben. So sind weiterhin Änderungen möglich. Deaktivierte Seiten können jederzeit wieder aktiviert werden.

Aktivieren (Enable)

Das Aktivieren einer Seite bewirkt, dass sie für den Einsatz im Frontend des Shops zur Verfügung steht.

Bearbeiten (Edit)

Einige grundlegende Felder mit Seiteninformationen lassen sich direkt in der Tabelle bearbeiten: Title, URL Key, Layout und Status. Wenn eine einzige Seite verändert werden soll, können die gewünschten Werte nach dem Auswählen der Seite über die Checkbox und der Aktion Edit direkt in der Tabelle bearbeitet und anschließend über den Button Save gespeichert werden:

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

Sollen gleich mehrere Seiten bearbeitet werden, erscheint oberhalb von den zur Veränderung ausgewählten Datensätzen noch eine zusätzliche Zeile, in der Änderungen vorgenommen werden können, die sich auf sämtliche ausgewählte Seiten auswirken. Sie werden mit einem Klick auf den Button Apply angewandt und schließlich über den Button Save Edits oben rechts gespeichert:

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

8.1.4 Eine neue Seite anlegen

Das Anlegen neuer Content-Seiten in Magento 2 ist grundsätzlich sehr einfach. Zusätzlich zu den grundlegenden CMS-Funktionen gibt es noch speziellere Möglichkeiten für die Präsentation von Inhalten auf Seiten-Elementen. Im Rahmen dieser überblicksartigen Darstellung können solche Besonderheiten lediglich erwähnt, aber nicht allesamt Schritt für Schritt erklärt werden.

Das Anlegen einer neuen Seite beginnt mit einem Klick auf den Button Add New Page unter Content > Elements > Pages.

8.1.4.1 Grundlegende Seiteninformationen eingeben

Es öffnet sich eine Eingabemaske mit mehreren aufklappbaren Unterbereichen, in deren Eingabefelder die Seiteninformationen eingegeben werden können.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

Enable Page

Mit dem Schalter Enable Page kann die Seite deaktiviert („No“) oder aktiviert werden („Yes“). Ist sie deaktiviert, kann sie zwar bearbeitet werden, steht aber für die Anzeige im Frontend nicht zur Verfügung. Wenn eine Seite als aktiviert gespeichert wird, ist sie auch live verfügbar.

Seitentitel (Page Title)

In das Feld Page Title wird der Seitentitel eingegeben.

8.1.4.2 Seiteninhalt eingeben

Weiter unten kann mit einem Klick auf Content der Bereich für die Bearbeitung des Seiteninhalts geöffnet werden.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

Überschrift (Content Heading)

In das Feld Content Heading wird die Überschrift der Seite eingegeben.

Seiteninhalt (WYSIWYG oder Code)

Für den Inhalt der Seite steht ein Eingabefeld zur Verfügung, das entweder mithilfe eines WYSIWYG-Editors oder durch die direkte Eingabe von HTML-Code befüllt werden kann. Über den Button Show/Hide Editor kann zwischen den beiden Anzeige- und Eingabemodi gewechselt werden. Mehr Informationen über die Eingabe von Inhalten, insbesondere Links, Bilder, Widgets und Variablen findet sich weiter unten im Abschnitt „Seiten im Editor bearbeiten“.

Wenn der Inhalt fertig eingegeben ist, kann er mit einem Klick auf Save and Continue Edit gespeichert werden.

8.1.4.3 SEO-Metadaten eingeben

Nach einem Klick auf Search Engine Optimization können zusätzliche SEO-Metadaten für die Seite festgelegt werden.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

URL Key

Im Feld URL Key wird festgelegt, wie die genaue Adresse der Seite enden soll. Die Zeichenkette darf nur Kleinbuchstaben (a-z) und Bindestriche anstelle von Leerzeichen oder Interpunktionszeichen enthalten (z. B.: ueber-uns). Die vollständige Adresse der Seite ergibt sich aus der Base-URL und dem angehängten URL-Key (z. B.: http://www.shop-url.de/ueber-uns/).

Meta Title

Im Feld Meta Title kann der Meta-Title der Seite eingegeben werden. Dieser erscheint später in der Titelleiste und im Tab-Reiter des Browsers sowie als Überschrift des Suchergebnisses für die Seite in den Suchmaschinen. Hierbei sind die aktuellen Empfehlungen im Hinblick auf SEO (Suchmaschinenoptimierung) zu beachten.

Im Feld Meta Keywords können Stichworte mit Bezug zur jeweiligen Seite eingegeben werden. Eine mittlerweile veraltete und zu vernachlässigende SEO-Maßnahme.

Meta Description

Im Feld Meta Description sollte eine kurze Beschreibung der Seite eingegeben werden. Hierbei sind die aktuellen Empfehlungen im Hinblick auf SEO (Suchmaschinenoptimierung) zu beachten.

Wenn die Metadaten fertig konfiguriert sind, können sie mit einem Klick auf Save and Continue Edit gespeichert werden.

8.1.4.4 Website Einstellungen

Nach dem Aufklappen von Page in Websites lässt sich bestimmen, für welche Websites, Stores und Store Views die Seite zur Verfügung stehen soll.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

Store View

Aus der Auflistung der zur Verfügung stehenden Store Views können diejenigen Views ausgewählt werden, in denen die Seite verfügbar sein soll. Das ist insbesondere für mehrsprachige Shops ein wichtiges Instrument.

Wenn alle Seiteninformationen fertig eingegeben sind, kann über den Link Save and Continue Edit gespeichert und mit den Bearbeiten der Seite fortgefahren werden.

8.1.4.5 Designeinstellungen

Im Bereich Design kann das Layout der Seite festgelegt werden.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

Layout

Über das Auswahlfeld Layout kann eines der vorbereiteten Layouts gewählt und damit der Seite zugewiesen werden. Standardmäßig stehen in Magento 2 fünf verschiedene Seitenlayouts zur Verfügung, was sich aber je nach Theme und Konfiguration ändern kann.

  • einspaltig (1 column)

  • zweispaltig mit Sidebar links (2 columns with left bar)

  • zweispaltig mit Sidebar rechts (2 columns with right bar)

  • dreispaltig (3 columns)

  • leer (Empty)

Layout Anpassung per XML (Layout Update XML)

Im Feld Layout Update XML können nachträgliche Änderungen an dem zuvor ausgewählten Layout vorgenommen werden, die sich dann allerdings ausschließlich auf die Seite auswirken, die gerade bearbeitet wird. Hierfür sind XML-Kenntnisse erforderlich.

8.1.4.6 Einstellungen für abweichendes Design

Der Abschnitt Custom Design Update dient dazu, eine Seite für einen bestimmten Zeitraum mit einem anderen Theme, in einem anderen Layout oder mit zusätzlichen Elementen anzeigen zu lassen. Diese Funktion ist zum Beispiel für Preisaktionen oder für saisonale Änderungen am Design sinnvoll.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

Abweichendes Design ab (From)

In das Feld From wird das Startdatum für die gewünschte temporäre Designänderung eingetragen.

Abweichendes Design bis (To)

In das Feld To wird das Enddatum für die gewünschte temporäre Designänderung eingetragen.

Abweichendes Theme (Custom Theme)

Die Auswahlliste Custom Theme ermöglicht das Festlegen eines abweichenden Themes für den zuvor definierten Zeitraum.

Abweichendes Layout (Custom Layout)

Die Auswahlliste Custom Layout ermöglicht das Festlegen eines abweichenden Layouts für den zuvor definierten Zeitraum.

Wenn das Design fertig konfiguriert ist, kann es mit einem Klick auf Save and Continue Edit gespeichert werden.

Und wenn die gesamte Seite fertig bearbeitet ist, kann sie über den Button Save Page abschließend gespeichert werden. Wenn der Seitenstatus auf Enabled steht, kann die Seite ab sofort in die Shop-Navigation aufgenommen werden, aus dem Inhalt anderer Seiten, aus dem Footer oder anderen Layout-Elementen verlinkt oder auch als neue Startseite verwendet werden.

8.1.5 Eine neue Startseite festlegen

Wenn eine selbst angelegte Seite als Startseite angezeigt werden soll, kann diese Einstellung unter Stores > Settings > Configuration > General > Web im Bereich Default Pages vorgenommen werden, indem im Feld CMS Homepage die gewünschte Seite ausgewählt und die Änderung über den Button Save Config gespeichert wird.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

Danach muss nur noch der Link zum Cache Management in der oben erscheinenden Meldung angeklickt und dann der veraltete Cache geleert werden.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

8.1.6 Seiten im Editor bearbeiten

Für das Bearbeiten von Seiteninhalten steht in Magento 2 ein voll ausgestatteter WYSIWYG-Editor zur Verfügung, mit dessen Hilfe Text und multimediale Inhalte ähnlich wie in einem Textverarbeitungsprogramm bearbeitet werden können. Mit dem Button Show/Hide Editor kann zwischen der grafischen Version und der Code-Ansicht hin- und hergeschaltet werden:

Ansicht im WYSIWYG-Editor

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

Code-Ansicht

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

Grundsätzlich ist es zu empfehlen, nach Möglichkeit unmittelbar mit dem HTML-Code zu arbeiten, da mit dieser Methode die formale Qualität des Quelltextes besser gewährleistet werden kann. Zudem können Fehler in der Formatierung leichter beseitigt werden.

Im Folgenden wird kurz auf einige grundlegende Arbeitsschritte eingegangen, die im Alltag eines Shopbetreibers sehr häufig vorkommen. Die Anleitungen richten sich dabei explizit an Magento 2 Nutzer ohne erweiterte HTML-Kenntnisse.

8.1.6.1 Einen Link einfügen

Das Einfügen eines Links mithilfe des Editors ist sehr einfach:

  1. Der Text, der mit einem Link versehen werden soll (oder ein Bild) muss markiert sein. Dann wird über den Link-Button das Dialogfeld zur Link-Erstellung geöffnet.

    Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

  2. Im Feld Link URL kann entweder der URL Key einer Seite im Shop oder die vollständige URL einer externen Seite eingegeben werden.

  3. Im Feld Target muss eine der beiden Optionen „Open link in the same window“ (Ziel des Links im selben Fenster öffnen) beziehungsweise „Open in a new window“ (Ziel des Links in neuem Fenster/Tab öffnen).

  4. In das Feld Title wird der Tooltip-Text eingetragen, der erscheinen soll, wenn jemand mit dem Mauszeiger über den Link fährt.

  5. Mit einem Klick auf Insert wird der Link an der markierten Stelle des Seiteninhalts erzeugt.

  6. Mit einem Klick auf den Button Save Page speichern.

8.1.6.2 Ein Bild einfügen

Ein Bild kann entweder aus dem Medienspeicher der Magento Installation oder aus einer externen Quelle eingebunden werden. Beide Methoden werden hier knapp erläutert:

A: Ein Bild aus der Medienspeicher (Media Storage) einfügen:

  1. Wenn nötig, über den Button Show/Hide Editor in die Code-Ansicht wechseln.

  2. Den Cursor an der Stelle positionieren, an der das Bild als HTML-Tag eingefügt werden soll und den Button Insert Image betätigen. Wenn das Bild noch nicht im Medienspeicher von Magento vorliegt, kann es folgendermaßen hochgeladen werden:

    1. Im Verzeichnisbaum auf der linken Seite in den Ordner navigieren, in dem die Bilder gespeichert werden. Wenn nötig, über den Button Create Folder… das benötigte Verzeichnis neu anlegen.

    2. Über Browse Files den Dialog für die Auswahl der Bilder, die hochgeladen werden sollen, öffnen. Das oder die Bilder auswählen und in die Magento Media Storage hochladen.

  3. Das gewünschte Bild in dem geöffneten Dialogfenster auswählen und oben rechts auf den Button Insert File klicken.

    Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

  4. Um das Bild (und die weiteren Inhalte der Seite) im WYSIWYG-Modus zu sehen, den Button Show/Hide Editor betätigen.

  5. Mit einem Klick auf den Button Save Page speichern.

B: Ein Bild von einem anderen Server einfügen:

Wenn ein Bild, das auf einem anderen Server und nicht auf dem lokalen Rechner gespeichert ist, in eine Magento CMS Seite eingefügt werden soll, gestaltet sich der Ablauf etwas anders.

  1. Wenn nötig, über den Button Show/Hide Editor in den WYSIWYG-Modus wechseln.

  2. Den Cursor an der Stelle positionieren, an der das Bild eingefügt werden soll.

  3. In der Toolbar des Editors auf den Button zum Einfügen von Bildern klicken und in dem sich öffnenden Dialogfeld URL, Kurzbeschreibung (Description) sowie Titel des Bildes eingeben und auf Insert klicken, um den Prozess abzuschließen.

    Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

  4. Mit einem Klick auf den Button Save Page speichern.

8.1.6.3 Einen Widget einfügen

Widgets sind ein nützliches Instrument, um bestimmte Inhaltselemente auf einer oder mehrerer Seiten zu platzieren. Mithilfe von Widgets lassen sich sehr unkompliziert Inhalte wie CMS-Seiten, Kategorien und Produkte verlinken.

Standardmäßig greifen die Links auf die Stylevorgaben des Themes zurück.

Um einen Widget in eine Seite einzufügen, sind folgende Schritte nötig:

  1. Falls erforderlich, über den Button Show/Hide Editor in die Code-Ansicht wechseln.

  2. Den Cursor an der Stelle platzieren, an der der Widget untergebracht werden soll und den Button Insert Widget betätigen.

  3. Den Widget-Typ auswählen.

    Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

    CMS Page Link
    Link zu einer CMS-Seite

    CMS Static Block
    Inhalte eines statischen Blocks

    Catalog Category Link
    Link zu einer bestimmten Kategorie

    Catalog New Products List
    Auflistung von Produkten, die als „neu“ definiert sind‘

    Catalog Product Link
    Link zu einem bestimmten Produkt

    Catalog Products List
    Liste von individuell gefilterten Produkten

    Orders and Returns
    Suchformular für Bestellungen und Rücksendungen

    Recently Compared Products
    Liste der zuletzt verglichenen Produkte, die wieder von der Vergleichsliste des Besuchers entfernt wurden

    Recently Viewed Products
    Liste der zuletzt angesehenen Produkte des Besuchers

  4. Je nach Widget-Typ müssen nun noch einige Formularfelder ausgefüllt werden, über die genauer bestimmt werden kann, welche Inhalte in welcher Form dargestellt werden sollen. Über den Button Insert Widget wird der Widget dann in die Seite eingefügt.

  5. Um den Widget als Platzhalter (und die weiteren Inhalte der Seite) im WYSIWYG-Modus zu sehen, den Button Show/Hide Editor betätigen.

  6. Mit einem Klick auf den Button Save Page speichern.

8.1.6.4 Eine Variable einfügen

Über Variablen lassen sich zahlreiche vordefinierte (und bei Bedarf auch selbst angelegte) Elemente in Seiteninhalte einfügen, ohne diese hartcodiert zu hinterlegen. Damit werden zentral durchgeführte Änderungen an diesen Werten (etwa die Shop-URL oder eine Kontaktadresse) über die Variablen automatisch in den entsprechenden Seiteninhalten berücksichtigt und müssen später nicht von Hand geändert werden. Es ist daher unbedingt zu empfehlen, in CMS-Seiten von Beginn an konsequent überall dort mit Variablen zu arbeiten, wo es möglich ist.

  1. Falls erforderlich, über den Button Show/Hide Editor in die Code-Ansicht wechseln.

  2. Den Cursor an der Stelle platzieren, an der die Variable eingefügt werden soll und den Button Insert Variable betätigen.

  3. Aus der Liste verfügbarer Variablen per Klick die gewünschte wählen.

    Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

    Base Unsecure URL
    Unsichere Basis-URL des Shops (HTTP)

    Base Secure URL
    Sichere Basis-URL des Shops (HTTPS)

    General Contact Name
    Allgemeiner Ansprechpartner

    General Contact Email
    Allgemeine Ansprechpartner E-Mail

    Sales Representative Contact Name
    Ansprechpartner Vertrieb

    Sales Representative Contact Email
    Ansprechpartner Vertrieb E-Mail

    Custom1 Contact Name
    Eigener Ansprechpartner 1

    Custom1 Contact Email
    Eigener Ansprechpartner 1 E-Mail

    Custom2 Contact Name
    Eigener Ansprechpartner 2

    Custom2 Contact Email
    Eigener Ansprechpartner 2 E-Mail

    Store Name
    Shop Name

    Store Phone Number
    Shop Telefonnummer

    Store Hours
    Öffnungszeiten

    Country
    Land

    Region/State
    Bundesland

    Zip/Postal Code
    Postleitzahl

    City
    Stadt

    Street Address 1
    Anschrift 1

    Street Address 2
    Anschrift 2

    Shop Name
    Name des Shops

    Company First
    Firmenname (erster Teil)

    Company Second
    Firmenname zweiter Teil

    Street
    Straße

    Zip
    Postleitzahl

    City
    Stadt

    Default Country
    Standard-Land

    Telephone
    Telefonnummer

    Supplementary Information for Telephone
    Zusätzliche Informationen zur Telefonnummer

    Fax
    Faxnummer

    Email
    E-Mail-Adresse

    Website
    URL der Website

    Tax number
    Steuernummer

    VAT-ID
    Umsatzsteuer-Identifikationsnummer

    Register Court
    Gerichtsstand

    Financial Office
    Finanzamt

    CEO
    Geschäftsführung

    Owner
    Inhaber

    Responsible for content
    Verantwortlich für den Inhalt (Person)

    Responsible for content address
    Verantwortlich für den Inhalt (Adresse)

    Responsible in the interests of the press law
    Verantwortlich im Sinne des Presserechts (V.i.S.d.P.)

    Register Number
    Handelsregisternummer

    Reference for business rules (physician, …)
    Reference for business rules

    Authority (ECG)
    Zuständige Aufsichtsbehörde (nach österreichischem E-Commerce-Gesetz – ECG)

    Shareholdings
    Beteiligungen

    Editorial Concept
    Blattlinie (für Onlineshops in Österreich)

    Account owner
    Kontoinhaber

    Account
    Kontonummer

    Bank number
    Bankleitzahl (BLZ)

    Bank name
    Name der Bank

    BIC/Swift-Code
    BIC/Swift-Code

    IBAN
    IBAN

    Clearing
    Clearing

  4. Mit einem Klick auf den Button Save Page speichern.

8.2 Block-Elemente in Magento 2

Ein statischer Block oder CMS-Block ist ein modulares Inhaltselement, mit dessen Hilfe sich in Magento 2 Inhalte (Texte, Bilder, eingebettete Videos sowie dynamische Informationen aus Widgets) in Seiten positionieren lassen. Blöcke ermöglichen die unkomplizierte Organisation von Inhalten, die an unterschiedlichen Stellen neben- oder übereinander angezeigt werden sollen.

Ein wichtiger Vorteil von Block-Elementen ist, dass Änderungen an einem Block sich zugleich überall dort auswirken, wo er eingebunden worden ist. Blöcke können in CMS-Seiten verwendet oder durch Layout-Änderungen im XML-Code definiert und positioniert werden.

8.2.1 Einen neuen Block anlegen

Ein statischer Block kann zu einer oder mehreren CMS-Seiten oder auch zu einem anderen Block hinzugefügt werden. Zum Beispiel lässt sich der Code für einen Slider mit Bildern in einem Block ablegen und dann als solcher auf der Startseite einbinden. Die Arbeitsumgebung für CMS-Blöcke ähnelt grundsätzlich derjenigen für CMS-Seiten.

Für das Anlegen eines Blocks müssen unter Content > Elements > Blocks nach einem Klick auf den Button Add New Block die folgenden Schritte ausgeführt werden:

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

  1. Bei Bedarf den Block über den Schalter Enable Block deaktivieren („No“), um ihn gegebenenfalls zu einem späteren Zeitpunkt wieder zu aktivieren („Yes“).
  2. Unter Block Title einen Block-Titel für die interne Verwendung festlegen.

  3. Unter Identifier einen einmaligen Identifikator für den Block festlegen, wobei nur Kleinbuchstaben (a-z) und Unterstriche anstelle von Leerzeichen erlaubt sind.

  4. Unter Store View den oder die Store Views auswählen, in dem oder in denen der Block verfügbar sein soll.

  5. In das Eingabefeld im unteren Bereich den Inhalt des Blocks eingeben (Text, Links, Tabellen, Bilder, Video und Audio). Mit dem Button Show/Hide Editor kann zwischen Code-Ansicht und WYSIWYG-Editor hin und her gewechselt werden.

  6. Schließlich kann mit einem Klick auf den Button Save Block gespeichert werden.

8.2.2 Einen Block positionieren

Für das Positionieren werden hier zwei Möglichkeiten erklärt. Die erste verwendet Widgets, die zweite funktioniert über das Anpassen von XML-Layouts.

8.2.2.1 Einen Block mithilfe von Widgets positionieren

Um einen statischen Block in einer Seite oder einem Bereich von Seiten mithilfe von Widgets zu positionieren, müssen die folgenden Schritte ausgeführt werden:

  1. Unter Content > Elements > Widgets oben rechts auf den Button Add Widget klicken.

Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

  1. Als Typ „CMS Static Block“ wählen und auf Continue klicken.

  2. Sicherstellen, dass das aktuelle Theme unter Design Theme ausgewählt ist und auf Continue klicken.

  3. Im Bereich Storefront Properties einen Widget-Titel für die interne Verwendung vergeben.

  4. Den oder die Store Views auswählen, in denen der Widget verfügbar sein soll.

  5. Im Feld Sort Order einen Wert für die Anordnung unter anderen, möglicherweise im selben Bereich erscheinenden Inhaltselementen vergeben, wobei der obersten Position der Wert „0“ entspricht.

  6. Im Bereich Layout Updates auf Add Layout Update klicken und die Seiten auswählen, auf denen der Widget mit dem statischen Block erscheinen soll. Er kann auf allen oder bestimmten Kategorie-, Produkt- oder CMS-Seiten angezeigt werden. Soll eine Kombination der zur Verfügung stehenden Möglichkeiten eingestellt werden, kann wiederholt auf Add Layout Update geklickt werden, um zusätzliche Auswahlbereiche zu öffnen.

  7. Im Feld Container (jeweils) festlegen, an welcher Stelle im Seitenlayout der Block auf den definierten Seiten angezeigt werden soll. Dabei stehen die folgenden Möglichkeiten zur Auswahl:

Kategorie- und CMS-Seiten

Breadcrumbs
Die Navigationshilfe oben auf den meisten Seiten, die die aktuelle Position im Seitenbaum als Link anzeigt. Zusätzliche Inhalte im Breadcrumb-Bereich werden rechtsbündig angezeigt.

Left Column
Inhalt wird der linken Spalte hinzugefügt.

Main Content Area
Inhalt wird dem Haupt-Inhaltsbereich hinzugefügt.

My Cart Extra Actions
Inhalt erscheint unter der Warenkorbzwischensumme.

Navigation Bar
Inhalt erscheint unterhalb der Hauptnavigationsleiste.

Page Bottom
Inhalt erscheint am Ende der Seite.

Page Footer
Inhalt erscheint oberhalb des Footers der Seite.

Page Header
Inhalt erscheint unterhalb des Headers der Seite.

Page Top
Inhalt erscheint am Anfang der Seite.

Right Column
Inhalt wird der rechten Spalte hinzugefügt.

Store Language
Inhalt erscheint in der linken oberen Ecke des Headers.

Produktseiten

Alert URLs
Inhalt erscheint unterhalb des Produkttitels auf der Produktdetailseite.

Bottom Block Options Wrapper
Inhalt erscheint unterhalb des „In den Warenkorb“-Buttons

Breadcrumbs
Die Navigationshilfe oben auf den meisten Seiten, die die aktuelle Position im Seitenbaum als Link anzeigt. Zusätzliche Inhalte im Breadcrumb-Bereich werden rechtsbündig angezeigt.

Info Column Options Wrapper
Inhalt wird im rechten Bereich angezeigt.

Left Column
Inhalt wird der linken Spalte hinzugefügt (unter den anderen Blöcken).

Main Content Area
Inhalt wird unterhalb des Haupt-Inhaltsbereichs hinzugefügt.

My Cart Extra Actions
Inhalt erscheint unter der Warenkorbzwischensumme.

Navigation Bar
Inhalt erscheint unterhalb der Hauptnavigationsleiste.

Page Bottom
Inhalt erscheint am Ende der Seite.

Page Footer
Inhalt erscheint oberhalb des Footers der Seite.

Page Header
Inhalt erscheint unterhalb des Headers der Seite.

Page Top
Inhalt erscheint am Anfang der Seite.

PayPal Express Checkout (Payflow Edition) Shortcut Wrapper
Wenn diese PayPal Bezahlmethode aktiviert ist, erscheint der Inhalt unterhalb des PayPal Kaufen-Buttons.

PayPal Express Checkout Shortcut Wrapper
Wenn diese PayPal Bezahlmethode aktiviert ist, erscheint der Inhalt unterhalb des PayPal Kaufen-Buttons.

Product Tags List
Inhalt erscheint unter der Leiste mit Produkt-Schlagwörtern.

Product View Extra Hint
Inhalt erscheint unter dem Preis des Produkts.

Right Column
Inhalt wird der rechten Spalte hinzugefügt (unter den anderen Blöcken).

Store Language
Inhalt erscheint rechts von der Sprachauswahl.

Tags List Before
Inhalt erscheint über dem „Add Your Tags“-Feld.

Dann oben rechts auf den Button Save klicken und auf der linken Seite in den Bereich Widget Options wechseln.

  1. Auf Select Block… klicken und den gewünschten Block aus der Liste wählen.

  2. Schließlich kann mit einem weiteren Klick auf den Button Save gespeichert werden.

  3. Falls im oberen Bildschirmbereich eine entsprechende Aufforderung erscheint, Index und Seiten-Cache leeren.

  4. In der Shopoberfläche kann nun durch das Aufrufen einer der für die Anzeige des Widgets mit dem Block ausgewählten Seiten die korrekte Positionierung überprüft werden. Sollte noch Verbesserungsbedarf bestehen, kann der Widget wieder zur Bearbeitung geöffnet werden.

8.2.2.1.1 Beispiel: Ein Social Plugin hinzufügen

Ein mögliches Szenario für die Verwendung eines statischen Blocks in einem Magento 2 Shops ist das Einbinden eines Social Plugins. Am Beispiel von Facebook soll hier knapp erläutert werden, wie die Integration mithilfe eines CMS-Blocks funktioniert:

  1. Den Button-Code besorgen

    1. Auf der Facebook Website auf die Button-Setup-Seite gehen.

    2. Im URL-Feld die URL derjenigen Seite im Shop eingeben, die Facebook Mitglieder liken oer empfehlen können sollen – beispielsweise die Startseite des Shops.

    3. Button-Layout wählen.

    4. Die Breite in Pixeln für Button und Textmeldungen festlegen.

    5. Als Handlungstyp entweder „like“ („Gefällt mir“) oder „recommend“ („Empfehlen“) auswählen.

      Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

    6. Mit einem Klick auf Code generieren den generierten Code in die Zwischenablage kopieren.

  2. Einen Content-Block erstellen

    1. Unter Content > Elements > Blocks auf den Button Add New Block klicken.

    2. Den Schalter Enable Block auf „Yes“ stellen.

    3. Als Block-Titel zum Beispiel „Facebook Like Button“ eingeben.

    4. Einen einmaligen Identifikator für den Block festlegen, für den nur Kleinbuchstaben (a-z) und Unterstriche anstelle von Leerzeichen verwendet

    5. Wenn die Magento 2 Installation mehrere Stores oder Store Views beinhaltet, müssen darunter diejenigen ausgewählt werden, in denen der Block verfügbar sein soll.

    6. Den von der Facebook Website kopierten Code-Schnipsel in die Content-Box einfügen.

    7. Schließlich kann mit einem Klick auf den Button Save Block gespeichert werden.

  3. Den Block in der Shopoberfläche platzieren

    1. Unter Content > Elements > Widgets oben rechts auf den Button Add Widget klicken.

    2. Als Typ „CMS Static Block“ wählen und auf Continue klicken.

    3. Sicherstellen, dass das aktuelle Theme unter Design Theme ausgewählt ist und auf Continue klicken.

    4. Im Bereich Storefront Properties einen Widget-Titel für die interne Verwendung vergeben.

    5. Den oder die Store Views auswählen, in denen der Widget verfügbar sein soll.

    6. Im Feld Sort Order einen Wert für die Anordnung unter anderen, möglicherweise im selben Bereich erscheinenden Inhaltselementen vergeben, wobei der obersten Position der Wert „0“ entspricht.

    7. Im Bereich Layout Updates auf Add Layout Update klicken und die Seiten auswählen, auf denen der Widget mit dem statischen Block erscheinen soll. Er kann auf allen oder bestimmten Kategorie-, Produkt- oder CMS-Seiten angezeigt werden. Soll eine Kombination der zur Verfügung stehenden Möglichkeiten eingestellt werden, kann wiederholt auf Add Layout Update geklickt werden, um zusätzliche Auswahlbereiche zu öffnen.

    8. Im Feld Container (jeweils) festlegen, an welcher Stelle im Seitenlayout der Block auf den definierten Seiten angezeigt werden soll. Dabei stehen die oben aufgeführten Möglichkeiten zur Auswahl.

    9. Dann oben rechts auf den Button Save klicken und auf der linken Seite in den Bereich Widget Options wechseln.

    10. Auf Select Block klicken und den gewünschten Block aus der Liste wählen.

    11. Schließlich kann mit einem weiteren Klick auf den Button Save gespeichert werden.

    12. Falls im oberen Bildschirmbereich eine entsprechende Aufforderung erscheint, Index und Seiten-Cache leeren.

  4. Die Anzeige im Shop überprüfen
    In der Shopoberfläche kann nun durch das Aufrufen einer der für die Anzeige des Widgets mit dem Block ausgewählten Seiten die korrekte Positionierung überprüft werden. Sollte noch Verbesserungsbedarf bestehen, kann der Widget wieder zur Bearbeitung geöffnet werden.

8.2.2.1.2 Beispiel: Eine Lightbox oder einen Slider hinzufügen

Um in Magento 2 eine Lightbox oder einen Slider in eine oder mehrere Seiten des Shops einfügen zu können, muss zunächst eine der zahlreichen auf jQuery basierenden und über Magento Connect verfügbaren Erweiterungen installiert werden. Nach der Integration der Extension muss der entsprechende Code entsprechend den Anweisungen des Entwicklers mithilfe eines statischen Blocks in die Shopoberfläche eingebunden werden.

8.2.2.2 Blöcke mithilfe von XML-Layouts positionieren

In der rechten oder linken Sidebar einer bestimmten Seite (mit 2- oder 3-spaltigem Layout) können statische Blöcke auch mithilfe von XML-Layouts positioniert werden. Mit einigen einfachen Änderungen am Code kann der Block in einer der Sidebars untergebracht und im Verhältnis zu anderen Blöcken angeordnet werden.

Um einen statischen Block in einer Seite per XML-Layout zu positionieren müssen folgende Schritte ausgeführt werden:

  1. Unter Content > Elements > Blocks muss in der Auflistung der zur Verfügung stehenden Blöcke der Identifikator des Blocks, der positioniert werden soll, herausgesucht werden – dabei ist auf die exakte Schreibweise zu achten.

  2. Unter Content > Elements > Pages muss dann die Seite, in die der Block eingefügt werden soll, im Bearbeitungsmodus geöffnet werden.

  3. Den Bereich Design aufklappen und in das Eingabefeld Layout Update XML den Code für die rechte oder linke Sidebar einfügen:

    <reference name="right">
      <block type="cms/block" name="right.permanent.callout">
        <action method="setBlockId"><block_id>your-block-id</block_id></action>
      </block>
    </reference>

    Dabei kann über den Referenz-Namen in der ersten Zeile bestimmt werden, in welcher Sidebar der Block erscheinen soll („right“ oder „left“).

  4. Anstelle von „your_block_id“ muss der Identifikator des Blocks, der positioniert werden soll, eingetragen werden.

  5. Mit einem Klick auf den Button Save Page oben rechts kann die bearbeitete Seite gespeichert werden.

8.3 Widget-Elemente in Magento 2

Ein Widget ist ein Codeschnipsel, der es ermöglicht, ganz unterschiedliche Inhalte an bestimmten Stellen im Shop anzeigen zu lassen. Viele davon zeigen in Echtzeit dynamische Daten an und schaffen Möglichkeiten für die Besucher, mit dem Shop zu interagieren.

Widgets können eingesetzt werden, um Landingpages für Marketing-Kampagnen zu erstellen oder um an bestimmten Stellen im Shop Content zu Promotion-Zwecken zu platzieren. Weitere Möglichkeiten für die Verwendung von Widgets als interaktive Elemente und Action-Blöcke sind Bewertungssysteme, Video-Chats, Umfragen, Abo-Formulare, Tag-Clouds und Image-Slider.

8.3.1 Arten von Widgets

In Magento 2 stehen zahlreiche Arten von Widgets zur Verfügung. Hier eine knappe Übersicht der unterschiedlichen Widget-Typen:

CMS Page Link

Zeigt einen Link zu einer bestimmten CMS-Seite an. Erlaubt es, den Linktext und -Titel anzupassen. Der Link kann in Content-Seiten und Blöcken verwendet werden.

CMS Static Block

Zeigt einen Block mit statischem Inhalt an einer bestimmten Stelle einer Seite an.

Catalog Category Link

Zeigt einen Link zu einer bestimmten Kategorie des Katalogs an (als Inline- oder Block- Element). Der Link kann in Content-Seiten und Blöcken verwendet werden.

Catalog New Products List

Zeigt einen Block mit für eine bestimmte Dauer als „neu“ gekennzeichneten Produkten an.

Catalog Product Link

Zeigt einen Link zu einem bestimmten Produkt an (als Inline- oder Block- Element). Der Link kann in Content-Seiten und Blöcken verwendet werden.

Catalog Products List

Zeigt eine Liste von Produkten aus dem Katalog an.

Orders and Returns

Gibt Kunden die Möglichkeit, sich per Formulareingabe ihre Bestellungen und Rücksendungen anzeigen zu lassen.

Recently Compared Products

Zeigt einen Block mit den zuletzt verglichenen Produkten an. Die Zahl der anzuzeigenden Produkte kann festgelegt und entweder das Listen- oder das Grid-Layout gewählt werden.

Recently Viewed Products

Zeigt einen Block mit den kürzlich angesehenen Produkten an. Die Zahl der anzuzeigenden Produkte kann festgelegt und entweder das Listen- oder das Grid-Layout gewählt werden.

8.3.2 Einen neuen Widget anlegen

Der Ablauf beim Erstellen eines Widgets ist für die unterschiedlichen Typen nahezu identisch.

  1. Unter Content > Elements > Widgets werden nach einem Klick auf den Button Add Widget zunächst der Typ und das aktuelle Theme ausgewählt. Mit einem Klick auf den Button Continue geht es weiter.

  2. Im Bereicht Storefront Properties wird ein beschreibender Widget-Titel für die interne Verwendung vergeben, es wird festgelegt, in welchem oder in welchen Storeviews der Widget angezeigt werden soll und es kann eine Zahl im Sort Order Feld eingegeben werden, die bestimmt, wo der Block im Verhältnis zu möglicherweise im selben Bereich angezeigten Elementen erscheinen soll. Die oberste Position wird durch den Wert „0“ angegeben.

    Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

  3. Im Bereich Layout Update kann nach einem Klick auf den Button Add Layout Update im Feld Display On festgelegt werden, auf welchem Seitentyp der Widget angezeigt werden soll, während das Feld Container dazu dient, den genauen Ort für die Anzeige zu bestimmen. Für einige Typen von Widgets steht zudem das Feld Template bereit, in dem bestimmt werden kann, ob ein Inline- oder ein Block-Element angezeigt werden soll. Soll eine Kombination der zur Verfügung stehenden Möglichkeiten für die Anzeige des Widgets im Frontend eingestellt werden, kann wiederholt auf Add Layout Update geklickt werden, um zusätzliche Auswahlbereiche zu öffnen.

  4. Über die Navigation links oben kann der Bereich Widget Options geöffnet werden.

    Magento 2 Handbuch – 8. Kapitel: Wie funktionieren die CMS-Elemente in Magento 2?

    Hier werden – je nach gewähltem Widget-Typ – weitere Optionen festgelegt. Nach einem Klick auf Select Block beziehungsweise Select Page kann ein Block oder eine CMS-Seite für die Anzeige des Widgets bestimmt werden. Wo ein Feld Title zur Verfügung steht, kann der Text eingegeben werden, der als Überschrift des Widgets im Frontend angezeigt werden soll. Soll eine Paginierung (etwa bei Produktlistings) zur Verfügung gestellt werden, muss die Option Display Page Control auf „Yes“ gestellt werden. Weitere Einstellmöglichkeiten können die Zahl der anzuzeigenden Produkte, die Cache-Lebensdauer sowie Bedingungen für die Auswahl der Produkte (Farben, Preisbereiche und anderes) sein.

  5. Schließlich kann der neu konfigurierte Widget mit einem Klick auf den Button Save oben rechts gespeichert werden.

  6. Wenn nötig, muss zudem über den Link in der entsprechenden Einblendung oben im Admin-Panel der betroffene Cache geleert werden.

  7. Nun kann im Frontend überprüft werden, ob der Widget angezeigt wird, wie gewünscht. Falls nicht, kann er unter Content > Elements > Widgets wieder für die Bearbeitung geöffnet und entsprechend verändert werden.

 7. Kapitel: Kundenverwaltung9. Kapitel: Preisregeln 

Magento 2 jetzt live testen!

In unserem Live-Demoshop können Sie Magento 2 sofort und kostenlos testen!

Das Magento 2 Handbuch als Paperback

Wer das Magento 2 Handbuch als Paperback haben möchte, kann es über diesen Link bei Amazon bestellen:

Magento 2 Handbuch. Paperback, 468 Seiten (ISBN 978-3741228155)

Unser deutsches Sprachpaket für Magento 2

Und wer Magento 2 mit deutschsprachigem Backend und Frontend betreiben möchte, findet unser deutsches Sprachpaket für Magento 2 auf GitHub.

Magento 2 mit deutschem Sprachpaket selbst installieren

In einer leicht nachvollziehbaren Installationsanleitung erklären wir, wie man Magento 2 mitsamt deutschem Sprachpaket auf einem Server installiert.