# Templates

Ein Template bildet die Grundlage für die Datenausspielung jedes QR-Codes.\
Aus einer Liste von Elementen können Sie den Aufbau der Ausspielung individuell definieren. Die Templates unterstützen **HTML-Code**, wodurch nahezu unbegrenzte Gestaltungsmöglichkeiten bestehen.

Jedes Feld eines [Elements ](#folgende-elemente-stehen-zur-auswahl-zur-verfugung)kann mit einem [Datensatz ](#datenzuordnung)des jeweiligen Produktes verknüpft werden, um dynamische Inhalte anhand der Produktdaten auszugeben.\
Darüber hinaus können Sie pro Element diverse Einstellungen vornehmen, um die Anzeige so individuell wie möglich zu gestalten.

## Folgende Elemente stehen zur Auswahl zur Verfügung.:

{% hint style="info" %}
Jedes der folgenden Elemente steht auch als Unterelement zur Verfügung; es gelten dieselben Einstellungsmöglichkeiten.
{% endhint %}

### **Text**

Das Textelement stellt einen einfachen Text zur Verfügung. Dieser kann entweder statisch oder über eine [Datenzuordnung ](#datenzuordnung)dynamisch ausgegeben werden. Darüber hinaus kann das Element optional als Dropdown (Collapse-Element) dargestellt werden. Die Position bestimmt die Reihenfolge der Anzeige, wobei die kleinste Zahl zuerst ausgegeben wird.

<figure><img src="https://2593420173-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuEsjhAVOA2wlUumeZYPB%2Fuploads%2FNLzxgUVuVlOFMmZtbfv0%2Fimage.png?alt=media&#x26;token=c9e49d40-e98a-4bd1-b6cc-140e9c45be0a" alt=""><figcaption></figcaption></figure>

### Text & Bild

Dieses Element stellt ein Bild sowie einen Text bereit. Der Text kann entweder statisch oder dynamisch über eine [Datenzuordnung ](#datenzuordnung)ausgegeben werden. Optional kann das Element als Dropdown (Collapse-Element) dargestellt werden. Die Position bestimmt die Reihenfolge der Anzeige, wobei die kleinste Zahl zuerst berücksichtigt wird. Für die Darstellung stehen vier Varianten zur Verfügung:

* Text oben und Bild unten
* Bild oben und Text unten
* Text Links und Bild Rechts
* Bild Links und Text Rechts

<figure><img src="https://2593420173-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuEsjhAVOA2wlUumeZYPB%2Fuploads%2F34bKgB7L9BWmmCqV5d7M%2Fimage.png?alt=media&#x26;token=2613531c-8bac-4d8e-a234-341a94b90674" alt=""><figcaption></figcaption></figure>

### Verlinkung

Dieses Element stellt einen Link in Form einer klickbaren Fläche bereit. Der Link kann entweder statisch oder dynamisch über eine [Datenzuordnung](#datenzuordnung) ausgegeben werden. Die Position bestimmt die Reihenfolge der Anzeige, wobei die kleinste Zahl zuerst berücksichtigt wird. Zudem kann festgelegt werden, ob sich der Link im selben oder in einem neuen Tab öffnet.

<figure><img src="https://2593420173-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuEsjhAVOA2wlUumeZYPB%2Fuploads%2Fa65NUKPP8lp2Gmrdum6S%2Fimage.png?alt=media&#x26;token=3b82c385-7a63-4429-b393-4c22ff5c34de" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Fehlt Ihnen ein gewünschtes Element oder Funktion?**\
Kein Problem – kontaktieren Sie uns gerne, und wir integrieren für Sie das passende Element.
{% endhint %}

## Datenzuordnung

Derzeit stehen drei Datenquellen zur Verknüpfung zur Verfügung:

* product.name
* product.description
* product.custom

Sind diese Quellen mit Daten gefüllt, werden die entsprechenden Informationen automatisch anhand des jeweiligen Produkts ausgegeben.

Bei der Datenquelle *product.custom* besteht die Möglichkeit, zur Auswahl des passenden Customfields ein Beispielprodukt heranzuziehen. Dabei werden alle für dieses Produkt gepflegten Customfields angezeigt, aus denen das gewünschte Feld ausgewählt werden kann.

<figure><img src="https://2593420173-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuEsjhAVOA2wlUumeZYPB%2Fuploads%2Fda4dXSgAz7OGxFFC1DZB%2Fimage.png?alt=media&#x26;token=5058c3d2-ee86-4bdd-835c-80ec5d82cc58" alt=""><figcaption></figcaption></figure>