Zusatzfelder in der Storefront ausgeben

Zusatzfelder sind eine Grundfunktion von Shopware 6 und bieten dir die Möglichkeit, Produkte, Kategorien oder Hersteller individuell zu erweitern. Mit Zusatzfeldern kannst du flexibel zusätzliche Informationen speichern und bei Bedarf in der Storefront ausgeben.

Da weder Shopware noch ThemeWare® wissen können, in welche Datei bzw. in welchem Twig-Block dein individuelles Zusatzfeld integriert werden soll, müssen individuelle Zusatzfelder manuell in die Storefront eingebunden werden.

Dies geht entweder mit einem CMS-Element in einem Erlebniswelt-Layout oder über eine individuelle Template-Anpassung:

CMS-Element

• Vorteile

  • Umsetzung ist sehr einfach

• Nachteile

  • erst ab Shopware 6.6.9 verfügbar

  • keine Abfrage ob ein Zusatzfeld leer ist möglich

Template-Anpassung

• Vorteile

  • schon vor Shopware 6.6.9 verfügbar

  • eine Abfrage ob ein Zusatzfeld leer ist möglich

• Nachteile

  • Umsetzung ist recht komplex

In dieser Anleitung erklären wir dir wie du Zusatzfelder mit einer Template-Anpassung in der Storefront ausgeben kannst.

Hinweis: Wie du ein Zusatzfeld mit einem CMS-Element in der Storefront ausgeben kannst, erfährst du in der Anleitung Zusatzfeld in der Erlebniswelt ausgeben.

---

Zusatzfeld mit einer Template-Anpassung ausgeben

In der folgenden Schritt-für Schritt-Anleitung binden wir das individuelle Zusatzfeld "Sicherheitshinweis" mit unserem kostenfreien ThemeWare® Customizing Plugin auf der Produktdetailseite (PDS) in die Storefront ein.

Tipp: Wie du ein individuelles Zusatzfeld anlegst, erfährst du in der Anleitung Zusatzfelder (Custom Fields)

Hinweis: Mehr Informationen zum Theme "Template-Anpassungen" findest du im Bereich Individuelle Anpassungen.

Achtung: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes)!

Template-Anpassung mit dem ThemeWare® Customizing Plugin

1) Template-Datei erstellen

Die Produktbeschreibung wird über die Template-Datei description.html (siehe GitHub) in die Storefront geladen.

Erstelle also die Datei description.html.twig in folgendem Ordner vom Customizing Plugin:

src/Resources/views/Storefront/component/product/

Hinweis: Wir empfehlen lokal zu arbeiten und die Dateien – wenn wir fertig sind – hochzuladen. So hat man direkt eine "Sicherheitskopie" seiner Anpassungen.

2) Original Template ableiten

Leite nun die Originaldatei von Shopware wie folgt ab:

{% sw_extends '@Storefront/storefront/component/product/description.html.twig' %}

3) Twig-Block vererben

Die Beschreibung befindet sich im Twig-Block component_product_description_content. Wir vererben den Block nun wie folgt:

{% sw_extends '@Storefront/storefront/component/product/description.html.twig' %}

{# GPSR: Zusatzfeld "Sicherheitshinweis" ausgeben #}
{% block component_product_description_content %}
    {# Default block #}
    {{ parent() }}
{% endblock %}

Tipp: Ergänze beschreibende Kommentare zu deinen Anpassungen. Diese erleichtern es dir dich später zurecht zu finden.

4) Zusatzfeld einfügen

Füge nun nach dem eigentlichen Twig-Block-Inhalt (⇒ {{ parent }}) das Zusatzfeld (z.B. custom_gpsr_sicherheitshinweis) ein:

{% sw_extends '@Storefront/storefront/component/product/description.html.twig' %}

{# GPSR: Zusatzfeld "Sicherheitshinweis" ergänzen #}
{% block component_product_description_content %}
    {# Default block #}
    {{ parent() }}

    {# Zusatzfeld "Sicherheitshinweis" ausgeben #}
    {{ page.product.customFields.custom_gpsr_sicherheitshinweis|raw }}
{% endblock %}

Hinweis: Der Zusatz |raw ist nötig, weil wir HTML fähiges Zusatzfeld erstellt haben. Dadurch wird der HTML-Code nicht einfach ausgeben sondern interpretiert und dein Text entsprechend formatiert.

Optional: Du kannst die Einbindung auch noch mit einem if verbinden, das prüft, ob das Zusatzfeld überhaupt befüllt ist und einen Überschrift ergänzen:

{% sw_extends '@Storefront/storefront/component/product/description.html.twig' %}

{# GPSR: Zusatzfeld "Sicherheitshinweis" ergänzen #}
{% block component_product_description_content %}
    {# Default block #}
    {{ parent() }}
    
    {# Zusatzfeld "Sicherheitshinweis" samt Headline ausgeben (wenn befüllt) #}
    {% if page.product.translated.customFields.custom_gpsr_sicherheitshinweis %}
        <h3>Sicherheitshinweis:</h3>
        <div>{{ page.product.customFields.custom_gpsr_sicherheitshinweis|raw }}</div>
    {% endif %}
{% endblock %}

Tipp: Für mehrsprachige Storefronts bietet es sich an, die Überschrift als Textbaustein zu verwenden.

Hinweis: Ein Hersteller-Zusatzfeld kannst du mit folgendem Syntax ausgeben: {{ page.product.manufacturer.customFields.DEINZUSATZFELD|raw }}

5) Template-Datei hochladen

Lade die neue Template-Datei nun auf deinen Webserver in das Verzeichnis:

custom/plugins/TcinnCustomizing/src/Resources/views/storefront/component/product

6) Cache leeren

Leere abschließend einmal den Shopware- sowie deinen Browser-Cache damit die Änderung auch in der Storefront korrekt angezeigt wird.

Beispiel

Zusatzfeld in der Beschreibung

---

Weiterführende Informationen

Mehr Informationen zum Thema "Zusatzfelder" findest du in folgendem Artikel:

Zusatzfelder (Custom Fields)