Skip to main content

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, eine E-Mail-Adresse direkt bei nicht lieferbaren Artikeln zu hinterlegen, um informiert zu werden, wenn der Artikel wieder auf Lager ist. Die E-mail soll einmalig versendet werden und nicht jedes Mal, wenn der Netto-Bestand des Artikels positiv wird. In diesem Fallbeispiel zeigen wir dir, wie du dafür vorgehst.

E-Mail-Vorlage erstellen

Lege zunächst eine E-Mail-Vorlage an. Der Text dieser E-Mail wird an Kunden versendet, die eine E-Mail-Adresse hinterlegt haben, wenn ein Artikel wieder auf Lager ist. Unten findest du eine Liste möglicher Template-Variablen und -Funktionen für diese E-Mail-Vorlage. Wir stellen dir außerdem einen Beispieltext zur Verfügung, den du an deine Anforderungen anpassen kannst.

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

Table 1. Mögliche Template-Variablen/-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

Unten findest du einen Beispieltext für eine E-Mail-Vorlage, den du als Muster verwenden und an deine Anforderungen anpassen kansnt. Diesen Text fügst du im Tab Inhalt » HTML-formatierter Text der E-Mail-Vorlage ein. Gehe 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. Lege eine neue E-Mail-Vorlage im HTML-Format an.

  2. Kopiere den Beispieltext (Nachricht) in das Tab E-Mail-Nachricht » Inhalt » HTML-formatierter Text mit dem Syntax-Editor ein.

  3. Passe den Text und die HTML-Formatierung des Beispieltexts an deine Anforderungen an.

  4. Füge 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 deinen 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üpfst du die E-Mail-Vorlage mit der Option Benachrichtigung bei verfügbarem Artikel. Die Vorlage greift, wenn ein Artikel, bei dem Interessenten eine E-Mail-Adresse hinterlegt haben, wieder lieferbar ist. Gehe dazu wie unten beschrieben vor.

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

  1. Öffne das Menü Einrichtung » Mandant » Mandant wählen » E-Mail » Automatischer Versand.

  2. Wähle bei der Option Benachrichtigung bei verfügbarem Artikel die E-Mail-Vorlage aus der Dropdown-Liste.

Beispiel-Code für Formular bearbeiten und einbinden

Nun bindest du ein Formular in dein Design ein, das angezeigt wird, wenn ein Artikel nicht lieferbar ist. Als Minimalanforderung sollte dieses Formular aus einem Eingabefeld und einer Schaltfläche bestehen. In das Feld geben Interessenten eine E-Mail-Adresse ein. Durch Klick auf die Schaltfläche erklärst du dich 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 findest du einen Beispiel-Code, der für unser Responsive-Design Callisto Light optimiert ist. Verwende diesen Code als Basis, um das Formular in dein Design einzubinden. Passe den Code an deine Anforderungen an, bevor du den Code in deinem Webshop verwendest. Gehe wie unten beschrieben vor, um den Beispiel-Code in dein Design einzubinden.

Beispiel-Code in Design einbinden:

  1. Passe den Beispiel-Code unten an deine Anforderungen an.

  2. Kopiere den Code in die Zwischenablage (Strg + C bzw. Cmd + C).

  3. Öffne das Menü CMS » Webdesign und dort dann Layout » ItemView » ItemViewSingleItem.

  4. Füge 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>

		<div class="responseNotification margin-bottom-1 collapse"></div>

	<script type="text/javascript">

		
		{% 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");

	   	   		
	   	   		var $postObjects = {
		           positive_stock_notification_post:
		           {
		                   ItemID:$ID,
		                   Email:jQuery('.emailNotification').val(),
						   {% if $AttributeExist %}AttributeValues:getAttributeValueSetID(),{% endif %}
						   PriceID:$PriceID
		           }
	   	   		}

	   	   		
	   	   		$.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ü Einrichtung » Mandant » Mandant wählen » Artikelansichten » Einstellungen 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. Passe den Beispiel-Code unten an deine Anforderungen an.

  2. Kopiere den Code in die Zwischenablage (Strg + C bzw. Cmd + C).

  3. Öffne das Menü CMS » Webdesign und dort dann Layout » ItemView » ItemViewSingleItem.

  4. Suche nach der Code-Zeile $(window).on('variationChanged', function(event, variation) {.

  5. Füge 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();
	}
});
Zum Seitenanfang