CMS Factory für Shopware-6-Erlebniswelten
Home Installation und Anwendung Referenz Tipps&Tricks

Tipps und Tricks

Auf dieser Seite finden Sie ein paar Tipps und Code-Beispiele die beim Erstellen eines Twig-Templates helfen können. 

Wenn Sie grundsätzliche Informationen zu Twig oder Shopware-Templates suchen, dann sollten Sie diese Seiten zu Rate ziehen: Twig Template Engine und Shopware 6 Theme Development.

Auf dieser Seite:

Generelles

Verwendung von 'dump'

Das Dump-Kommando ist sehr hilfreich um heraus zu finden, welche Daten dem Twig-Template zur Verfügung stehen.
Beachte: Dump steht nur zur Verfügung, wenn der Dev-Modus aktiviert ist (siehe .env-Datei im Root).

Twig Beispiel

{{ dump() }}

Warnung!

Wichtig: Shopware bricht mit einem 500-er Fehler zusammen wenn dump() im Produktivmodus verwendet wird.

Twig-Template per FTP bearbeiten

Ein CMS-Factory-Template kann auch auf dem Server selbst erstellt werden und dort mit FTP bearbeitet werden. Das Serverseitige Template kann mittels sw_include geladen werden.

Twig Beispiel

{% sw_include '@Storefront/storefront/element/mein_twig_template.html.twig' %}

Unique ID für gleiches Element

Wenn das gleiche CMS-Factory-Element in einer Erlebniswelt mehrfach verendet wird, benötigt man oft eine eindeutige ID (z.B. für Slider). Dies ist eine Möglichkeit, eine solche zu generieren:

Twig Beispiel

{% set my_slider_id ='x'~ element.id[:10] %}

Ausgabe von HTML-Content

Zur Ausgabe von HTML kann der Twig-Filter 'raw' verwendet werden.

Twig Beispiel

{{ data.text_content|raw }}

Variablen Prüfen

Das vorhanden sein von Variablen sollte immer überprüft werden. Es gibt viele Ursachen warum ein Objekt oder eine Objekt-Property nicht definiert sein kann (Fehler im Template, verschiedene Sales-Channels, deaktivierte Plugins, etc). Im Extremfall wird (im Produktivmodus) eine Seite gar nicht angezeigt oder eine hässliche Fehlermeldung wie 'Es hat ein Problem gegeben'.

Twig Beispiel

{# Prüfung ob vorhanden und nicht NULL #} {% if myvar is defined and myvar is not null %} ... {% endif %} {# Prüfung ob vorhanden und iterierbar #} {% if mycollection is defined and mycollection is iterable %} ... {% endif %}

Media

Media als Hintergrund-Bild verwenden

Twig Beispiel

{# Für den Fall, dass kein Bild ausgewählt wird, sollte eine Default-URL verwendet werden #} {% set bg_url = 'default_bg_bild_url_hierhin' %} {% if data.med is defined and data.med is not null %} {% set bg_url = data.med|sw_encode_media_url %} {% endif %} <div style="background-image:url({{bg_url}});min-height:400px;" > ... </div>

Warnung!

Das Bild wird in voller Grösse ausgegeben. Shopware selbst berechnet aber auch kleinere Auflösungen (je nach Einstellung im Media-Folder). Das Media-Objekt enthält die URL's in der 'thumbnails'-Property. Dazu hilfreich: https://github.com/shopware/platform/blob/trunk/src/Storefront/Resources/views/storefront/utilities/thumbnail.html.twig

Download-Link

Aus dem Media-Objekt kann ein Download-Link sehr einfach erstellt werden.

Twig Beispiel

{% if data.med_download is defined and data.med_download is not null %} <a href="{{data.med_download|sw_encode_media_url}}" download> Download </a> {% endif %}

Fehler in der Doku gefunden? Bitte per E-Mail melden.