Code-Beispiele

Auf dieser Seite findest du Code-Beispiele für das Code-Widget, den Betreff und den Expertenmodus, die du einfach in deine EmailBuilder-Vorlagen kopieren kannst.

Klicke auf einen Eintrag in der folgenden Liste, um direkt in das entsprechende Unterkapitel weitergeleitet zu werden:

1. Code-Beispiele für das Code-Widget

Setze in deinen E-Mail-Vorlagen Fallunterscheidungen nach den Prinzipien der if-Abfragen ein oder verwende for-Schleifen. In den folgenden Unterkapiteln findest du einige if-Abfragen und for-Schleifen, die du einfach in dein Code-Widget kopieren kannst.

Klicke auf einen der folgenden Links, um direkt in das entsprechende Unterkapitel mit dem Code-Beispiel weitergeleitet zu werden:

1.1. Code-Beispiel: Versandprofil

Füge in das Code-Widget einen Code ein, der bewirkt, dass ein Hinweis bezüglich der Spedition und Kontaktaufnahme in der E-Mail an deine Kund:innen nur angezeigt wird, wenn der Versanddienstleister im Versandprofil eine Spedition ist. In unserem Beispiel hat das Versandprofil mit der Spedition die ID 6.

{% if order.formattedShipping.profileId == 6 %}

<strong>INFORMATIONEN ZU IHRER LIEFERUNG</strong>

<p>Voraussichtliches Lieferdatum Ihrer Sendung: {{order.formattedDates.estimatedDeliveryDate ? ( order.formattedDates.estimatedDeliveryDate | date('d.m.Y') ) : ''}}</p>

<p>Am Tag der Lieferung wird {{order.formattedShipping.providerName}} Sie telefonisch kontaktieren, um mit Ihnen den Lieferzeitpunkt an Ihrer Haustür zu vereinbaren.</p>
<p>
Ihre Telefonnummer: {{order.formattedAddresses.invoiceAddress.formattedOptions.telephone}}
<br>Sollte diese Nummer nicht korrekt sein, setzen Sie sich bitte mit uns in Verbindung.
</p>

<p>
Wenn Sie Ihre Lieferung verfolgen oder den Liefertermin verschieben möchten, klicken Sie auf den folgenden Link:
<br>{{order.formattedShipping.trackingURL}}
</p>
{% endif %}

1.2. Code-Beispiel: Bankdaten

Füge in das Code-Widget einen Code ein, der bewirkt, dass deine Bankdaten in der E-Mail an deine Kund:innen nur angezeigt werden, wenn sie im plentyShop die Zahlungsart Vorkasse (ID 0) gewählt haben.

{% if order.formattedProperties.paymentMethod == 0 %}

<strong>BANKDATEN</strong>

<p>Verwenden Sie zur Zahlung per Vorkasse bitte die folgenden Bankdaten:</p>
<p>
Bankinstitut: {{globals.bank.name}}
<br>BIC: {{globals.bank.bic}}
<br>Kontonummer: {{globals.bank.iban}}
<br>Kontoinhaber:in: {{globals.bank.owner}}
</p>
<p>
Verwenden Sie bitte exakt diesen Verwendungszweck:
<br>Auftrags-ID: {{order.id}}, Kund:innen-ID: {{contact.id}}
</p>
<p>
Internationale Kontodaten:
<br>IBAN: {{globals.bank.iban}}
<br>Swift: {{globals.bank.bic}}
</p>

{% endif %}

1.3. Code-Beispiel: Auftragspositionen

Füge in das Code-Widget einen Code ein, der bewirkt, dass die Auftragspositionen mit den Varianten-IDs, den Artikelnamen, der Artikelanzahl und dem Preis in einer Tabelle angezeigt werden.

<strong>Auftragspositionen</strong>

<p>Artikel des Auftrags mit der ID {{order.id}}:</p>
<table>
  <tr>
    <th>ID</th>
    <th>Artikelbild</th>
    <th>Name</th>
    <th>Anzahl</th>
    <th>Preis</th>
  </tr>
  {% for orderItem in order.orderItems %}
  <tr>
    <td>{{orderItem.variation.id}}</td>
    <td><img src="{{orderItem.formattedImageUrl}}" alt="Artikelbild" height="50px" width="auto" /></td>
    <td>{{orderItem.orderItemName}}</td>
    <td>{{orderItem.quantity}}</td>
    <td>{{orderItem.formattedAmounts.grossPrice}}</td>
  </tr>
  {% endfor %}
</table>

1.4. Code-Beispiel: Artikel des Auftrags als Liste

Füge in das Code-Widget einen Code ein, der bewirkt, dass die Artikel-IDs und die Artikelmenge aller Artikel, die im Auftrag enthalten sind, als Liste angezeigt werden.

{% for orderItem in order.orderItems %}
{{ orderItem.quantity }} x {{ orderItem.orderItemName }} <br>
ID: {{ orderItem.variation.itemId }} <br>
{{ order.formattedSubtotals.currencyCode }} {{ orderItem.formattedAmounts.grossPrice }}
--- <br>
{% endfor %}

1.5. Code-Beispiel: Artikel des Auftrags kommasepariert in einer Zeile

Füge in das Code-Widget einen Code ein, der bewirkt, dass die Artikel-IDs aller Artikel, die im Auftrag enthalten sind, hintereinander kommasepariert in einer Zeile angezeigt werden.

{{ order.orderItems| map(p => "#{p.variation.itemId}")|join(', ') }}

1.6. Code-Beispiel: Header abhängig vom Mandanten anzeigen

Füge in das Code-Widget im Header einen Code ein, der bewirkt, dass der Header abhängig von der plenty ID für den von dir gewählten Mandanten angezeigt wird.
Hinweis: Vergiss nicht, die plenty IDs im Code-Beispiel durch deine korrekten IDs zu ersetzen und die korrekten Logos einzufügen.

{% if order.plentyId == 1234 %}
    <!-- Inhalt des Headers für Mandant 1 -->
    <center><img src="/path/to/shop/logo1.svg" alt="MeinShop Logo 1" /></center> 
{% else if order.plentyId == 5678 %}
    <!-- Inhalt des Headers für Mandant 2 -->
    <center><img src="/path/to/shop/logo1.svg" alt="MeinShop Logo 2" /></center>
{% else if order.plentyId == 2233 %}
    <!-- Inhalt des Headers für Mandant 3 -->
    <center><img src="/path/to/shop/logo1.svg" alt="MeinShop Logo 3" /></center>
{% else if order.plentyId == 4455 %}
    <!-- Inhalt des Headers für Mandant 4 -->
    <center><img src="/path/to/shop/logo1.svg" alt="MeinShop Logo 4" /></center>
{% endif %}
Gleiche Vorgehensweise beim Footer

Gehe anhand des Code-Beispiels genauso vor und füge den Code in das Code-Widget im Footer ein, wenn du auch unterschiedliche Footer abhängig von der plenty ID anzeigen möchtest.

1.7. Code-Beispiel: Datumsformat

Die Einstellung für das Datumsformat, die du im Bereich Spracheinstellungen vorgenommen hast, greifen nicht für datumsbezogene twig expressions, die du im Code-Widget verwendest. Hier musst du die Formatierung also selbst vornehmen.

Beispiel: Wenn du für die englische Datumsschreibweise in den Spracheinstellungen einen Bindestrich gewählt hast, im Code-Widget aber eine der folgenden twig expressions für das Auftragsdatum einfügst, wird in der E-Mail-Vorlage die im Code-Widget verwendete Schreibweise für das Datum ausgegeben. Die Einstellung aus dem Bereich Spracheinstellungen wird hier also überschrieben.

1.7.1. dd.mm.yyyy ohne Uhrzeit

{⁠{ order.formattedDates.createdOnDateAndTime | date('d.m.Y') }⁠}

  • Angezeigtes Ergebnis: 24.04.2023

1.7.2. dd.mm.yyyy mit Uhrzeit (ohne Sekunden)

{⁠{ order.formattedDates.createdOnDateAndTime | date('d.m.Y H:i') ⁠}⁠}

  • Angezeigtes Ergebnis: 24.04.2023 07:28

1.7.3. yyyy-mm-dd mit Uhrzeit (mit Sekunden)

{⁠{ order.formattedDates.createdOnDateAndTime }⁠}

  • Angezeigtes Ergebnis: 2023-04-24 07:28:54

1.8. Code-Beispiel: Zahlenformat

Die Einstellung für das Zahlenformat, die du im Bereich Spracheinstellungen vorgenommen hast, greifen nicht für Zahlenwerte in twig expressions, die du im Code-Widget verwendest. Hier musst du die Formatierung also selbst vornehmen.

Beispiel: Wenn du für die englische Zahlenschreibweise in den Spracheinstellungen einen Punkt als Dezimaltrennzeichen gewählt hast, im Code-Widget aber eine der folgenden twig expressions für den Gesamtrechnungsbetrag einfügst, wird in der E-Mail-Vorlage die im Code-Widget verwendete Schreibweise für den Betrag ausgegeben. Die Einstellung aus dem Bereich Spracheinstellungen wird hier also überschrieben.

1.8.1. Komma als Tausendertrennzeichen und Punkt als Dezimaltrennzeichen

{⁠{ order.formattedGeneral.invoiceTotal }⁠}

  • Angezeigtes Ergebnis: 3,141.59

1.8.2. Punkt als Tausendertrennzeichen und Komma als Dezimaltrennzeichen

{⁠{ order.formattedGeneral.invoiceTotal | number_format(2, ',', '.') }⁠}

  • Angezeigtes Ergebnis: 3.141,59

1.8.3. Kein Tausendertrennzeichen und Komma als Dezimaltrennzeichen

{⁠{ order.formattedGeneral.invoiceTotal | number_format(2, ',', '') }}

  • Angezeigtes Ergebnis: 3141,59

1.9. Text Base64-Kodiert anzeigen

Füge in das Code-Widget einen Code mit dem Twig-Filter |base64_encode ein, der bewirkt, dass der Text oder eine Variable in Base64-Kodierung ausgegeben wird.

{{ `mein text` |base64_encode }}

  • Angezeigter Text: bWVpbiB0ZXh0

1.10. TrustedShops Bewertungs-Link anzeigen

Füge in das Code-Widget einen Code ein, der den Bewertungs-Link für TrustedShops nach Vorgabe von TrustedShops Base64-kodiert anzeigt.

<a href="https://www.trustedshops.de/bewertung/bewerten_XA2A8D35838AF5F63E5EB0E05847B1CB8.html&buyerEmail={{ contact.formattedOptions.emailPrivate |base64_encode }}&shopOrderID={{ order.id |base64_encode }}" target="_blank">Bewerte uns bei TrustedShops</a>

1.11. Tracking-URLs als Liste

Füge in das Code-Widget einen Code ein, der die Tracking-URLs des dazugehörigen Auftrags als Liste anzeigt.

{% for key, trackingUrl in order.formattedShipping.trackingURLList %}
<a href="{{trackingUrl}}" target="_blank">Link {{key}}</a>
{% endfor %}

2. Code-Beispiele für den Betreff

Füge in den Betreff deiner Vorlage einen Code ein, der bewirkt, dass ein bestimmtes Wort am Anfang des Betreffs angezeigt wird, wenn es sich um bestimmte Auftragsherkünfte handelt. In unserem Beispiel wird immer der Begriff [WICHTIG] am Anfang des Betreffs eingefügt, wenn die Herkünfte zwischen 9 und 11 liegen.

{% if order.formattedReferrer.id >= 9 and order.formattedReferrer.id <= 11 %}
[WICHTIG]
{% endif %}
Ihr Auftrag {{order.id}} wurde versandt

3. Code-Beispiele für den Expertenmodus

In diesem Kapitel zeigen wir dir anhand eines Beispiels, wie du komplexe Vorlagen im Expertenmodus verwenden kannst.

Als Beispiel erstellen wir eine Auftragsbestätigung im Expertenmodus. Dafür sind die folgenden Schritte notwendig:

  1. Ordner erstellen, in dem du die Basisvorlage speicherst

  2. Reguläre Vorlage erstellen, die das Widget Auftragspositionen enthält

  3. Basisvorlage mit dem Text für die Auftragsbestätigung erweitern

Erstelle am besten einen Ordner mit dem Namen Hilfsvorlagen und erstelle darin eine Vorlage im Expertenmodus und nenne sie zum Beispiel Basisvorlage. Die Basisvorlage bildet sozusagen das Grundgerüst für deine Vorlage.

{# 
    Diese Vorlage dient zum Definieren des allgemeinen Stylings unserer eigentlichen Vorlagen.
    Dadurch ist es möglich, das Styling verschiedener Vorlagen an einer zentralen Stelle zu definieren und zu pflegen.
#}

<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                font-family: Verdana, Arial, Helvetica, sans-serif;
                background-color: Azure;
            }
        </style>
    </head>
    <body>
        {# Hier wird die Vorlage, welche diese erweitert, eingefügt. #}
        {% block MeineVorlage %}{% endblock %}
    </body>
</html>

In der Auftragsbestätigung möchten wir außerdem die Auftragspositionen anzeigen. Dazu erstellen wir eine weitere "reguläre" Vorlage, in dem sich ausschließlich das Widget Auftragspositionen befindet. In unserem Beispiel hat diese Vorlage die ID 51 und die Sprach-ID für DE ist die 105.

emailbuilder expertenmodus beispiel auftragspositionen widget
Bild 1. Widget Auftragspositionen

Im nächsten Schritt erweitern wir die Basisvorlage mit dem Text für die Auftragsbestätigung. In unserem Beispiel hat die Basisvorlage in DE die ID 103.

{# 
    Allgemeines Styling erweitern.
    Die extends-Anweisung fügt den block *MeineVorlage* in die Vorlage mit der ID 50 ein. Die Vorlagen-ID ist hierbei jedoch nicht relevant, sondern die Sprach-ID der deutschen Vorlage (ID 101).
#}
{% extends 101 %}

{% block MeineVorlage %}

    Guten Tag {{ order.formattedAddresses.invoiceAddress.name2 ~ ' ' ~ order.formattedAddresses.invoiceAddress.name3 }}, </br>
    </br>
    vielen Dank für das entgegengebrachte Vertrauen und Ihre Bestellung mit der ID {{ order.id }}. </br>
    </br>
    Mit dieser Nachricht bestätigen wir, dass Ihre Bestellung bei uns eingegangen ist. Gleichzeitig ist der Kaufvertrag rechtsverbindlich abgeschlossen. </br>
    </br>
    </br>
    <strong>KURZÜBERSICHT</strong> </br>
    </br>
    Ihre Kunden-ID: {{ contact.id }} </br>
    Ihre Auftrags-ID: {{ order.id }} (bitte im Fall von Rückfragen immer angeben) </br>
    Zahlungsart: {{ order.formattedGeneral.methodOfPaymentName }} </br>
    Versand durch: {{ order.formattedShipping.providerName }} </br>
    Warenwert: {{ order.formattedGeneral.valueOfItems }} {{ order.formattedSubtotals.currencySymbol }}</br>
    Versandkosten: {{ order.formattedSubtotals.shippingCostsGross }} {{ order.formattedSubtotals.currencySymbol }}</br>
    Gesamtbetrag inklusive Versandkosten: {{ order.formattedGeneral.invoiceTotal }} {{ order.formattedSubtotals.currencySymbol }}</br>
    </br>
    </br>
    <strong>ARTIKELÜBERSICHT</strong> </br>
    </br>
    
    {# reguläre Vorlage mit Widget *Auftragspositionen* einfügen (Vorlagen-ID: 51, Sprach-ID für DE: 105)#}
    {% include 105 %}

    </br>
    Wir freuen uns darauf, Sie bald wieder in unserem Shop begrüßen zu dürfen!</br>
    </br>
    {{ globals.account.signatureHTML | raw }}</br>
    </br>
    </br>

{% endblock %}