# Feldtypen

Im Konfigurator können unterschiedliche Feldtypen ausgewählt werden. Mit dem Feldtyp wird bestimmt, welche Aspekte eines Produkts und wie das Produkt konfiguriert werden soll. Für manche Produkte braucht es beispielsweise Auswahlmöglichkeiten, bei anderen ein Freitextfeld oder ein Zahlfeld, in das Maße eingegeben werden können. Mit den verschiedenen Feldern lässt sich für jedes Produkt die passende Konfiguration erstellen.&#x20;

## Textfeld

Ein Textfeld ermöglicht Kunden im Shopfrontend einen Freitext einzugeben. Das kann beispielsweise zur Personalisierung von Produkten durch Aufdrucke, Stickereien, Gravuren o.ä. verwendet werden.&#x20;

### Grundeinstellungen

Gib deinem Textfeld eine sinnvolle Bezeichnung und lege einen Schlüsselwert fest. Dieser Wert kann für Validierungs- und Preisregeln genutzt werden.

{% hint style="info" %}
Wichtig: Der Schlüsselwert muss eindeutig für die gesamte Konfiguration sein.&#x20;
{% endhint %}

Optional kann eine Beschreibung hinzugefügt werden. Die Beschreibung wird Kunden im Tooltipp angezeigt und bietet Informationen zum korrekten Ausfüllen des Felds.&#x20;

Mit der Position wird festgelegt, an welcher Stelle das Textfeld in der Konfiguration im Shopfrontend angezeigt werden soll.

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2FskDoTeisbvG0ADpoG55p%2Fneonlines-konfigurator-textfeld.png?alt=media&#x26;token=7571985c-586e-4ad5-9ccc-6924276e4d36" alt=""><figcaption><p>Neonlines Konfigurator Grundeinstellungen Textfeld</p></figcaption></figure>

## Zahlfeld

Bei einem Zahlfeld können Kunden im Shopfrontend Zahlenwerte eingeben. Das bietet sich für Produkte an, bei denen Längen, Breiten oder andere in Zahlen festgelegte Eigenschaften konfiguriert werden sollen.&#x20;

### Grundeinstellungen

Gib deinem Zahlfeld eine sinnvolle Bezeichnung und lege einen Schlüsselwert fest. Dieser Wert kann für Validierungsregeln, Preisregeln und Berechnungen genutzt werden.

{% hint style="info" %}
Wichtig: Der Schlüsselwert muss eindeutig für die gesamte Konfiguration sein.
{% endhint %}

Optional kann eine Beschreibung hinzugefügt werden. Die Beschreibung wird Kunden im Tooltipp angezeigt und bietet Informationen zum korrekten Ausfüllen des Felds. &#x20;

Unter "Einheiten-Label" legst du die Einheit fest, z. B. cm, m, l oder andere. Bei Bedarf kann ein Standardwert definiert werden. Dieser wird dann im Shopfrontend für die Kunden angezeigt.&#x20;

Mit der Position wird festgelegt, an welcher Stelle das Zahlfeld in der Konfiguration im Shopfrontend angezeigt werden soll.

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2FlkLyr2hQVvqU7CiG247i%2Fneonlines-konfigurator-zahlfeld.png?alt=media&#x26;token=590e5a98-d681-4c2d-b2db-2cc52f47d3c7" alt=""><figcaption><p>Neonlines Konfigurator Grundeinstellungen Zahlfeld</p></figcaption></figure>

## Zahlfeld mit Berechnungsergebnis

Für einige Konfigurationen ist es hilfreich, Zahlfelder als Berechnungsergebnisse auszugeben, z. B. als Quadratmeter, Laufmeter usw. Dafür steht der Feldtyp Berechnungsergebnis zur Verfügung. Unter "Grundeinstellungen" wird das Feld definiert, unter "Berechnungen" > "Allgemeine Berechnungen" gibst du die gewünschte Berechnungsformel ein.&#x20;

### Grundeinstellungen

Gib deinem Zahlfeld eine sinnvolle Bezeichnung und lege einen Schlüsselwert fest. Dieser Wert kann für weitere Validierungs- und Preisregeln genutzt werden.

{% hint style="info" %}
Wichtig: Der Schlüsselwert muss eindeutig für die gesamte Konfiguration sein.
{% endhint %}

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2FSLnyLBS90CUFVb6K3kFr%2Fneonlines-konfigurator-feldtyp-berechnungsergebnis.png?alt=media&#x26;token=103fc7b3-f79d-4964-bab0-6b54d0993626" alt=""><figcaption><p>Feldtyp Berechnungsergebnis im Admin</p></figcaption></figure>

### Berechnung anlegen

Die Berechnung für dein Zahlfeld mit Berechnungsergebnis legst du in deiner Konfiguration unter dem Reiter "Berechnungen" > "Allgemeine Berechnungen" an. Die Variablen für deine Berechnungen kannst du dir unter "Verfügbare Variablen" anzeigen lassen.&#x20;

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2FJkKQACt583EO4nTo7ien%2Fneonlines-konfigurator-berechnung-allgemeine-berechnungen.png?alt=media&#x26;token=d1c5dc7b-4187-402d-b9b5-35923a3cf7b0" alt=""><figcaption><p>Berechnungen anlegen</p></figcaption></figure>

### Berechnung im Feld aktivieren

In deinem Berechnungs-Feld unter Grundeinstellungen kannst du die von dir angelegte Berechnung auswählen und damit aktivieren.&#x20;

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2F2pPw0TDw03sLt23ouwS2%2Fneonlines-konfigurator-berechnung-aktivieren.png?alt=media&#x26;token=27803300-509f-4b8c-8eee-ceb78800bdda" alt=""><figcaption><p>Berechnung im Berechnungsfeld aktivieren</p></figcaption></figure>

### Ausgabe im Frontend

Geben die Kunden im Frontende Werte ein, werden die Berechnungsergebnisse automatisch angezeigt.&#x20;

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2FrO3QBbH7Dk1jHcgNsiZU%2Fneonlines-konfigurator-feldtyp-berechnungsergebnis-frontend.png?alt=media&#x26;token=8114b763-6668-4a7b-a9c0-c35a6e37518a" alt=""><figcaption><p>Feldtyp Berechnungsergebnis im Frontend</p></figcaption></figure>

## Auswahlfeld

Bei einem Auswahlfeld stehen Kunden im Shopfrontend vordefinierte Möglichkeiten zur Verfügung, aus denen eine Option gewählt werden kann. Das eignet sich beispielsweise für Produkte in unterschiedlichen Farben, Materialien oder Größen.&#x20;

Auswahlfelder gibt es in verschiedenen Darstellungsformen:

* Dropdown
* Radiobuttons
* Buttons
* Bilder
* Farben

### Grundeinstellungen

Gib deinem Auswahlfeld eine sinnvolle Bezeichnung und lege einen Schlüsselwert fest. Dieser Wert kann für Validierungs- und Preisregeln genutzt werden.

{% hint style="info" %}
Wichtig: Der Schlüsselwert muss eindeutig für die gesamte Konfiguration sein.
{% endhint %}

Optional kann eine Beschreibung hinzugefügt werden. Die Beschreibung wird Kunden im Tooltipp angezeigt und bietet Informationen zum korrekten Ausfüllen des Felds. &#x20;

Mit der Position wird festgelegt, an welcher Stelle das Auswahlfeld in der Konfiguration im Shopfrontend angezeigt werden soll.

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2Fwt6XUQ0PYlsUQVdWQdOF%2Fneonlines-konfigurator-auswahlfeld.png?alt=media&#x26;token=b0dde826-dd2f-477b-9afd-224fafe67874" alt=""><figcaption><p>Neonlines Konfigurator Grundeinstellungen Wahlfeld</p></figcaption></figure>

### Auswahlfelder durch Werte definieren

Welche Auswahlmöglichkeiten es geben soll wird für alle Arten von Auswahlfeldern unter "Werte" festgelegt. Neue Werte legst du an, indem du auf „Wert hinzufügen klickst“. Jeder Wert entspricht im Shopfrontend einer Auswahl. Es können beliebig viele Werte angelegt werden.&#x20;

Gib deiner Auswahlmöglichkeit ein passendes Label und lege den Wert fest. Jedem Wert kannst du bei Bedarf eine Preisregel zuordnen. Mit der Position wird festgelegt, an welcher Stelle der Wert im Dropdownmenü, den Radiobuttons, Buttons oder Bildern angezeigt werden soll.

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2Fa79tf9uM4uQkiWNyyKrm%2Fneonlines-konfigurator-auswahlfeld-werte.png?alt=media&#x26;token=18877bcf-db06-4685-961d-fbcc42671bab" alt=""><figcaption><p>Neonlines Konfigurator Auswahlfeld Werte definieren</p></figcaption></figure>

### Auswahlfeld mit Bildern anlegen

Um Kunden im Shopfrontend eine Auswahl mit Bildern anzubieten, kann die Darstellungsoption "Bild" als Auswahlfeld gewählt werden. Lade unter "Werte" die gewünschten Bilder hoch.&#x20;

Gib deiner Auswahlmöglichkeit ein passendes Label und lege den Wert fest. Jedem Wert kannst du bei Bedarf eine Preisregel zuordnen. Mit der Position wird festgelegt, an welcher Stelle der Wert (das Bild) in der Auswahl angezeigt werden soll.&#x20;

Hier findest du ein Produktbeispiel mit Auswahlbildern in unserem Demoshop

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2FWaGHAFYoK9X1997tvW9P%2Fneonlines-shopware-konfigurator-bildfeld-2.png?alt=media&#x26;token=19f2a608-9547-488c-83d1-c5fe3d7c15a7" alt=""><figcaption><p>Bildauswahl über Medienfeld </p></figcaption></figure>

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2FoG5zneb0EYqdg1ZEtPas%2Fneonlines-shopware-konfigurator-bildfeld-3.png?alt=media&#x26;token=cb19db3b-62a3-45ef-bade-4414f4089ff6" alt=""><figcaption><p>Bildauswahl per URL </p></figcaption></figure>

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2FQnjpriO1vNURwhVlUceE%2Fneonlines-shopware-konfigurator-bildfeld-1.png?alt=media&#x26;token=bf71ed1e-da39-4c5d-bc8d-27bfb81f3d8f" alt=""><figcaption><p>Dynamische Bildauswahl üüber Produkt-Zusatzfeld</p></figcaption></figure>

{% embed url="<https://demoshop-shopware-6.neonlines.de/Chips-Mischung/CH101>" %}

### Auswahlfeld mit Farben anlegen

Um deinen Kunden eine Auswahl an Farben anzubieten, kannst du Farbfelder anlegen. Dafür gibst du unter "Werte" die als Label die Farbbezeichnung an und kannst dann den zugehörigen Farbwert auswählen.&#x20;

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2F90baZcBmdFzcYiGSxvaA%2Fneonlines-konfigurator-auswahl-farben.png?alt=media&#x26;token=77b41aa9-262b-43d5-839c-8f7334f03e77" alt=""><figcaption><p>Auswahlfeld mit Farbwerten</p></figcaption></figure>

Hier findest du ein Beispiel mit angelegten Farben in unserem Demoshop.&#x20;

{% embed url="<https://demoshop-shopware-6.neonlines.de/Die-grosse-Feature-Demo/SW10025>" %}

### Auswahlfelder für Bilder & Farben als Modalfenster anzeigen lassen

Bei den Auswahlfeldern für Bilder und Farben kann gewählt werden, ob die Auswahloptionen direkt angezeigt oder in einem Modalfenster werden sollen. Die Anzeige in einem Modalfenster ist für die Kunden übersichtlicher, wenn viele Auswahloptionen zur Verfügung stehen. Um die Anzeige im Modalfenster zu nutzen, aktiviere die Option in den Grundeinstellungen des Felds.&#x20;

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2FMC3OCjkcfpHnHSsewl9N%2Fneonlines-konfigurator-anzeige-mit-modalfenster-aktivieren.png?alt=media&#x26;token=3e3a40df-ab85-4303-ba6d-bdbd88fdc3da" alt=""><figcaption><p>Aktivierung des Modalfensters zur Anzeige</p></figcaption></figure>

So sieht das Modalfenster im Frontend für die Kunden aus:&#x20;

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2FUn0kNWcUwQox7NkHOrHv%2Fneonlines-konfigurator-anzeige-modalfenster-frontend.png?alt=media&#x26;token=0ab802c7-c273-4070-8c19-659a438a3cbe" alt=""><figcaption><p>Anzeige Modalfenster im Frontend</p></figcaption></figure>

### Auswahlfeld-Werte im CSV-Format definieren

Um einfach viele Werte zu hinterlegen, steht der CSV-Modus zur Verfügung. Im Demoshop ist eine [Beispielkonfiguration](https://neonlines.de/shopware/admin#/neon/configurator/detail/018d369c5a427a238c0114c272b651a6/groups?field=018d369c93dc733faff2c043ea4888c9\&tab=values) anglegt.

Dabei müssen zuerst die benötigten Spalten gewählt werden, danach werden die CSV-Werte eingetragen. Der Editor zeigt fehlende Werte oder Fehler an.

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2FyniGFmybvABHndgR3Lt4%2FBildschirmfoto%202024-05-02%20um%2008.22.09.png?alt=media&#x26;token=72984c2f-dd1c-4435-8460-7f37d6965c33" alt=""><figcaption><p>Eingabe der Auswahl-Feld-Werte im CSV-Modus.</p></figcaption></figure>

### Dynamische Preise

Um Preise dynamisch aus den Produktdaten zu holen, kannst du eine Variable als Preis hinterlegen.

#### Format

```
{{product.customFields.name_des_zusatzfeldes}}
```

#### Beispiel

Angenommen, der Preis für die Auswahl-Option ist im Zusatzfeld "Preis für Lackierung" hinterlegt, das Feld hat den technischen Name "preis\_lackierung". Dann kannst du diesen Preis im Preis-Feld mit {{product.customFields.preis\_lackierung}} abrufen. Wenn du dann verschiedene Produkte mit unterschiedlichen Lackierungs-Preisen mit der gleichen Konfiguration nutzt, passt sich der Preis für die Option automatisch ann

### Preisanzeige

Etwaige Auf- oder Abschläge für Auswahlfelder-Werte können direkt in der Konfiguration angezeigt werden. Es stehen vier Optionen zur Verfügung:&#x20;

1. keine Preisanzeige
2. absolute Preisanzeige: der Preis wird in der Shop-Währung formatiert
3. relative Preisanzeige: der Preis wird in Prozent angezeigt
4. eigene Preisanzeige: hier kann ein eigenes Format eingegeben werden, um bspw. den Preis pro Meter anzuzeigen

{% hint style="warning" %}
Bitte beachte, dass sich diese Optionen nur auf die Anzeige bezieht und keinen Einfluss auf die Preisberechnung hat. Die Preisberechnung ist von der Anzeige losgelöst und muss separat hinterlegt werden.
{% endhint %}

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2FNIqYjfsPZ14fmSzzWQ9H%2FPreisanzeige%20absolut.png?alt=media&#x26;token=f45ecb05-e63d-41f8-8dde-81f798169a38" alt=""><figcaption><p>Preis wird im Shop als absoluter Aufschlag angezeigt</p></figcaption></figure>

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2FYVa6ywuFZvBTfIb2TwyK%2FPreisanzeige%20eigene.png?alt=media&#x26;token=3ff7d949-d030-480e-8091-4889e79e2bbb" alt=""><figcaption><p>Es kann auch eine eigene Preisanzeige angezeigt werden</p></figcaption></figure>

<figure><img src="https://665968178-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FumO1dT2DDgq6BDHjh0sb%2Fuploads%2FgOV0EkmrUFUgGvz14Ezk%2FBeispiele%20Preisanzeige.png?alt=media&#x26;token=7e5699f1-d4e7-4e28-a52a-664b29b55170" alt=""><figcaption><p>Eine Beispiel-Konfiguration, die alle Auswahlfelder mit allen Preisanzeige-Optionen zeigt</p></figcaption></figure>
