Shopware 6 Theme Twig

Schnellübersicht

Shopware Variablen ausgeben

Folgender Befehl kann an jeder Stelle im Template/Theme eingefügt werden. Darauf zu achten ist, dass diese Stelle auch gerendert wird und nicht mehrfach aufgerufen werden soll, z.b. nicht innerhalb eines wiederholenden Twig-Macros oder einer Twig-For-Schleife.
Mit dem Befehl wird an dieser Steller im Theme eine pre-Element eingebracht welches die ganzen möglichen Variaben darstellt.

{{ dump() }}

Zur Zeit funktioniert der dump() Befehl innerhalb eines Twig-Blocks und wenn in der Datei „.env“ der Eintrag „APP_ENV=prod“ geändert wird in „APP_ENV=dev“.

 

Block überschreiben

{% block block-name %}
  Ich bin der neue Inhalt
{% endblock %}

Eltern-Block

{{ parent() }}

Block erweitern davor

{% block block-name %}
  Ich bin der neue Inhalt vor dem "alten" Inhalt
  {{ parent() }}  der vererbte Stamm-Inhalt
{% endblock %}

Block erweitern danach

{% block block-name %}
  {{ parent() }}  der vererbte Stamm-Inhalt
  Ich bin der neue Inhalt nach dem "alten" Inhalt
{% endblock %}

Variable setzen/deklarieren

Name der Variabel ist variablenname und der Wert ist das Wort „Hallo“.

{% set variablenname = "Hallo" %}

Variable ausgeben

Gibt „Hallo“ aus wenn variablenname den Wert „Hallo“ gesetzt bekommen hat, siehe ein Abschnitt oben.

{{ variablenname }}

Kommentar einfügen

Es ist manchmal hilfreich seinen Code für andere Programmierer zu kommentieren. Dieser erscheint nur in der Twig Datei für den Programmierer und nicht im Frontend.

{# Ich bin ein Kommentar #}

Template-Datei erweitern

Shopware Twig extends

{% sw_extends '@parent/storefront/base.html.twig' %}
{% sw_extends '@parent/storefront/page/product-detail/index.html.twig' %}
{% sw_extends '@Storefront/storefront/layout/header/header.html.twig' %}

und das original Twig extends:

{% extends "@Storefront/base.html.twig" %}

Template-Datei überschreiben

Im Gegensatz zum erweitern einer Template-Datei, kann diese auch komplett überschrieben werden, so dass der Inhalt komplett neu oder leer ist. Beim überschreiben mit nichts, einfach eine leere Twig-Datei erstellen mit dem Namen der ursprünglichen Twig-Datei,
z.B. „base.html.twig“. Beim überschreiben mit eigenem Inhalt, einfach die Datei nicht extenden (kein „sw_extends“ am Anfang). Auf die original Blöck kann trotzdem zugegriffen werden.

{# Hier kein sw_extends #}
Mein eigener Inhalt
{% block blockname%}
  weiterere Inhalt
{% endblock %}

Template-Datei in Template einfügen

{% sw_include "@Storefront/page/account/address.html.twig" %}

If Abfrage

{% if controllerName|lower == "index" %}
  Ausgabe wenn Kontroller-Name gleich index ist, z.b. Startseite
{% endif %}

If – Else Abfrage

{% if controllerName|lower == "index" %}
  Ausgabe wenn Kontroller-Name gleich "index" ist, z.b. Startseite
{% else %}
  Ausgabe wenn Kontroller-Name nicht "index" ist, z.B. alle anderen Seiten ausser Startseite
{% endif %}

If – Elseif Abfrage

{% if controllerName|lower == "index" %}
  Ausgabe wenn Kontroller-Name gleich "index" ist, z.b. Startseite
{% elseif controllerName|auth%}
  Ausgabe wenn Kontroller-Name nicht "index" ist sondern "auth", z.B. Anmeldeseite
{% endif %}

For Schleifen

{% for Item in Array %}
  {{ Item }}
{% endfor %}

Funktion

{% macro functionname() %}
   Hallo Welt.
{% endmacro %}

{{ _self.functionname() }}

Dateien einbinden

In der Konfiguration des Themes (Datei: theme.json) werden die Speicherorte der Datei angegeben. Dies könnte wie folgt aussehen:

{
  "name": "Meintheme",
  "author": "Max Mustermann",
  "style": [
    "@Storefront",
    "Resources/storefront/style/base.scss"
  ],
  "script": [
    "@Storefront",
    "Resources/storefront/dist/script/all.js"
  ],
  "asset": [
    "Resources/storefront/asset"
  ]
}

Der CSS-Dateien und die Javascripte werden in diesem Beispiel mit dem Grund-CSS und dem Grund-Javascript „verschmolzen“. Unter „asset“ können Dateien abgelegt werden, z.B. Icons oder Bilder.

Beim Kompilieren des Theme werden dann alle Daten in den public/ -Ordner kopiert und sind damit für den Besucher der Website aufrufbar.

{{ asset('pfad/zur/datei.xyz', '@Meintheme') }}

Bild einfügen

<img src="{{ asset('img/meinBild.jpg') }}">

Ergebnispfad: /kompletter/Pfad/public/img/meinBild.jpg 

<img src="{{ asset('img/meinBild.jpg', '@Storefront') }}">

Ergebnispfad: /bundles/storefront/img/meinBild.jpg

Bild einfügen aus eigenem Theme

<img src="{{ asset('img/meinBild.jpg', '@Meintheme') }}"> 

Ergebnispfad: /bundles/meintheme/img/meinBild.jpg