#2139 Individuelle Template-Anpassungen (Twig, HTML)

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.


Hinweis: In der Shopware 6 Cloud sind aktuell keine individuellen Anpassungen möglich!


Einleitung

Für individuelle Template-Anpassungen brauchst du in Shopware 6 Shop ein eigenes Theme oder ein separates Plugin und nicht – wie bei Shopware 5 – eine Theme-Ableitung. Das erstellen eines ThemeWare® Duplikates ist daher für Template-Anpassungen nicht notwendig.


Lösungen

  1. Prüfe ob es im Shopware Community Store bereits ein passendes Plugin gibt.
  2. Alternativ kannst du die manuelle Methode mit dem "ThemeWare® Customizing"-Plugin nutzen (Link siehe unten).


Einsicht in den Quellcode

Den grundlegenden Aufbau (Template-Ordner, Template-Dateien, Twig-Blöcke etc.) gibt das Shopware Standard-Theme ("Shopware default theme") vor, da ThemeWare® technisch auf diesem basiert und das Standard-Theme umfangreich erweitert.


Die erste Anlaufstelle ist daher ThemeWare®. Auch wenn du die originalen ThemeWare®-Dateien nicht bearbeiten solltest, ist es manchmal nötig, dass du hier etwas nachschaust. Du findest die ThemeWare®-Dateien unter folgendem Pfad in deiner Shopware-Installation (XXX= Modern, Living, Clean etc.):

  • Twig: "custom/plugins/TcinnThemeWareXXX/src/Resources/views/storefront/"
  • SCSS: "custom/plugins/TcinnThemeWareXXX/src/Resources/app/storefront/src/scss/"


ThemeWare® leitet im Rahmen unserer HC-Architecture® nur die nötigsten Template-Dateien ab und ergänzt für eigene Funktionen/Features (z.B. Widgets) eigene Template-Dateien.


Ergänzend dazu findest du den Quellcode vom Shopware Standard-Theme auf GitHub. Im Ordner "views" befinden sich alle Template-Dateien die für die Storefront relevant sind.


Hilfreiche Twig-Grundlagen

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.


Hinweis: Weitere Informationen rund um "Twig" findest du unter: https://twig.symfony.com/


Eine Template-Datei ableiten

In der ersten Zeile der Datei muss definiert werden, von welcher übergeordneten Datei diese abgeleitet wird.

{% sw_extends '@Storefront/storefront/page/product-detail/headline.html.twig' %}


Wichtig: Bei jeder Template-Änderung muss der Shopware- und ggf. der Browser-Cache geleert werden damit Änderungen in der Storefront wirksam werden.


Eigene Inhalte in Blöcken platzieren

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:


Inhalt nach dem Originalinhalt des Blocks ergänzen

{% block name_des_blocks %}
{{ parent() }}

{# Platziere hier den neuen Inhalt #}
{% endblock %}

Inhalt vor dem Originalinhalt des Blocks ergänzen

{% block name_des_blocks %}
{# Platziere hier den neuen Inhalt #}

{{ parent() }}
{% endblock %}

Block überschreiben

Möchtest du den Originalinhalt des Blocks vollständig austauschen, kannst du auf den parent-Befehl verzichten um den Block zu leeren.

{% block page_product_detail_name_container %}
{# Platziere hier den neuen Inhalt #}
{% endblock %}

Anzeigen aller Variablen

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 Entwicklermodus verfügbar.

{{ dump() }}

Einen Textbaustein einbinden

Den Namen des gewünschten Textbausteins kannst du in der Administration im Bereich "Einstellungen" => "Shop" => "Textbausteine" entnehmen. Damit die Übersetzungen der einzelnen Textbaustein-Sets berücksichtigt werden nutze den Zusatz "|trans".

{% block name_des_blocks %}
{{ parent() }}
{{ "twt.widget.communities.headline"|trans }}
{% endblock %}

Zusatzfelder in der Storefront ausgeben

Ein Zusatzfeld auf Produktebene wird wie folgt ausgeben:

{{ page.product.translated.customFields.technischer_name_zusatzfeld }}

Ein Zusatzfeld für Kategorien wird wie folgt ausgegeben:

{{ page.footer.navigation.active.translated.customFields.technischer_name_zusatzfeld }}

Hinweis: Mehr Informationen zu Zusatzfeldern findest du in der Shopware-Dokumentation.


Anzeigen einer ThemeWare®-Variable

Die Ausgabe einer Variable muss ebenfalls in einem Block erfolgen. Das Beispiel zeigt die ThemeWare®-Konfiguration "Body-Klasse" (Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Feld "Body-Klasse").

{# ab Shopware 6.4 #}
{{ theme_config('twt-body-class') }}

{# Shopware 6.3 oder darunter #}
{{ shopware.theme['twt-body-class'] }}


Zusätzliches ThemeWare®-Wissen

ThemeWare®-Variablen finden

Über unsere Feldsuchmaschine 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.


Abgrenzung für ThemeWare®-Anpassungen

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 "Erweiterte Einstellungen" => Feld "Body-Klasse" einen eindeutigen Namen für diesen Verkaufskanal.


Beispiel Body-Klasse: "meinshopname"


Dieser Name kann dann in einer zusätzlichen Schleife auch für Twig genutzt werden.


Eingrenzung im Twig:

{# Anpassung nur für Theme mit der Klasse meinshopname #}

{# ab Shopware 6.4 #}
{% if theme_config('twt-body-class') == "meinshopname" %}
{# Theme hat die Klasse meinshopname #}
{% endif %}

{# Shopware 6.3 oder darunter #}
{% if shopware.theme['twt-body-class'] == "meinshopname" %}
{# Theme hat die Klasse meinshopname #}
{% endif %}
{# Anpassung für einen Sales channel #}

{# ab Shopware 6.4 #}
{% if context.salesChannel.id == "..." %}
 {# Sales channel hat die ID ... #}
{% endif %}

Weiterführende Links:


Bitte teile uns deine Meinung mit!

Danke, das hat mir geholfen
Hat mir nicht geholfen

b41e54f41f771110d4b213678ca3db80
Kurz die Cookies, dann geht's weiter...
Auch diese Seite nutzt die üblichen Arten von Cookies: Technische und funktionale Cookies sind unbedingt nötig,damit diese Website überhaupt funktionieren kann.Zusätzlich nutzen wir Marketing-Cookies,damit wir dich auf unseren Seiten wiedererkennen und unsere Website und Kampagnen stets verbessern können, sowie Personalisierungs-Cookies mit denen wir dich, auch außerhalb dieser Website, besser ansprechen können.

Mit der Auswahl "Akzeptieren und Schließen" erlaubst Du uns die Verwendung dieser Cookies und Technologien. Bitte besuche unsere Datenschutzerklärung für weitere Informationen. Dort erfährst Du auch wie wir die Daten für erforderliche Zwecke (z. B. Sicherheit) verwenden.

Hier kannst du einstellen, welche Cookies du zulassen möchtest.

Technisch erforderlich

Wir nutzen Cookies, um die Bedienung und die Bereitstellung der Website zu ermöglichen und um sicherzustellen, dass bestimmte Funktionen ordnungsgemäß funktionieren. Diese Cookies sind immer aktiviert, da Du die Website sonst nicht ordnungsgemäß bedienen könntest.

Marketing

Die TC-Innovations GmbH und unsere Werbepartner (einschließlich Social Media-Plattformen wie Google, Facebook und Instagram) nutzen Tracking, um Dir personalisierte Angebote anzubieten, die Dir das volle Nutzererlebnis bieten. Dies beinhaltet das Anzeigen von "Direktwerbung auf Werbeplattformen Dritter", wie in der Datenschutzerklärung beschrieben. Wenn Du dieses Tracking nicht akzeptierst, wirst Du dennoch zufällige Werbeanzeigen von uns auf anderen Plattformen angezeigt bekommen.

Analyse

Um unsere Websites und Services stetig zu verbessern, analysieren wir das Nutzerverhalten auf unseren Websites.

Mehr Informationen findest du in unserer Datenschutzerklärung.

SpeichernCookie-EinstellungenAkzeptieren und Schließen