Layout-Aktualisierungen
Bevor Sie mit benutzerdefinierten Layout-Aktualisierungen beginnen, müssen Sie wissen, wie die Seiten Ihres Stores aufgebaut sind und wie sich die Begriffe Layout und Layout-Aktualisierung unterscheiden. Layout bezieht sich auf die visuelle und strukturelle Komposition der Seite. Layout-Aktualisierungen beziehen sich auf einen bestimmten Satz von XML-Anweisungen, die die Erstellung der Seite überschreiben oder anpassen können.
Das XML-Layout Ihres Commerce ist eine hierarchische Struktur von Containern und Blöcken. Einige Elemente erscheinen auf jeder Seite, andere nur auf bestimmten Seiten. Weitere Informationen zu Layout, Containern und Blöcken finden Sie unter Layouts - Übersicht im Frontend-Entwicklerhandbuch.
Das Widget-Tool bietet eine einfache Möglichkeit, einen vorhandenen Inhaltsbaustein zum Standard-Layout einer Seite hinzuzufügen. Für komplexere Aktualisierungen müssen Sie den XML-Layout-Aktualisierungs-Code auf dem Server speichern und dann die Datei vom Administrator als benutzerdefiniertes Layout-Update referenzieren. Einen Überblick über den Prozess finden Sie unter Verwenden von Layout-Aktualisierungen.
Im folgenden Diagramm sind die Namen, die auf Container verweisen, schwarz und die Blocktypen bzw. Blockklassenpfade blau.
page/htmlroot und ist einer der wenigen Stammblöcke im Layout. Sie können auch einen eigenen Block erstellen und ihn root benennen, was der Standardname für Blöcke dieses Typs ist. Pro Seite kann es nur einen Block dieses Typs geben.page/html_headhead und ein untergeordnetes Element des Stammblocks. Von diesem Typ kann pro Seite nur ein Block vorhanden sein, der nicht entfernt werden darf.page/html_noticesglobal_notices und ein untergeordnetes Element des Stammblocks. Wenn dieser Block aus dem Layout entfernt wurde, werden die globalen Hinweise nicht auf der Seite angezeigt. Pro Seite kann es nur einen Block dieses Typs geben.page/html_headerheader und ein untergeordnetes Element des Stammblocks. Dieser Block entspricht der visuellen Kopfzeile am oberen Seitenrand und enthält mehrere Standardblöcke. Von diesem Typ kann pro Seite nur ein Block vorhanden sein, der nicht entfernt werden darf.page/html_wrapperpage/html_breadcrumbsbreadcrumbs und ist ein untergeordnetes Element des -Header-Blocks. Dieser Block zeigt Breadcrumbs für die aktuelle Seite an. Pro Seite kann es nur einen Block dieses Typs geben.page/html_footerfooter und ein untergeordnetes Element des Stammblocks. Der Fußzeilenblock entspricht dem visuellen Fußzeilenblock unten auf der Seite und enthält mehrere Standardblöcke. Von diesem Typ kann pro Seite nur ein Block vorhanden sein, der nicht entfernt werden darf.page/template_linkstop.links Block ist ein untergeordnetes Element des Kopfzeilenblocks und entspricht dem Navigationsmenü oben. Der footer_links Block ist ein untergeordnetes Element des Fußzeilenblocks und entspricht dem Navigationsmenü unten._Hinweis _ Es ist möglich, die Vorlagenverknüpfungen zu bearbeiten, wie in den Beispielen gezeigt.
page/switchstore_language Block ist ein untergeordnetes Element des Kopfzeilenblocks und entspricht dem oberen Sprachumschalter. Der store_switcher Block ist ein untergeordnetes Element des Fußzeilenblocks und entspricht dem Shopumschalter unten.global_messages zeigt globale Nachrichten an. Der messages wird verwendet, um alle anderen Nachrichten anzuzeigen. Wenn Sie diese Blöcke entfernen, werden dem Kunden keine Nachrichten angezeigt.core/text_listcore/profilerPlatzieren eines Blocks mithilfe von Layout-Aktualisierungen
Layout-Aktualisierungen ermöglichen es, das Layout einer Seite anzupassen. Layout-Aktualisierungen bieten mehr Flexibilität als Widget erfordern jedoch Zugriff auf den Server und grundlegende XML-Kenntnisse.
Die folgenden Schritte zeigen, wie Sie mit einer Layout-Aktualisierung einen Block auf einer Seite platzieren. Spezifische Beispiele und Hilfe zur Syntax finden Sie unter Allgemeine Aufgaben zur Anpassung Layouts im Frontend-.
Schritt 1: Erstellen des Blocks
-
Erstellen Sie den Block, den Sie platzieren möchten.
-
Notieren Sie sich den
block_id, da er in den Anweisungen zur Layout-Aktualisierung verwendet wird.
Schritt 2: Layout-Aktualisierung in XML erstellen
-
Erstellen Sie die Layout-Anweisungen in XML, um auf einen CMS-Block zu verweisen.
-
Speichern Sie die Layoutanweisungen auf dem Server im Layout-Ordner, in dem XML-Dateien für das Design gespeichert werden.
Beispiel:
<theme_dir>/<Namespace>_<Module>/layoutDer Layout-Handle ist der Dateiname, der mit
cms_page_view_selectable_beginnt, gefolgt vom URL-Schlüssel der CMS-Seite, der Option zur Layout-Aktualisierung und demxmlDateisuffix. Im folgenden Beispiel istcustomer-serviceder URL-Schlüssel der Seite.ChatToolist die Option, mit der Sie die Layout-Aktualisierung auf die Seite anwenden.cms_page_view_selectable_<customer-service>_<ChatTool>.xmltable 0-row-2 1-row-2 2-row-2 layout-auto Element Beschreibung CMS-Seitenkennung Der URL-Schlüssel der Seite mit einem beliebigen Schrägstrich ( /), der durch einen Unterstrich (_) ersetzt wurde.Name der Layoutaktualisierung Die Option, die für "Layout-Aktualisierung“ wird.
Schritt 3: Verweisen Sie auf die Layout-Aktualisierung auf der Seite
-
Navigieren Sie in Admin-Seitenleiste zu Content > Elements>Pages.
-
Suchen Sie die Seite, auf der Sie den Block platzieren möchten, und öffnen Sie ihn im Bearbeitungsmodus.
-
Scrollen Sie nach unten und erweitern Sie
den Abschnitt Design .
-
Um alle verfügbaren Layout-Aktualisierungen anzuzeigen, die mit der Seite verknüpft sind, klicken Sie auf das Menü Custom Layout Update .
{width="400" modal="regular"}
-
Wählen Sie die Layout-Aktualisierung aus, die Sie auf die Seite anwenden möchten.
Schritt 4: Speichern und aktualisieren Sie den Cache
-
Klicken Sie abschließend auf Save & Close.
-
Klicken Sie in der Meldung oben im Arbeitsbereich auf Cache Management und aktualisieren Sie alle ungültigen Cache-Elemente.