# 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.

{% hint style="info" %}
**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](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/zusatzfeld-in-der-erlebniswelt-ausgeben "mention").
{% endhint %}

***

## 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](https://wiki.themeware.design/mehr-wissen/themeware-tools/themeware-customizing-plugin "mention") auf der Produktdetailseite (PDS) in die Storefront ein.

{% hint style="success" %}
**Tipp**: Wie du ein individuelles Zusatzfeld anlegst, erfährst du in der Anleitung [zusatzfelder-custom-fields](https://wiki.themeware.design/wissensdatenbank/anleitungen/zusatzfelder-custom-fields "mention")
{% endhint %}

{% hint style="info" %}
**Hinweis**: Mehr Informationen zum Theme "Template-Anpassungen" findest du im Bereich [](https://wiki.themeware.design/wissensdatenbank/anleitungen/individuelle-anpassungen "mention").
{% endhint %}

{% hint style="danger" %}
**Achtung**: Bearbeite in keinem Fall Originaldateien von Shopware oder Erweiterungen (Plugins, Apps oder Themes)!
{% endhint %}

### Template-Anpassung mit dem ThemeWare® Customizing Plugin

#### 1) Template-Datei erstellen

Die Produktbeschreibung wird über die Template-Datei `description.html` (siehe [GitHub](https://github.com/shopware/shopware/blob/trunk/src/Storefront/Resources/views/storefront/component/product/description.html.twig)) in die Storefront geladen.

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

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

{% hint style="info" %}
**Hinweis**: Wir empfehlen lokal zu arbeiten und die Dateien – wenn wir fertig sind – hochzuladen. So hat man direkt eine "Sicherheitskopie" seiner Anpassungen.
{% endhint %}

#### 2) Original Template ableiten

Leite nun die Originaldatei von Shopware wie folgt ab:

```twig
{% 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:

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

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

{% hint style="success" %}
**Tipp**: Ergänze beschreibende Kommentare zu deinen Anpassungen. Diese erleichtern es dir dich später zurecht zu finden.
{% endhint %}

#### 4) Zusatzfeld einfügen

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

```twig
{% 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 %}
```

{% hint style="info" %}
**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.
{% endhint %}

**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:

```twig
{% 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 %}
```

{% hint style="success" %}
**Tipp**: Für mehrsprachige Storefronts bietet es sich an, die Überschrift als Textbaustein zu verwenden.
{% endhint %}

{% hint style="info" %}
**Hinweis**: Ein Hersteller-Zusatzfeld kannst du mit folgendem Syntax ausgeben: \
`{{ page.product.manufacturer.customFields.DEINZUSATZFELD|raw }}`
{% endhint %}

#### 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

<figure><img src="https://2128686145-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTCpdN4monqL7jrjwbCZL%2Fuploads%2FqqFgNwFXFKvuxu7Fo2Cl%2Fadmin--gpsr-custom-field-via-twig.png?alt=media&#x26;token=74a650b4-ad41-495f-872f-ea152e18b242" alt=""><figcaption><p>Zusatzfeld in der Beschreibung</p></figcaption></figure>

***

## Weiterführende Informationen

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

{% content-ref url="../zusatzfelder-custom-fields" %}
[zusatzfelder-custom-fields](https://wiki.themeware.design/wissensdatenbank/anleitungen/zusatzfelder-custom-fields)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://wiki.themeware.design/wissensdatenbank/anleitungen/individuelle-anpassungen/zusatzfelder-in-der-storefront-ausgeben.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.