Mini-Guide zum Templating mit Twig bei Shopware 6

Die Basis für die Template-Entwicklung von Shopware ist das PHP-Webframework Symfony. Hierbei verwendete Shopware bisher die Template-Engine Smarty. Dies hat sich jetzt mit dem Update auf Shopware 6 geändert – hier ist die Template-Engine Twig im Einsatz. Viele Dinge sind gleich oder zumindest sehr ähnlich, dennoch kann der Einstieg in Shopware 6 mit dem neuen Template-System sehr verwirrend sein.

Um einen groben Überblick über Twig zu bekommen, haben wir hier die wichtigsten Informationen zusammengefasst und kurz erklärt. Für dieses Tutorial ist es von Vorteil, wenn Sie bereits grundlegende Erfahrungen mit Smarty besitzen und bereits ein Shopware 6 Theme erstellt und bereits installiert haben.

Twig-Blöcke

Ebenfalls wie in Smarty wird bei Twig der HTML-Code in Blöcke unterteilt. Diese Unterteilung ist dafür da, den Code zu strukturieren und vor allem die Blöcke gezielt wiederzuverwenden und/oder zu überschreiben. Je mehr Blöcke man verwendet, desto flexibler ist man in der Wiederverwendung und erhöht bis zu einem gewissen Maße die Übersicht seines Codes dank der Strukturierung. Laut Shopware beeinflusst die Verwendung von vielen Blöcken nicht bzw. nicht unbedingt merkbar die Performance des Shops.

Shopware-Template erweitern

Um ein Template zu erweitern, muss dieselbe Datei mit gleicher Ordnerstruktur im eigenen Theme erstellt und der sw-extends-Befehl verwendet werden. Shopware hat den Twig-Befehl extends hier erweitert, um eine Multivererbung zur Verfügung zu stellen.

Beispiel: Wir wollen die Suche aus dem Header entfernen.

Für die Header-Suche ist folgende Template-Datei verantwortlich: views/storefront/layout/header/search.html.twig. Um diese Datei zu überschreiben, muss im Theme eine gleichnamige Datei unter gleicher Ordnerstruktur erstellt werden:

Schritt 1 – Twig-Datei erstellen

  • Erstellen Sie die Datei search.html.twig unter views/storefront/layout/header in Ihrem Theme.

Schritt 2 – sw-extends-Befehl verwenden

  • Erweitern Sie mit folgender Code-Zeile die Originaldatei der Header-Suche. Der sw-extends-Befehl referenziert sich auf die Originaldatei:
    {% sw_extends '@Storefront/storefront/layout/header/search.html.twig' %}

Sie benötigen Unterstützung bei der Erstellung eines eigenen Shopware-Templates?

Kein Problem! Vereinbaren Sie jetzt einen Termin mit unseren zertifizierten Entwicklern.

Schritt 3 – Header-Suche ausblenden:

  • Erstellen Sie einen leeren Block, um den Inhalt zu löschen: Wenn Sie den obersten Block der Originaldatei kopieren und leerlassen, wird kein Inhalt für die Header-Suche ausgegeben.
    {% block layout_header_search %}
    {% endblock %}

Die Header-Suche wird jetzt ausgeblendet.

Elternelemente

Um neue Inhalte vor oder nach dem Originalinhalt des Blocks zu platzieren, muss nicht der komplette Code der Originaldatei kopiert werden – hierfür wird der sogenannte parent-Befehl verwendet. Am besten erklärt sich dieser Befehl anhand folgenden Beispiels, in dem vor und nach der Header Suche Inhalt ausgegeben wird:

{% block layout_header_search %}
    Inhalt vor der Suche
    {{ parent() }}
    Inhalt nach der Suche
{% endblock %}

Der parent-Befehl gibt den Inhalt des Original-Templates an der Stelle aus, an der der Befehl verwendet wird. So lässt sich ganz simpel Inhalt davor und danach platzieren.

Textbausteine verwenden

Um Default-Shopware-Textbausteine an beliebiger Stelle im Theme zu verwenden, benötigt man den Namen des Textbausteines. Den richtigen Namen kann im Backend über Einstellungen > Shop > Textbausteine und schließlich über die Auswahl des Textbaustein-Sets heausgesucht werden.

Im Template selbst verwendet man bspw. den Textbaustein für den Placeholder der Header-Suche so:

{{ "header.searchPlaceholder"|trans }}

Der trans-Filter nach dem Textbaustein-Aufruf sorgt dafür, dass der Textbaustein automatisch in der jeweiligen Übersetzung verwendet wird.

Template-Dateien inkludieren

Möchte man bspw. den Preis des aktuellen Produktes auch an einer anderen Stelle verwenden, kann man diesen Teil mit Twig inkludieren. Der zugehörige Befehl lautet sw-include. Auch hier hat Shopware den Standard-Befehl include aufgrund der Mehrfachvererbung erweitert. Ein Code-Teil könnte hier wie folgt lauten:

{% block component_product_box_price %}
    {% sw_include '@Storefront/storefront/component/product/card/price-unit.html.twig' %}
{% endblock %}

Nun sind Sie gewappnet, für erste kleinere Twig-Anpassungen in Ihrem Theme wie bspw. ein Template erweitern oder die Verwendung von Textbausteinen. Für einen tieferen Einblick in die Twig-Features empfehlen wir die offizielle Twig-Dokumentation. Zudem finden Sie im offiziellen Shopware 6 Theme-Guide mehrere Anwendungsbeispiele für Ihren Shop.

4 Kommentare
  1. Markus
    Markus sagte:

    Hi, sehr gute Einführung…Vielen Dank…..kurze Frage.. wie müsste ich vorgehen, um ein Layout aus den Shopping Experiences in ein vorhandenes Template zu inkludieren? Gibt es dafür eine Lösung?

    Antworten
    • Katrin Birkicht
      Katrin Birkicht sagte:

      Hallo Herr Freyt,

      vielen Dank für die Frage – gerne unterstützen wir Sie bei der Integration. Da dafür aber je nach Projekt sehr unterschiedliche Parameter zu berücksichtigen sind, können wir keine allgemeingültige Aussage hierzu treffen. Aber nehmen Sie gerne Kontakt über unser Anfrageformular oder über projekte@econsor.de mit unseren Fachabteilungen auf.
      Ich bin mir sicher, dass unsere Experten eine Lösung für Sie finden!

      Viele Grüße
      Katrin Birkicht

      Antworten
  2. Christoph Sauer
    Christoph Sauer sagte:

    Falls auch mal jemand den Wert einer Variable aus der Theme.json ausgeben möchte und sonst nirgends etwas findet aber auf diesen Artikel stößt, man kann die Werte mit folgender Funktion ausgeben:
    {{ theme_config(‚variablen-name‘) }}

    Antworten

Beitrag kommentieren

Wir freuen uns auf Ihr Feedback!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Diesen Beitrag bewerten