In diesem Artikel erfährst du, wie du individuelle Template-Anpassungen mit dem "ThemeWare® Customizing Plugin" durchführen kannst.
Last updated
Was this helpful?
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.
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.
Prüfe ob es im bereits ein passende Erweiterung gibt.
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.
Achtung: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes)!
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.
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.
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.
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.
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:
Tipp: Mehr Informationen zu Zusatzfeldern und dem einbinden in die Storefront findest du im Artikel Zusatzfelder (Custom Fields).
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").
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:
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.
Diese CSS-Klasse kannst du dann im suchen. Meist findet man so recht schnell eine passende Template-Datei.
Wir durchsuchen das Git-Repository also einmal nach dieser CSS-Klasse und finden die Datei description.html.twig (siehe ).
Hinweis: Weiterführende Links rund um das Thema "Twig" findest du in der Twig-Dokumentation unter:
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.
Ü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.