Custom Products
Bei Custom Products für Shopware 6 handelt es sich um eine Erweiterung, die Bestandteil ab dem Plan Shopware Rise ist.
Es bietet Dir die Möglichkeit, Deinen Kunden individualisierbare Produkte anzubieten. Dies ist vor allem für Artikel hilfreich, bei denen die einfache Aufteilung in Varianten nicht ausreicht und eine weitere Individualisierung gewünscht ist. Dies können beispielsweise Artikel sein, bei denen ein individueller Schriftzug, eine spezielle Farbe oder eine bestimmte Datums/Zeit - Angabe verwendet werden soll.
In der Erweiterung Custom Products legst Du Produktvorlagen mit auswählbaren Optionen an. Diese Vorlagen verknüpfst Du in einem zweiten Schritt dann mit bereits vorhandenen Artikeln. Die auswählbaren Optionen aus der Produktvorlage werden auf der Artikeldetailseite dann angezeigt, sodass der Kunde das Produkt entsprechend individualisieren kann.
Optional kannst Du den einzelnen Optionen frei definierbare Aufschläge hinzufügen.
Installation
Wenn für die Shopdomain mindestens der Rise Plan im Shopware-Account hinterlegt ist, kannst Du die Erweiterung unter Erweiterungen > Meine Erweiterungen herunterladen und installieren.
Wichtig ist, dass Du im Reiter Shopware Account mit Deinem Account angemeldet bist.
Nachdem die Erweiterung installiert wurde, kannst Du diese über den Schalter auf der linken Seite aktivieren.
Die installierte Erweiterung findest Du in der Shopware Administration unter Kataloge > Custom Products.
Produktvorlagen
Unter Kataloge > Custom Products findest Du die Übersicht der Produktvorlagen.
Hier siehst Du alle bereits angelegten Vorlagen, welche Du Deinen Produkten zuordnen kannst. Jede Vorlage hat dabei einen internen Namen, einen Anzeigenamen und eine Beschreibung. Außerdem wird Dir in der Übersicht angezeigt, wie viele Optionen jede Vorlage besitzt.
Eine bestehende Vorlage kannst Du über das "..."-Menü auf der rechten Seite Bearbeiten, Duplizieren und Löschen.
Vorlage hinzufügen
Über den Button Vorlage hinzufügen erstellst Du eine neue Vorlage. Hier gibst Du dann zunächst einige Allgemeine Konfigurationen an.
Technischer Name (1): Dieser wird nur intern in der Vorlagen Übersicht angezeigt. Das ist beispielsweise dann sinnvoll, wenn es mehrere Produktvorlagen gibt, die im Frontend gleich heißen sollen.
Aktiv (2): Mit diesem Schalter lässt sich die Produktvorlage deaktivieren. Die Artikel, in denen diese Vorlage verwendet werden, sind weiterhin verfügbar, können aber nicht mit dieser Vorlage individualisiert werden.
Anzeigename (3): Dieser Name wird im Frontend auf der Artikeldetailseite verwendet.
Beschreibung (4): Mit dieser Beschreibung kannst Du auf der Artikeldetailseite für den Kunden zusammenfassen, um welche individuellen Einstellungen man den jeweiligen Artikel erweitern kann.
Bild (5): Zusätzlich kannst Du optional ein Bild für die Artikeldetailseite hochladen oder aus der Medienverwaltung auswählen.
Schritt für Schritt Modus (6): Mit dem Schritt für Schritt Modus wird der Kunde im Frontend Schritt für Schritt durch die Optionen geführt, anstatt alle gleichzeitig angezeigt zu bekommen.
Selbst-einklappende Optionen (7): Diese Funktion klappt Optionen wieder ein, sobald vom Kunden eine valide Eingabe vorgenommen wurde. (Steht im Schritt-für-Schritt-Modus nicht zur Verfügung)
Kunden müssen ihre Konfigurationen bestätigen (8): Hier kannst Du bestimmen, ob die Kunden ihre Konfiguration mittels einer Checkbox auf der Produktseite bestätigen müssen oder nicht. So lange die Checkbox bei aktiver Funktion nicht aktiviert wird, ist es nicht möglich das Produkt zum Warenkorb hinzuzufügen und die Schaltfläche "In den Warenkorb" ist ausgegraut.
Optionen
Nachdem Du eine neue Vorlage angelegt und über Speichern abgespeichert hast, steht dir der Bereich Optionen zur Verfügung.
In diesem Bereich werden Dir die Optionen angezeigt, die der aktuellen Vorlage hinterlegt sind. Außerdem kannst Du hier auch neue Optionen zur Individualisierung hinzufügen.
Hier gibst Du zunächst einen Namen für die Option an und einen Optionstyp. Es stehen dir folgende Optionstypen zur Verfügung:
Auswahlfeld
In diesem Optionstyp kannst Du dem Kunden eine oder mehrere Auswahlmöglichkeiten anbieten, die dann in einem Fenster zur Verfügung gestellt und per Mausklick selektiert werden können. Dies können beispielsweise individuelle Optionen sein, die dem Produkt hinzugefügt werden können.
In den Einstellungen der Option wählst Du zunächst einen Namen (1), dieser wird in der Storefront und in den Bestell-Dokumenten ausgegeben.
Wenn Du einen Haken bei Pflichtfeld (2) setzt, muss der Kunde im Frontend eine Auswahl treffen, um den Artikel in den Warenkorb legen zu können. Die Möglichkeit Keine Auswahl wird ihm im Frontend dann nicht mehr angezeigt.
Zusätzlich kannst Du optional eine Beschreibung (3) hinterlegen, um den Kunden weitere Informationen zu dieser Option zu bieten.
Als nächstes kannst Du angeben, dass die Auswahlmöglichkeiten als Dropdownmenü (4) angezeigt werden sollen und ob eine Mehrfachauswahl (5) möglich sein soll. Im Dropdown Menü ist eine Mehrfachauswahl allerdings nicht möglich.
Optional kannst Du einen Zuschlag hinzufügen, den der Kunde zu zahlen hat, wenn er die Option auswählt.
Weitere Informationen hierzu erhältst Du im Abschnitt Optionsabhängige Zuschläge definieren.
Auf der linken Seite der Optionseinstellungen siehst Du die angelegten Elemente, welche der Kunde auswählen kann. Über den Button Element erstellen (6) kannst Du weitere Elemente hinzufügen. Wenn Du auf eines der Elemente (4) klickst, hast Du die Möglichkeit, weitere Einstellungen zu dem Element zu treffen.
Neben Namen und einer Bestellnummer kannst Du hier, genau wie in den Optionseinstellungen, einen eigenen Zuschlag definieren. Der Zuschlag eines Elements wird zusätzlich zum ggfs. hinterlegten Zuschlag der Option berechnet.
Anzeige im Frontend:
Handelt es sich um eine Pflichtoption, steht das Element Keine Auswahl nicht zur Verfügung.
Anzeige im Frontend als Drop-Down-Menü:
Handelt es sich um eine Pflichtoption, steht das Element Keine Auswahl nicht zur Verfügung.
Bild-Upload
Der Bild-Upload bietet die Möglichkeit, dass Deine Kunden eigene Bilder hochladen können, um diese z.B. zur Individualisierung des Produkts nutzen zu können. In der Version 3.1 werden folgende Bildformate unterstützt: JPG, PNG, GIF, WEBP, SVG, BMP, TIFF und EPS.
Diese Bildformate sind teilweise nur im Admin verfügbar.
Zunächst vergib einen Namen (1) für die Option. Der Name wird u.A. in der Storefront und auf den Dokumenten zur Bestellung ausgegeben. Die Checkbox Pflichtfeld (2) ermöglicht es Dir festzulegen, ob der Kunde zwingend eine Eingabe vornehmen muss.
Über die optionale Beschreibung (3) kannst Du Deinen Kunden weitere Informationen zu der Option geben.
Zusätzlich kannst Du eine Bestellnummer (4) für die Option angeben, die dann auf den Dokumenten ausgegeben wird.
Für die Konfiguration der Option sind die Angabe Maximale Dateianzahl (5) und Maximale Dateigröße (6) erforderlich.
Weitere Informationen zu den möglichen Zuschlägen für die Option findest Du im Abschnitt Optionsabhängige Zuschläge definieren.
Im Frontend:
Als Dateitypen können jpg, png und gif verwendet werden.
Zugriff auf die hochgeladenen Dateien:
Die hochgeladenen Bilder werden in der Bestellung gespeichert. Im Admin kannst Du in der Bestellung im Abschnitt Positionen über das "..."-Menü die Custom Product Konfiguration aufrufen.
Die Informationen zur Konfiguration werden in einem neuen Modal angezeigt und bieten Dir die Möglichkeit, die hochgeladenen Dateien herunterzuladen.
Bildauswahl
Die Bildauswahl bietet Dir im Vergleich zu dem Auswahlfeld die Möglichkeit eine Auswahl anhand von Bildern zu geben. So hat die Bildauswahl die identischen Einstellungen wie das Auswahlfeld. Der einzige Unterschied ist, dass in den Elementen zusätzlich ein Bild hinterlegt wird und die Option nicht in einem Dropdown Menü angezeigt werden kann, sondern lediglich aufklappbar ist.
Im Frontend:
Mit einem Klick auf das Thumbnail einer Option wird das Bild in Originalgröße eingeblendet.
Handelt es sich um eine Pflichtoption, steht das Element Keine Auswahl nicht zur Verfügung.
Checkbox
Mit der Checkbox kannst Du Deinen Kunden eine Option anbieten, welche sie per Checkbox anwählen oder abwählen können. Auch hier kannst Du neben einem Namen und einer Beschreibung eine Bestellnummer hinterlegen und einen entsprechenden Zuschlag hinterlegen.
Im Frontend:
Datei-Upload
Der Datei-Upload bietet die Möglichkeit, PDF-Dateien hochzuladen.
Die Konfiguration des Datei-Uploads funktioniert identisch zum Bild-Upload.
Im Frontend:
Datumsfeld
Mit dem Datumsfeld geben Sie dem Kunden die Möglichkeit, der Bestellung ein Datum hinzuzufügen. Dies kann beispielsweise ein Datum für eine Gravur oder ein Eventdatum sein.
Neben den üblichen Einstellungen dieser Option gibst Du hier einen Platzhalter (1) an, welcher im Datumsfeld angezeigt wird, bevor der Kunde ein Datum ausgewählt hat. Außerdem kannst Du ein frühestens Datum (2) und ein spätestens Datum (3) angeben.
Im Frontend:
Farbauswahl
Über die Farbauswahl gibst Du dem Kunden die Möglichkeit für den Artikel eine oder mehrere Farben auszuwählen. Ähnlich wie bei dem Auswahlfeld oder der Bildauswahl kannst Du auch bei der Farbauswahl der Option Unterelemente hinzufügen, welche jeweils für eine Farbe steht.
Nachdem Du der Option auf der linken Seite ein oder mehrere Unterelemente hinzugefügt hast, kannst Du neben dem Namen und der Bestellnummer dem Element auch eine Farbe (1) zuweisen. Auch für die Farbauswahl lässt sich sowohl für die komplette Option als auch für die einzelnen Elemente ein Zuschlag definieren.
Im Frontend:
Handelt es sich um eine Pflichtoption, steht das Element Keine Auswahl nicht zur Verfügung.
HTML-Editor
Der HTML-Editor bietet die Möglichkeit, einen Text mit einfachen Formatierungsfunktionen einzugeben. Der eingegebene Text wird in der gleichen Form bei der Bestellung übermittelt, eine Konvertierung erfolgt nicht.
Neben dem Namen für die Option sind keine weiteren Pflichtangaben notwendig.
Optional kann die Eingabe im HTML-Editor als Pflichtoption markiert werden. In diesem Fall kann der Kunde das Produkt nur zum Warenkorb hinzufügen, wenn er eine Eingabe vorgenommen hat.
Zusätzlich kann eine Beschreibung hinterlegt werden, um dem Kunden weitere Informationen zur Verfügung zu stellen.
Die Options-Produktnummer kann optional gepflegt werden und wird dann in der Bestellbestätigung und der Rechnung ausgewiesen.
Informationen zu den möglichen Zuschlägen für die Option findest Du hier.
Im Frontend:
Zugriff auf die vom Kunden eingegebenen Daten:
Die vom Kunden getätigten Eingaben kannst Du in der Bestellung in der entsprechenden Position einsehen. Hierzu kannst Du die Konfiguration über das "..."-Menü aufrufen.
Textbereich
Der Textbereich lässt den Kunden einen Text zu dem Artikel hinzufügen. Im Vergleich zu dem Textfeld werden beim Textbereich auch Umbrüche berücksichtigt. Der Kunde hat hier also die Möglichkeit auch mehrzeilige Texte zu übergeben.
Hierzu gibst Du an, wie kurz (2) bzw. wie lang (3) der vom Kunden einzugebende Text sein darf. Außerdem kannst Du einen Platzhalter (1) angeben, welcher angezeigt wird, solange der Kunde noch keinen Text eingegeben hat.
Im Frontend:
Textfeld
Mit dem Textfeld bietest Du dem Kunden die Möglichkeit, dem Artikel einen einzeiligen Text hinzuzufügen. Dies kann beispielsweise der Text für eine Gravur oder ähnliches sein.
Hierzu gibst Du wie beim Textbereich an, wie kurz (2) und wie lang (3) der Text maximal sein darf. Wie beim Textbereich gibst Du auch hier einen Platzhalter (1) an, welcher angezeigt wird, solange der Kunde noch keinen Text eingegeben hat.
Im Frontend:
Zahlenfeld
Mit dem Zahlenfeld stellst Du dem Kunden die Möglichkeit zur Verfügung, dem Produkt eine Zahl hinzuzufügen. Dies kann beispielsweise die Anzahl eines bestimmten Einzelteils oder die Länge einer Zusatzkomponente sein.
Der minimale Wert (1) und maximale Wert (2) geben an, welche Daten in dieses Feld vom Kunden eingetragen werden können
Die Schrittweite (3) legt fest, in welchen Schritten die Zahlen eingegeben werden können. Es sind auch Kommastellen möglich. Beispiel: Schrittweite 0,5 - Es können Eingaben 0; 0,5; 1; 1,5; 2; 2,5 usw. verwendet werden.
Der Standardwert (4) gibt an, welcher Wert vorausgewählt ist.
Im Frontend:
Zeitauswahlfeld
Im Zeitauswahlfeld kannst Du den Kunden eine Zeit angeben lassen. Dies kann beispielsweise die Startzeit für ein Event sein.
Der Platzhalter (1) gibt an, wie das Feld vor der Eingabe durch den Kunden gefüllt ist. Zudem gibst Du durch die Start- (2) und Endzeit (3) an, in welchem Zeitraum der Kunde sich eine Zeit auswählen darf.
Im Frontend:
Optionsabhängige Zuschläge definieren
Du hast die Möglichkeit, bei jeder Option zusätzlich Zuschläge zu definieren. Hierzu stehen Dir in der Konfiguration der einzelnen Optionen entsprechende Funktionen zur Verfügung, um entweder absolute oder relative Zuschläge zu erheben.
Absolute Zuschläge
Über den Schalter Relativer Zuschlag (1) kannst Du zwischen der Eingabe von absoluten und relativen Zuschlägen für die ausgewählte Option wechseln. Es ist pro Option jedoch immer nur eine der beiden Zuschlagsarten möglich.
Bevor Du die Höhe des Zuschlags eingeben kannst, ist es erforderlich, dass Du den Steuersatz (2) für den Zuschlag auswählst. Anschließend kannst Du den Bruttopreis (3) eintragen. Sollte das Schloss-Symbol zwischen Brutto- und Nettopreis (4) geschlossen sein, wird der Nettopreis automatisch anhand der eingetragenen Werte ermittelt. Um einen abweichenden Nettopreis zu hinterlegen, klicke einmal auf das Schloss-Symbol um dieses zu öffnen. Hierdurch ist der Nettopreis nicht mehr an den Bruttopreis gebunden.
Der Erweiterte Zuschlag (5) steht bei absoluten Zuschlägen erst nach Auswahl eines Steuersatzes zur Verfügung und bietet Dir die Möglichkeit, anhand von Rule-Builder-Regeln für die verschiedenen, im Shop hinterlegten Währungen eigene Aufschläge zu definieren.
Über die Checkbox Zuschlag einmal pro Bestellung (6) kannst Du festlegen, ob der Zuschlag in einer Bestellung nur einmal berechnet werden soll, auch wenn die Option mehrfach verwendet wird.
Nachdem Du einen Steuersatz ausgewählt hast, steht Dir zusätzlich die Funktion der Währungsabhängigen Preise (7) zur Verfügung. Hierüber hast Du die Möglichkeit, für jede hinterlegte Währung einen eigenen Zuschlag zu definieren. Im Standard wird der Preis der Standardwährung vererbt und mittels des in den Währungen hinterlegten Umrechnungsfaktors berechnet. Solltest Du abweichende Zuschläge für eine Währung hinterlegen wollen, kannst Du die Vererbung mit einem Klick auf das Ketten-Symbol vor dem Namen der Währung aufheben und einen eigenen Zuschlag eintragen.
Relative Zuschläge
Relative Zuschläge berechnen sich dynamisch anhand Produktpreises und des hinterlegten Prozentsatzes für den Zuschlag.
Um einen relativen Zuschlag zu verwenden, aktiviere den Schalter Relativer Zuschlag (1).
Zur Berechnung des Zuschlags hinterlege einen Steuersatz (2) und den relativen Zuschlag (3).
Solltest Du tiefergehende Konfigurationen für den Zuschlag verwenden wollen, kannst Du den Erweiterten Zuschlag (4) aktivieren.
Hier hast Du die Möglichkeit, anhand von Rule-Builder-Regeln unterschiedliche Aufschläge zu definieren.
Über die Checkbox Zuschlag einmal pro Bestellung (6) kannst Du festlegen, ob der Zuschlag in einer Bestellung nur einmal berechnet werden soll, auch wenn die Option mehrfach verwendet wird.
Optionen untereinander ausschließen
Wenn Du mindestens 2 Optionen angelegt hast, die nicht als Pflichtoption gekennzeichnet sind, wird die Möglichkeit zum gegenseitigen Ausschluss von Optionen eingeblendet.
Um eine Ausschluss-Kombination anzulegen, klicke auf den Button Ausgeschlossene Kombination hinzufügen. Im sich nun öffnenden Modal kannst Du die weitere Konfiguration vornehmen.
Zunächst vergebe einen Namen für die Kombination, anhand dessen Du auch später noch erkennen kannst, was Du hier genau konfiguriert hast.
Für die eigentliche Konfiguration kannst Du nun aus den angelegten Optionen wählen, die nicht als Pflichtoption oder Mehrfachauswahl angelegt sind.
Bei diesen Optionen wählst Du dann zusätzlich aus, ob der Ausschluss erfolgen soll, wenn der Kunde dort eine Eingabe gemacht hat oder wenn das Feld leer ist. Somit ist es auch möglich, Optionen miteinander zu kombinieren und eine Eingabe bei einem Feld zu fordern, wenn ein anderes Feld ebenfalls gefüllt wurde.
Vorlage einem Produkt zuweisen
Nachdem Du eine Vorlage mit den gewünschten Optionen angelegt hast, kannst Du diese nun einem Produkt zuordnen, damit der Kunde dieses Produkt individualisieren kann.
Hierzu öffnest Du die Produktkonfiguration von dem Produkt, welches eine Individualisierungsmöglichkeit erhalten soll. Im Reiter Spezifikation findest Du den Menüpunkt Custom Products, in welchem Du nun eine Produktvorlage aus Custom Products zuordnen kannst.
Frontend
Normaler Modus
Im Frontend werden die Optionen aus Custom Products im Standard Responsive Theme oberhalb des In den Warenkorb Buttons angezeigt.
Hierbei lassen sich die einzelnen Optionen der Produktvorlage vom Kunden ausklappen (1) und einzeln bearbeiten.
Handelt es sich bei einer Option um ein Pflichtfeld (2), wird dies entsprechend angezeigt. Auch eventuelle Zuschläge (3) für eine Option werden eingeblendet. (Zuschläge für ein Element innerhalb einer Option werden neben dem Element angezeigt). Wenn ein Kunde eine Option bzw. ein Element mit einem Zuschlag ausgewählt hat, wird dies in der unteren Übersicht Pro Stück Aufschläge (4) zusammengefasst.
Der Kunde hat nun die Möglichkeit die vorgenommene Konfiguration eines Custom Products Produkts per Link zu teilen (5). Zudem kann über die Schaltfläche bestimmt werden, ob dieser Link nur einmalig aufgerufen werden kann oder nicht.
Schritt für Schritt Modus
Wenn Du in der Produktvorlage den Schritt für Schritt Modus aktiviert hast, werden die verfügbaren Optionen im Frontend nicht direkt angezeigt. Stattdessen befindet sich oberhalb des In den Warenkorb Buttons der Bereich für die Individualisierung (1) des Produkts. Über den Button Produkt Konfigurieren (2) wird der Kunde dann Schritt für Schritt durch die Optionen geleitet. Wenn ein Kunde eine Option bzw. ein Element mit einem Zuschlag ausgewählt hat, wird dies in der unteren Übersicht Pro Stück Aufschläge (3) zusammengefasst.
Der Kunde hat nun die Möglichkeit, die vorgenommene Konfiguration eines Custom Products Produkts per Link zu teilen (4). Zudem kann über die Schaltfläche bestimmt werden, ob dieser Link nur einmalig aufgerufen werden kann oder nicht.
Der Kunde wird Schritt für Schritt durch die Optionen geführt und kann den Artikel dann in den Warenkorb legen, sobald alle Pflicht Optionen ausgefüllt wurden.
Ausgabe von Custom Products Optionen auf der Rechnung
Die einzelnen Custom Products Optionen werden als eigene Positionen in der Rechnung aufgeführt. Solltest Du für die Option eine eigene Produkt-Nummer vergeben haben, wird diese ebenfalls mit angezeigt.
Bestellbestätigung anpassen
Im Standard wird in der Bestellbestätigung, die der Kunde per Mail erhält alle Optionen aufgeführt, welche Custom Products Optionen der Kunde gewählt hat. Ab der Erweiterungsversion 3.1.1 werden in dem Standard Template auch die exakten Inhalte wie z.B. der Text im Textfeld, die Zahl im Zahlenfeld oder das gewählte Datum aus dem Datumsfeld in der Rechnung und der Bestellbestätigung ausgegeben. Dennoch sind hier Anpassungen im E-Mail-Template der Bestellbestätigung möglich.
Verwendest Du eine ältere Version der Erweiterung als 3.1.1 sind diese Anpassungen notwendig, damit die Custom Products Details in der Bestellbestätigung und in der Rechnung angezeigt werden.
Im Standard E-Mail-Template werden die einzelnen Custom Produkt Optionen als einzelne Position aufgeführt. Dis wird durch eine For-Schleife ermöglicht, welche für jede Option eine neue Reihe anlegt. Die Tabelle mit der integrierten For-Schleife sieht im Standard HTML E-Mail-Template so aus:
<table width="80%" border="0" style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">
<tr>
<td bgcolor="#F7F7F2" style="border-bottom:1px solid #cccccc;"><strong>Pos.</strong></td>
<td bgcolor="#F7F7F2" style="border-bottom:1px solid #cccccc;"><strong>Bezeichnung</strong></td>
<td bgcolor="#F7F7F2" style="border-bottom:1px solid #cccccc;"><strong>Menge</strong></td>
<td bgcolor="#F7F7F2" style="border-bottom:1px solid #cccccc;"><strong>Preis</strong></td>
<td bgcolor="#F7F7F2" style="border-bottom:1px solid #cccccc;"><strong>Summe</strong></td>
</tr>
{% for lineItem in order.lineItems %}
<tr>
<td style="border-bottom:1px solid #cccccc;">{{ loop.index }} </td>
<td style="border-bottom:1px solid #cccccc;">
{{ lineItem.label|u.wordwrap(80) }}<br>
{% if lineItem.payload.options is defined and lineItem.payload.options|length >= 1 %}
{% for option in lineItem.payload.options %}
{{ option.group }}: {{ option.option }}
{% if lineItem.payload.options|last != option %}
{{ " | " }}
{% endif %}
{% endfor %}
<br/>
{% endif %}
{% if lineItem.payload.productNumber is defined %}Artikel-Nr: {{ lineItem.payload.productNumber|u.wordwrap(80) }}{% endif %}
</td>
<td style="border-bottom:1px solid #cccccc;">{{ lineItem.quantity }}</td>
<td style="border-bottom:1px solid #cccccc;">{{ lineItem.unitPrice|currency(currencyIsoCode) }}</td>
<td style="border-bottom:1px solid #cccccc;">{{ lineItem.totalPrice|currency(currencyIsoCode) }}</td>
</tr>
{% endfor %}
</table>
Um nun für jede ausgewählte Custom Products Option den dazugehörigen Inhalt auszugeben kannst Du an der passenden Stelle folgenden Code einfügen.
{% if lineItem.payload.type is defined %}
{% if lineItem.payload.type == "textfield" %}
{{ lineItem.payload.value }}
<br/>
{% elseif lineItem.payload.type == "textarea" %}
{{ lineItem.payload.value }}
<br/>
{% elseif lineItem.payload.type == "numberfield" %}
{{ lineItem.payload.value }}
<br/>
{% elseif lineItem.payload.type == "datetime" %}
{{ lineItem.payload.value|date("d.m.Y") }}
<br/>
{% elseif lineItem.payload.type == "timestamp" %}
{{ lineItem.payload.value|date("H:i:s") }} Uhr
<br/>
{% elseif lineItem.payload.type == "htmleditor" %}
{{ lineItem.payload.value }}
<br/>
{% elseif lineItem.payload.type == "imageupload" %}
{% for media in lineItem.payload.media %}
{{ media.filename }} <br/>
{% endfor %}
<br/>
{% elseif lineItem.payload.type == "fileupload" %}
{% for media in lineItem.payload.media %}
{{ media.filename }} <br/>
{% endfor %}
<br/>
{% endif %}
{% endif %}
Wie Du siehst enthält der Code für jede mögliche Custom Products Option eine eigene if- bzw. ifelse-Abfrage. Für die Optionen Auswahlfeld, Bildauswahl, Checkbox und Farbauswahl ist keine Angabe des Inhaltes notwendig. Hier wählt der Kunde eine bereits bestehende Auswahl, dessen Name mit in die jeweilige Position ausgegeben wird.
Beispiel im Standard E-Mail-Template
Wenn Du den Code in das Standard HTML E-Mail-Template einfügst, sieht das Template folgendermaßen aus:
<div style="font-family:arial; font-size:12px;">
{% set currencyIsoCode = order.currency.isoCode %}
Hallo {{order.orderCustomer.salutation.letterName }} {{order.orderCustomer.firstName}} {{order.orderCustomer.lastName}},<br>
<br>
Ihre Bestellung ist am {{ order.orderDateTime|date }} bei uns eingegangen.<br>
<br>
Bestellnummer: {{ order.orderNumber }}<br>
<br>
Sobald ein Zahlungseingang erfolgt ist, erhalten Sie eine separate Benachrichtigung und Ihre Bestellung wird verarbeitet.<br>
<br>
Den aktuellen Status Ihrer Bestellung können Sie jederzeit über diesen Link abrufen: {{ rawUrl('frontend.account.order.single.page', { 'deepLinkCode': order.deepLinkCode}, salesChannel.domains|first.url) }}<br>
Über diesen Link können Sie auch die Bestellung bearbeiten, die Zahlungsart wechseln oder nachträglich eine Zahlung durchführen.<br>
<br>
<strong>Informationen zu Ihrer Bestellung:</strong><br>
<br>
<table width="80%" border="0" style="font-family:Arial, Helvetica, sans-serif; font-size:12px;">
<tr>
<td bgcolor="#F7F7F2" style="border-bottom:1px solid #cccccc;"><strong>Pos.</strong></td>
<td bgcolor="#F7F7F2" style="border-bottom:1px solid #cccccc;"><strong>Bezeichnung</strong></td>
<td bgcolor="#F7F7F2" style="border-bottom:1px solid #cccccc;"><strong>Menge</strong></td>
<td bgcolor="#F7F7F2" style="border-bottom:1px solid #cccccc;"><strong>Preis</strong></td>
<td bgcolor="#F7F7F2" style="border-bottom:1px solid #cccccc;"><strong>Summe</strong></td>
</tr>
{% for lineItem in order.lineItems %}
<tr>
<td style="border-bottom:1px solid #cccccc;">{{ loop.index }} </td>
<td style="border-bottom:1px solid #cccccc;">
{{ lineItem.label|u.wordwrap(80) }}<br>
{% if lineItem.payload.options is defined and lineItem.payload.options|length >= 1 %}
{% for option in lineItem.payload.options %}
{{ option.group }}: {{ option.option }}
{% if lineItem.payload.options|last != option %}
{{ " | " }}
{% endif %}
{% endfor %}
<br/>
{% endif %}
{% if lineItem.payload.type is defined %}
{% if lineItem.payload.type == "textfield" %}
{{ lineItem.payload.value }}
<br/>
{% elseif lineItem.payload.type == "textarea" %}
{{ lineItem.payload.value }}
<br/>
{% elseif lineItem.payload.type == "numberfield" %}
{{ lineItem.payload.value }}
<br/>
{% elseif lineItem.payload.type == "datetime" %}
{{ lineItem.payload.value|date("d.m.Y") }}
<br/>
{% elseif lineItem.payload.type == "timestamp" %}
{{ lineItem.payload.value|date("H:i:s") }} Uhr
<br/>
{% elseif lineItem.payload.type == "htmleditor" %}
{{ lineItem.payload.value }}
<br/>
{% elseif lineItem.payload.type == "imageupload" %}
{% for media in lineItem.payload.media %}
{{ media.filename }} <br/>
{% endfor %}
<br/>
{% elseif lineItem.payload.type == "fileupload" %}
{% for media in lineItem.payload.media %}
{{ media.filename }} <br/>
{% endfor %}
<br/>
{% endif %}
{% endif %}
{% if lineItem.payload.productNumber is defined %}Artikel-Nr: {{ lineItem.payload.productNumber|slice(0,9) }}{% endif %}
</td>
<td style="border-bottom:1px solid #cccccc;">{{ lineItem.quantity }}</td>
<td style="border-bottom:1px solid #cccccc;">{{ lineItem.unitPrice|currency(currencyIsoCode) }}</td>
<td style="border-bottom:1px solid #cccccc;">{{ lineItem.totalPrice|currency(currencyIsoCode) }}</td>
</tr>
{% endfor %}
</table>
{% set delivery = order.deliveries.first %}
<p>
<br>
<br>
Versandkosten: {{order.deliveries.first.shippingCosts.totalPrice|currency(currencyIsoCode) }}<br>
Gesamtkosten Netto: {{ order.amountNet|currency(currencyIsoCode) }}<br>
{% for calculatedTax in order.price.calculatedTaxes %}
{% if order.taxStatus is same as('net') %}zzgl.{% else %}inkl.{% endif %} {{ calculatedTax.taxRate }}% MwSt. {{ calculatedTax.tax|currency(currencyIsoCode) }}<br>
{% endfor %}
<strong>Gesamtkosten Brutto: {{ order.amountTotal|currency(currencyIsoCode) }}</strong><br>
<br>
<strong>Gewählte Versandart:</strong> {{ delivery.shippingMethod.name }}<br>
{{ delivery.shippingMethod.description }}<br>
<br>
{% set billingAddress = order.addresses.get(order.billingAddressId) %}
<strong>Rechnungsadresse:</strong><br>
{{ billingAddress.company }}<br>
{{ billingAddress.firstName }} {{ billingAddress.lastName }}<br>
{{ billingAddress.street }} <br>
{{ billingAddress.zipcode }} {{ billingAddress.city }}<br>
{{ billingAddress.country.name }}<br>
<br>
<strong>Lieferadresse:</strong><br>
{{ delivery.shippingOrderAddress.company }}<br>
{{ delivery.shippingOrderAddress.firstName }} {{ delivery.shippingOrderAddress.lastName }}<br>
{{ delivery.shippingOrderAddress.street }} <br>
{{ delivery.shippingOrderAddress.zipcode}} {{ delivery.shippingOrderAddress.city }}<br>
{{ delivery.shippingOrderAddress.country.name }}<br>
<br>
{% if billingAddress.vatId %}
Ihre Umsatzsteuer-ID: {{ billingAddress.vatId }}
Bei erfolgreicher Prüfung und sofern Sie aus dem EU-Ausland
bestellen, erhalten Sie Ihre Ware umsatzsteuerbefreit. <br>
{% endif %}
<br/>
Den aktuellen Status Ihrer Bestellung können Sie auch jederzeit auf unserer Webseite im Bereich "Mein Konto" - "Meine Bestellungen" abrufen: {{ rawUrl('frontend.account.order.single.page', { 'deepLinkCode': order.deepLinkCode}, salesChannel.domains|first.url) }}
</br>
Für Rückfragen stehen wir Ihnen jederzeit gerne zur Verfügung.
</p>
<br>
</div>
Beispiel in der HTML E-Mail
In einem Beispiel, in welchem ein Textfeld und ein Datumsfeld ausgefüllt wurden sieht die Bestellbestätigung mit dem oben eingefügten Code wie folgt aus:
