Skip to main content

email when item becomes available

Sending an email to a customer once an item is available

Sometimes items are temporarily out of stock and can not be delivered. Customers should be allowed to save their email addresses if they are interested in purchasing an item that can not be delivered at the moment. The email address is then used to inform the customer once the item is back in stock. The email should only be sent once, rather than every time the item’s net stock is positive. This case example demonstrates how all this is done.

Creating an email template

First, create an email template. Once the item is back in stock, this email will be sent to all of the customers who saved their email addresses. Below, you will find a list of template variables and template functions that can be used for this email template. We also provide you with an example text, which you can customize as needed.

Possible template variables and template functions for an email template regarding item availability:

Table 1. possible template variables and template functions for an email template regarding item availability
Variable/function Explanation

$ItemASIN

Amazon Standard Ident Number (ASIN) of the item

$ItemEAN

International item number (EAN)

$ItemImageURL

Item image URL

$ItemISBN

Item ISBN code

$ItemModel

Item model name

$ItemName

Item name

$ItemNumber

Item number

$ItemPrice

Gross item price

$ItemPriceNet

Net item price

$ItemProducerName

Item manufacturer

$VariantName

Item variation

{% Link_Item($ItemID) %}

Link to the item in the online store

An example text for the email template is displayed below. You can customize this example text to meet your needs. Open the email template and insert this text into the tab Content » Text in HTML format. Proceed as described below to save this text or a different text for the email template.

Saving text for the email template:

  1. Create a new email template in HTML format.

  2. Copy the example text (Message). Open the tab Email message » Content » Text in HTML format with the syntax editor and insert the text into the text field.

  3. Edit the example text and the HTML formatting to meet your needs.

  4. Copy the second example. Open the tab Item list with the syntax editor and insert the example into the text field.

Message

<p>Dear customer,</p>

<p>You are receiving this email because you are interested in the following item in our online store:</p>

$ItemListHTML

<p>We have good news for you: <strong>this item is now available!</strong></p>

<p>We hope you will come and visit our store!</p>

$SignatureHTML

Item list

<p><strong>$ItemName</strong><br />
Item number: $ItemNumber<br />
$ItemPrice GBP </p>

<p><a href="{% Link_Item($ItemID) %}">$ItemName</a></p>

<hr>

Linking an email template for automatic emailing

Now link the email template with the option Notification when item is in stock. Once the item is back in stock, the template is sent to all interested parties who saved their email addresses. To do so, proceed as follows.

Linking an email template for automatic emailing:

  1. Go to Setup » Client » Select client » Email » Automatic.

  2. Select the email template from the drop-down list Notification when item is in stock.

Editing an inserting the example code for the form

Next you need to insert a form into your design. This form is displayed if an item can not be delivered. At minimum, this form should consist of an entry field and a button. Interested parties enter their email addresses into the field. By clicking on the button, the interested party agrees to receiving an email when the item becomes available. The REST call /rest/positive_stock_notification/ saves the email address and notifies all of the saved email addresses once the item’s net stock is positive.

Further below, you will find an example code which is suited to our responsive design Callisto Light. Use this code as the basis for inserting the form in your design. Edit the code to meet your needs before you use it in your online store. Proceed as described below to insert the example code in your design.

Inserting example code into the design:

  1. Edit the example code to adjust it to your requirements.

  2. Copy the code to the clipboard (Ctrl + C or Cmd + C).

  3. Go to CMS » Web design » Layout » ItemView » ItemViewSingleItem.

  4. Insert the code example at an appropriate position of the template.


<div data-plenty="stocknotification" {% if $AvailabilityId <= 2 %}style="display:none"{% endif %}>
	<div class="row margin-bottom-1">
		<h3>We will get back to you<br>as soon as the item is available!</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 address "+response.data.Email+" was successfully saved.", "plentyMessageBox");
						},

						error: function(response)
						{
							showMessage("An error occurred. Please check your email address.", "PlentyErrorMessageBox");
						}
					}
				);

	           return false;
	   	   });
	   });
	</script>
</div>

Activate the option Client check under Attribute availability in the menu Setup » Client » Select client » Item layouts » Settings and add the following code example to dynamically show or hide the previously created form depending on the availability of the variation.

Inserting example code into the design:

  1. Edit the example code to adjust it to your requirements.

  2. Copy the code to the clipboard (Ctrl + C or Cmd + C).

  3. Go to CMS » Web design » Layout » ItemView » ItemViewSingleItem.

  4. Search for the code line $(window).on('variationChanged', function(event, variation) {.

  5. Insert the code example below the code line.

$(window).on('variationChanged', function(event, variation) {

	// This code is already there
	...


	// Add the following code
	if(variation.availabilityId > 2)
	{
		$('[data-plenty="stocknotification"]').show();
	}
	else
	{
		$('[data-plenty="stocknotification"]').hide();
	}
});
To top