Wie gestalte ich den Konfigurations-Abschluss?
Ihr Kunde konfiguriert seine Produktvariante. Wenn er damit fertig ist, kann er sie in einen Shop legen oder Ihnen eine Anfrage per Mail, ggf. mit PDF, zukommen lassen.
Sie können einstellen, welche Möglichkeiten Sie zulassen.
Im Editor Ihres Konfigurators sollten Sie eine probeweise Bestellung erst absetzen, wenn Sie den Konfigurator veröffentlicht haben.
Bestellaktionen einstellen
Sie können festlegen, welche Aktionen Ihr Nutzer ausführen kann. Dabei können Sie mehr als nur eine Aktion anbieten, z.B. sowohl "Anfragen" als auch "In den Warenkorb".
- Öffnen Sie den Editor
- Abhängig von Ihrem Layout finden Sie die Aktions-Knöpfe rechts unten im 3D-Bereich.
- Klicken Sie auf das Stiftsymbol dahinter
- In der rechten Seitenleiste öffnet sich nun die Liste mit den Aktionen. Klappen Sie die Aktion auf, die Sie ändern wollen.
- Oder klicken Sie auf Loading...(ganz unten)
Eine Hauptaktion festlegen
Die Hauptaktion wird auf dem letzten Konfigurationsschritt statt des Knopfes "Weiter" angezeigt.
- Im Kopf einer Aktion, neben dem Namen, befindet sich ein Schalter, der die Aktion als Hauptaktion auswählt.
Übersichtsseite gestalten
Bevor eine Konfiguration gespeichert wird, wird eine Übersichtsseite mit den Auswahlen und dem Preis gezeigt. Abhängig von der Aktion kann diese Seite gestaltet werden.
Dazu in der Aktion die Auswahl "Übersichtsseite" betätigen:
- Merkmale und Artikel: Es werden die Merkmale, sortiert nach den Schritten, und die ausgewählen oder eingegebenen Werte dargestellt. Ausserdem werden die Artikel angezeigt, die kraft dieser Werte zugesteuert werden und den Preis festlegen.
- Nur Artikel: Es werden nur die Artikel angezeigt.
- Keine Übersicht: Die Übersichtsseite wird nicht angezeigt.
Kundendaten abfragen
- In der Aktion den Haken bei "Kontaktformular" setzen.
- Es können nun bestimmte Felder für Kundendaten ausgewählt werden, die dann auf einer Seite nach der Übersichtsseite, vor dem Speichern, abgefragt werden.
- Wenn Sie auf das Zahlrad hinter einem dieser Felder klicken, öffnet sich auf die Option, mit der Sie bestimmen können, ob das Feld ein Pflichtfeld ist.
- Ebenso kann hier ein Datenschutz-Hinweis angegeben werden.
- Falls eine E-Mail-Adresse erfasst wird, gibt es hier die Möglichkeit, eine Mail an den Kunden zu veranlassen.
Bitte beachten Sie:
Wenn Sie Kundendaten abfragen, erfassen Sie personenbezogene Daten. Diese Daten sind durch die DSGVO geschützt. Sie müssen dann also vor Start des Konfigurators (auf Ihrer Webseite oder Ihrem Shop) die Zustimmung des Nutzers dazu einholen.
Kontaktformular individuell gestalten (Custom HTML Layout)
Standardmäßig enthält das Kontaktformular nur die vordefinierten Felder für Kundendaten. Mit einem Custom HTML Layout können Sie das Formular frei erweitern – z. B. um eine Einwilligungs-Checkbox, ein Dropdown oder ein Pflichtfeld.
Funktionsweise
Das Custom HTML Layout ersetzt den Inhaltsbereich des Kontaktformulars durch Ihr eigenes HTML. Innerhalb dieses HTMLs können Sie Merkmale aus Ihrem Konfigurator einbetten – auch solche, die auf keinem sichtbaren Schritt erscheinen.
Custom Layout aktivieren
- Öffnen Sie den Editor Ihres Konfigurators.
- Navigieren Sie zur gewünschten Aktion und öffnen Sie die Einstellungen des Kontaktformulars.
- Aktivieren Sie die Option Custom HTML Layout.
- Ein HTML-Editor öffnet sich, in dem Sie Ihr Layout direkt eingeben und bearbeiten können.
Merkmale einbinden
Um ein Merkmal im Custom Layout anzuzeigen, verwenden Sie den <StandaloneVariable>-Tag:
<StandaloneVariable key="merkmalKey" />
Das Merkmal muss dafür vorbereitet sein:
- Legen Sie das Merkmal wie gewohnt auf einem beliebigen Schritt an.
- Wählen Sie im Merkmal die Option „Aus Schritt entfernen" – das Merkmal bleibt im Konfigurator aktiv, erscheint aber nicht in der normalen Schrittansicht.
- Referenzieren Sie es per
<StandaloneVariable key="…" />in Ihrem HTML.
Anwendungsbeispiele
Einwilligungs-Checkbox
Legen Sie ein Ja/Nein-Merkmal an (z. B. Key: kontakterlaubnis), entfernen Sie es aus dem Schritt und binden Sie es ein:
<p>Ich bin damit einverstanden, kontaktiert zu werden.</p>
<StandaloneVariable key="kontakterlaubnis" />
Dropdown „Wie sind Sie auf uns aufmerksam geworden?"
Legen Sie ein Auswahlmerkmal mit den gewünschten Optionen an (z. B. Key: herkunft) und binden Sie es ein:
<p>Wie sind Sie auf uns aufmerksam geworden?</p>
<StandaloneVariable key="herkunft" />
Pflichtfeld Konfigurieren Sie das Merkmal als Pflichtfeld in den Merkmal-Einstellungen. Das Formular kann dann erst abgeschickt werden, wenn das Feld ausgefüllt ist.
Reihenfolge per CSS steuern
Standardmäßig erscheint der Custom-Bereich unterhalb der normalen Formularfelder.
Mit CSS können Sie ihn nach oben verschieben. Ersetzen Sie dabei .branche durch den Key Ihres Merkmals:
.orderDialogPrivateData.k3-form-container.k3-contact-form {
display: flex;
flex-direction: column;
}
.orderDialogPrivateData.k3-form-container.k3-contact-form > div:has(.branche) {
order: -1;
}
Datenübergabe
Alle Werte der eingebundenen Merkmale werden beim Absenden des Formulars vollständig mit der Konfigurationsanfrage übertragen – sowohl in der E-Mail als auch im Zielsystem (z. B. Shopify, Webhook).
Konfiguratoren ohne Custom HTML Layout funktionieren unverändert. Das Standard-Kontaktformular bleibt weiterhin nutzbar.
Bestellaktionen dynamisch ausblenden
Sie können Aktionen auch ausblenden, z.B. um verschiedene Einsprünge mit verschiedenen Ausgängen zu versehen oder um zu erzwingen, dass der Nutzer ein optionales Merkmal setzt.
Wenn Sie beispielsweise den Konfigurator auf Web und Shop einbinden und verschiedene Ausgänge haben wollen:
- Richten Sie ein Merkmal ein, dass angibt, welche Bestellknöpfe gezeigt werden sollen. Das ist vermutlich versteckt. Es kann ein Zahlenmerkmal ein (0=Webseite, 1=Shop), das ist am einfachsten, oder ein Ja/Nein Schalter oder eine Auswahl, bei der die Werte „keys“ tragen.
- Dieses Merkmal setzen Sie dann verschieden beim Einsprung von der Webseite oder dem Shop.
Dazu geben Sie dem Merkmal selbst einen „key“, z.B. „webOderShop“ und hängen es dann an die Adresse des Konfigurators an, z.B.
…&webOderShop=1oder…&webOderShop=web(wenn „web“ ein Wert-Key ist). - Schliesslich bauen Sie eine Regel mit diesem Merkmal und der Aktion „Konfigurator-Abschluss festlegen“. Dann können Sie für jeden Wert des Merkmales festlegen, welche Bestellknöpfe weggeblendet oder ausgegraut werden können.