In diesem Artikel erfährst du, wie du individuelle Template-Anpassungen mit dem "ThemeWare® Customizing Plugin" durchführen kannst.
Wenn du das Erscheinungsbild von ThemeWare® mittels einer Template-Anpassung individuell verändern möchtest, findest du in diesem Artikel nützliche Tipps für die Arbeit mit Template-Dateien.
Tipp: Das erstellen eines ThemeWare® Duplikates ist für Template-Anpassungen nicht notwendig.
Einleitung
Für individuelle Template-Anpassungen brauchst du in Shopware 6 ein eigenes Theme oder eine separate Erweiterung (Plugin oder App) und nicht – wie bei Shopware 5 – eine Theme-Ableitung.
Alternativ kannst du die manuelle Methode mit unserem "ThemeWare® Customizing Plugin" bzw. der "ThemeWare® Customizing App" nutzen (siehe Abschnitt "Template Anpassungen integrieren (für erfahrende Anwender)").
Den grundlegenden Aufbau (Ordner, Template-Dateien, Twig-Blöcke etc.) gibt das Shopware Theme "" vor, da ThemeWare® technisch eine "Erweiterung" dessen ist.
ThemeWare® leitet im Rahmen unserer HC-Architecture® nur die nötigsten Template-Dateien ab und ergänzt für eigene Funktionen und Features (z.B. Widgets) eigene Template-Dateien.
Ergänzend dazu findest du den Quellcode vom Shopware Standard-Theme auf . Im Ordner "views/storefront" befinden sich alle Template-Dateien die für die Storefront relevant sind.
Wenn du eine bestimmte Stelle in den Templates suchst, kannst du z.B. über den Inspektor deines Browsers eine CSS-Klasse suchen die sich an dem entsprechenden Element oder zumindest in unmittelbarer Umgebung des entsprechenden Elementes befindet.
Diese CSS-Klasse kannst du dann im suchen. Meist findet man so recht schnell eine passende Template-Datei.
Möchtest du beispielsweise etwas unterhalb der Produktbeschreibung ergänzen, schau dir den HTML-Code der Beschreibung einmal genauer an:
Der Beschreibung ist von einem <div> mit der Klassse product-detail-description-text umgeben.
Wir durchsuchen das Git-Repository also einmal nach dieser CSS-Klasse und finden die Datei description.html.twig (siehe ).
Ein Blick in den Quellcode dieser Datei zeigt, dass der <div> mit der Klassse product-detail-description-text sich im Twig-Block component_product_description_content_text befindet.
Leite also die Datei description.html.twig für deine Template-Anpassung ab und erweitere den Twig-Bock component_product_description_content_text.
Weitere Informationen zum ableiten und erweitern von Template-Dateien findest du nachfolgend.
In Shopware 6 fehlt derzeit ein vollwertiges Child-Theme über welches man Dateien einbinden und Änderungen vornehmen kann (wie z.B. bei Shopware 5). Wir haben als Workaround ein kleines kostenfreies "ThemeWare® Customizing Plugin" bzw. eine "ThemeWare® Customizing App" für die Integration von individuellen Anpassungen und eigenen Dateien entwickelt.
Alle Informationen zu den Erweiterungen, zur Installation und die Download-Links findest du in folgenden Artikeln:
Shopware 6 nutzt als Template-Engine Twig und nicht mehr Smarty wie in Shopware 5. Viele Dinge sind in Twig aber gleich oder zumindest sehr ähnlich. Damit du einen groben Überblick über Twig bekommst, haben wir nachfolgend die wichtigsten Informationen kurz zusammengefasst.
In der ersten Zeile der Datei muss definiert werden, von welcher übergeordneten Datei diese abgeleitet wird.
Um eigne Inhalte vor oder nach dem eigentlichen Inhalt des Blocks zu platzieren, musst du nicht den kompletten Code des Blocks kopieren. Du kannst dafür den parent-Befehl wie folgt nutzen:
Möchtest du den Originalinhalt des Blocks vollständig austauschen, kannst du auf den parent-Befehl verzichten um den Block zu leeren.
Die Ausgabe aller auf der Seite verfügbaren Variablen erreichst du mit dem dump-Befehl. Die Ausgabe muss in einem Block erfolgen und ist nur im verfügbar.
Den Namen des gewünschten Textbausteins kannst du der Textbaustein-Verwaltung deiner Administration ("Einstellungen" => "Shop" => "Textbausteine") entnehmen.
Damit die Übersetzungen der einzelnen Textbaustein-Sets berücksichtigt werden nutze den Zusatz |trans.
Ein Zusatzfeld auf Produktebene wird wie folgt ausgeben:
Ein Zusatzfeld für Kategorien wird wie folgt ausgegeben:
Die Abfrage einer Theme-Variable (z.B. die ThemeWare® Konfiguration "Body-Klasse") in einem Twig-Block funktioniert wie folgt:
Die Ausgabe einer Theme-Variable muss ebenfalls in einem Twig-Block erfolgen. Das folgende Beispiel zeigt die ThemeWare® Konfiguration "Body-Klasse" (Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "Individuelle CSS-Klasse" => Feld "Body-Klasse").
Über unseren hast du die Möglichkeit alle ThemeWare® Variablen anzeigen zu lassen. Der "technische Name" in dieser Übersicht ist der Name der entsprechenden Variable, die du in Twig oder SCSS verwenden kannst.
Ist eine Template-Anpassung nur für einen bestimmten Verkaufskanal relevant, hast du die Möglichkeit deine Anpassung beispielsweise über die ThemeWare® Konfiguration mit der "Body-Klasse" einzuschränken.
Hinterlege dafür im Theme-Duplikat für den entsprechenden Verkaufskanal unter Tab "Weiteres" => Bereich "Experten-Einstellungen" => Abschnitt "Individuelle CSS-Klasse" => Feld "Body-Klasse" einen eindeutigen Namen für diesen Verkaufskanal (z.B. meinshopname).
Dieser Name kann dann in einer zusätzlichen Schleife auch für Twig genutzt werden.
Alternativ kannst du deine Anpassung auch an die ID des Verkaufskanals binden:
{% if theme_config('twt-body-class') %}
...
{% endif %}
{{ theme_config('twt-body-class') }}
{# Anpassung nur für Theme mit der Body-Klasse z.B. "meinshopname" #}
{% if theme_config('twt-body-class') == "meinshopname" %}
{# Theme hat die Body-Klasse "meinshopname" #}
...
{{ parent() }}
{% else %}
{# Theme hat nicht die Body-Klasse "meinshopname" #}
{{ parent() }}
{% endif %}
{# Anpassung für einen Sales channel mit der ID "..." #}
{% if context.salesChannel.id == "..." %}
{# Sales channel hat die ID "..." #}
...
{{ parent() }}
{% else %}
{# Sales channel hat nicht die ID "..." #}
{{ parent() }}
{% endif %}