E-Mail bei verfügbarem Artikel

 

E-Mail an Kunden senden, wenn Artikel wieder verfügbar ist

Artikel sind unter Umständen kurzfristig nicht lieferbar. Kunden sollen die Möglichkeit haben, ihre E-Mail-Adresse direkt bei nicht lieferbaren Artikeln zu hinterlegen, damit sie informiert werden, wenn der Artikel wieder auf Lager ist. Der Versand soll einmalig erfolgen und nicht jedes Mal, wenn der Netto-Bestand des Artikels positiv wird. In diesem Fallbeispiel zeigen wir Ihnen, wie Sie vorgehen.

E-Mail-Vorlage erstellen

Legen Sie zunächst eine E-Mail-Vorlage an. Der Text dieser E-Mail wird an Kunden versendet, die ihre E-Mail-Adresse hinterlegt haben, wenn ein Artikel wieder auf Lager ist. Unten finden Sie eine Liste möglicher Template-Variablen und -Funktionen für diese E-Mail-Vorlage. Wir stellen Ihnen außerdem einen Beispieltext zur Verfügung, den Sie an Ihre Anforderungen anpassen können.

Mögliche Template-Variablen und -Funktionen für eine E-Mail-Vorlage zur Artikelverfügbarkeit:

Variable/Funktion Erläuterung
$ItemASIN Amazon Standard Ident Number (ASIN) des Artikels
$ItemEAN Internationale Artikelnummer (EAN)
$ItemImageURL URL zum Artikelbild
$ItemISBN ISBN-Code des Artikels
$ItemModel Modellbezeichnung des Artikels
$ItemName Artikelname
$ItemNumber Artikelnummer
$ItemPrice Brutto-Artikelpreis
$ItemPriceNet Netto-Artikelpreis
$ItemProducerName Artikelhersteller
$VariantName Artikelvariante
{% Link_Item($ItemID) %} Link zum Artikel im Webshop

Tab. 1: Mögliche Template-Variablen/-Funktionen für eine E-Mail-Vorlage zur Artikelverfügbarkeit

Unten finden Sie einen Beispieltext für eine E-Mail-Vorlage, den Sie als Muster verwenden und an Ihre Anforderungen anpassen können. Diesen Text fügen Sie im Tab Inhalt » HTML-formatierter Text der E-Mail-Vorlage ein. Gehen Sie wie unten beschrieben vor, um diesen oder einen anderen Text in der E-Mail-Vorlage zu hinterlegen.

Text für E-Mail-Vorlage hinterlegen:
  1. Legen Sie eine neue E-Mail-Vorlage im HTML-Format an.
  2. Kopieren Sie den Beispieltext (Nachricht) in das Tab E-Mail-Nachricht » Inhalt » HTML-formatierter Text mit dem Syntax-Editor ein.
  3. Passen Sie den Text und die HTML-Formatierung des Beispieltexts an Ihre Anforderungen an.
  4. Fügen Sie im Tab Artikelliste das darauffolgende Beispiel mit dem Syntax-Editor ein.
Nachricht
<p>Liebe Kundin, lieber Kunde,</p> <p>Sie erhalten diese E-Mail, weil Sie sich für den folgenden Artikel in unserem Webshop interessieren:</p> $ItemListHTML <p>Wir haben eine gute Nachricht für Sie: <strong>Dieser Artikel ist jetzt wieder verfügbar!</strong></p> <p>Wir freuen uns auf Ihren Einkauf!</p> $SignatureHTML
Artikelliste
<p><strong>$ItemName</strong><br /> Artikelnummer: $ItemNumber<br /> $ItemPrice EUR </p> <p><a href="{% Link_Item($ItemID) %}">$ItemName</a></p> <hr>

E-Mail-Vorlage für automatischen E-Mail-Versand verknüpfen

Nun verknüpfen Sie die E-Mail-Vorlage mit der Option Benachrichtigung bei verfügbarem Artikel. Die Vorlage greift, wenn ein Artikel, bei dem Interessenten ihre E-Mail-Adresse hinterlegt haben, wieder lieferbar ist. Gehen Sie dazu wie unten beschrieben vor.

E-Mail-Vorlage für automatischen E-Mail-Versand verknüpfen:
  1. Öffnen Sie das Menü Einstellungen » Mandant (Shop) » Standard » E-Mail » Automatischer Versand.
  2. Wählen Sie bei der Option Benachrichtigung bei verfügbarem Artikel die E-Mail-Vorlage aus dem Dropdown-Menü.

Beispiel-Code für Formular bearbeiten und einbinden

Nun binden Sie ein Formular in Ihr Design ein, das angezeigt wird, wenn ein Artikel nicht lieferbar ist. Als Minimalanforderung sollte dieses Formular aus einem Eingabefeld und einem Button bestehen. In das Feld geben Interessenten ihre E-Mail-Adresse ein. Durch Klick auf den Button erklären sie sich damit einverstanden, eine E-Mail zu erhalten, wenn der Artikel wieder verfügbar ist. Über den REST-Aufruf /rest/positive_stock_notification/ wird die E-Mail-Adresse gespeichert und alle hinterlegten E-Mail-Adressen benachrichtigt, sobald der Artikel einen positiven Netto-Bestand hat.

Weiter unten finden Sie einen Beispiel-Code, der für unser Responsive-Design Callisto Light optimiert ist. Verwenden Sie diesen Code als Basis, um das Formular in Ihr Design einzubinden. Passen Sie den Code an Ihre Anforderungen an, bevor Sie ihn in Ihrem Webshop verwenden. Gehen Sie wie unten beschrieben vor, um den Beispiel-Code in Ihr Design einzubinden.

Beispiel-Code in Design einbinden:
  1. Passen Sie den Beispiel-Code unten an Ihre Anforderungen an.
  2. Kopieren Sie den Code in die Zwischenablage (Strg + C bzw. Cmd + C).
  3. Öffnen Sie das Menü CMS » Webdesign und dort dann Layout » ItemView » ItemViewSingleItem.
  4. Fügen Sie das Code-Beispiel an geeigneter Stelle in das Template ein.

<div data-plenty="stocknotification" {% if $AvailabilityId <= 2 %}style="display:none"{% endif %}> <div class="row margin-bottom-1"> <h3>Wir melden uns bei dir,<br>wenn der Artikel wieder verfügbar ist!</h3> <div class="col-lg-7 col-md-6 col-sm-6 col-xs-12"> <input type="text" placeholder="deine E-Mail" class="emailNotification PlentyText" /> </div> <div class="col-lg-5 col-md-6 col-sm-6"> <button type="button" data-href="positive_stock_notification/" data-loading-text="Bitte warten..." class="btn btn-primary btnNotification" autocomplete="off"> Absenden </button> </div> </div> {# Im folgenden Container wird das Ergebnis dargestellt #} <div class="responseNotification margin-bottom-1 collapse"></div> <script type="text/javascript"> {# Ergänzt die aktuelle Attributauswahl, sofern dieser Artikel Attribute hat #} {% if $AttributeExist %} function getAttributeValueSetID() { var aAttrID = []; $('[name^=ArticleAttribute]').each(function(index) { aAttrID.push(jQuery(this).val()); }); return aAttrID; } {% endif %} var $btn = null; function showMessage(msg,state) { $('.responseNotification').text(msg).addClass(state); $('.responseNotification').fadeIn(); $btn.button('reset'); setTimeout(function() { $('.responseNotification').hide().removeClass(state); }, 3000); } $(document).ready(function() { jQuery('.btnNotification').click(function() { $btn = $(this).button('loading'); var $data = "positive_stock_notification_post"; var $path = jQuery(this).data("href"); {# Erstellt das Datenobjekt für den Request #} var $postObjects = { positive_stock_notification_post: { ItemID:$ID, Email:jQuery('.emailNotification').val(), {% if $AttributeExist %}AttributeValues:getAttributeValueSetID(),{% endif %} PriceID:$PriceID } } {# Hier wird der REST-Request ausgeführt und das Ergebnis ausgewertet #} $.ajax("/rest/"+$path, { data: JSON.stringify($postObjects[$data]), dataType: 'json', type: 'POST', success: function(response) { showMessage("E-Mail-Adresse "+response.data.Email+" wurde erfolgreich gespeichert.", "plentyMessageBox"); }, error: function(response) { showMessage("E-Mail-Adresse nicht gespeichert. Prüfe deine E-Mail-Adresse.", "PlentyErrorMessageBox"); } } ); return false; }); }); </script> </div>

Wenn im Menü Einstellungen » Mandant (Shop) » Standard » Artikelansichten » Grundeinstellungen für die Einstellung Attribut-Verfügbarkeit die Client-Prüfung aktiviert ist, wird durch das nachfolgende Code-Beispiel das zuvor erzeugte Formular je nach Verfügbarkeit der Variante dynamisch ein- und ausgeblendet.

Beispiel-Code in Design einbinden:
  1. Passen Sie den Beispiel-Code unten an Ihre Anforderungen an.
  2. Kopieren Sie den Code in die Zwischenablage (Strg + C bzw. Cmd + C).
  3. Öffnen Sie das Menü CMS » Webdesign und dort dann Layout » ItemView » ItemViewSingleItem.
  4. Suchen Sie nach der Code-Zeile $(window).on('variationChanged', function(event, variation) {.
  5. Fügen Sie das Code-Beispiel unterhalb der Code-Zeile ein.
$(window).on('variationChanged', function(event, variation) { //Bereits vorhanden .... if(variation.availabilityId > 2) { $('[data-plenty="stocknotification"]').show(); } else { $('[data-plenty="stocknotification"]').hide(); } });
Nach oben