If a product or product option is out of stock, this allows buyers to sign up on the product page to receive an alert when a product comes back into stock by displaying a message and a button to receive the alert. The system automatically checks for new stock every hour and emails people who have signed up for the alert. Once the email has been sent they will no longer receive further alerts for this stock item.


You can also set a Back in stock date via Edit product > Stock > Back in stock date, & display it on the product page via the product_info.html.twig template with {{ dump(product.back_in_stock_date) }}


Notes: 

  1. This currently only applies to stock control at the product level and not the option level.
  2. This does not sign the person up to your newsletter, it is purely a stock notification so they can return to buy the product
  3. This can also be configured to allow backorders to be taken and for administrators to receive alerts when the back in stock date is approaching to check that stock will arrive on time. Customers subscribed to receive email notifications can be informed of a change in the back in stock date or that stock is now available.
  4. Template changes are required for this functionality.


To set this up:

  • Via Page Manager > System Pages > "email_product_back_in_stock_alert" page, make any required changes to the default text. Be careful not to alter the template tags.
  • Via Form Builder, you have a form set up called "Back In Stock Alert", modify the default text if necessary and also in the product_info.tpl template shown below.


NB If your store was set up prior to 24th December 2014, you will need to add in the following code to your active product template > Store > product_info.tpl:


Replace the current  "is_out_of_stock" section (on or around line 78 just below the "product_price" line) with the following:


 

{# is the product out of stock? #}
{% if product.is_out_of_stock %} <br /><br /><span class="out_of_stock"><em>Sorry, currently not in stock!</em></span><br /> <a id="toggle-stock-alert-form" class="generated_button">Notify me when back in stock</a>{% endif %}

 


And at the footer/bottom of the template paste in:


  

{# Alert when back in stock #}
{% if product.is_out_of_stock %}

<style>
#toggle-stock-alert-form { cursor: pointer; }
#rec-form-p49ch4jB6q3W1ei6UL46 { width: 370px; height: 150px; }
</style>

<script type="text/template" id="rec-product-back-in-stock-container">

<form action="/pages/formbuild_processor.php?key=p49ch4jB6q3W1ei6UL46" class="rec-form rec-form-dm-small" id="rec-form-p49ch4jB6q3W1ei6UL46" enctype="multipart/form-data" method="post" data-ajax-enabled="1" data-ajax-success-text="Thanks%2C+we+will+alert+you+as+soon+as+this+item+is+back+in+stock%21">

<input type="hidden" name="input_field_BCoO4D4uS7eq8TUR9qJh" id="input_field_BCoO4D4uS7eq8TUR9qJh" value="{{ product.id }}">
<h3>Notify me when back in stock</h3>
<p>We can alert you as soon as this item is back in stock.</p>
<p>
<label for="input_field_fNhocQKQ2H8nyG3R9RBX">Email address: </label>
<input type="email" name="input_field_fNhocQKQ2H8nyG3R9RBX" id="input_field_fNhocQKQ2H8nyG3R9RBX" placeholder="" required class="rec-form-field rec-generic-field rec-form-field-med"><span class="rec-form-required-marker">*</span>
</p>
<input type="submit" value="Subscribe" class="rec-form-button">

<!-- spam honeypot hybrid -->
<p id="rec_honeypot_hybrid_817"><label for="honeypot_hybrid_answer_817">To prove you're not a robot, whats 4 plus 5?</label><br><input type="text" name="honeypot_hybrid_answer" id="honeypot_hybrid_answer_817" value=""></p>

</form>

</script>

<script>
(function($){

// popup stock alert form
$('#toggle-stock-alert-form').on('click', function () {

// open modal
$.fancybox( $('#rec-product-back-in-stock-container').html() );

// honeypot hybrid js
$("#honeypot_hybrid_answer_817").val("9");
$("#rec_honeypot_hybrid_817").css("display","none");

// on submit
REC.Events.subscribe('form.form-submit-finish', function () {
$('#fancybox-wrap').css('height', '230px');
$('#fancybox-inner').css('height', '210px');
$.fancybox.center();
});

});

})(jQuery);
</script>

{% endif %}