Adding a Back In Stock form to Symmetry

bis-form.liquid

{% comment %}
/*
 * Example code only. This code has not been tested on a live site.
 * IMPORTANT: Backup your theme before making any modifications.
 *
 */
{% endcomment %}

{% unless product.available %}
<script>
  var BISSubmit = function(attr) {
    var showResponse = function(data) {
      var msg = '';
      if (data.status == 'Error') {
        for (var k in data.errors) {
          msg += data.errors[k].join(); 
        }
      } else {
        msg = data.message;
      }
      
      alert(msg);
    }
    
    if (BISPopover) {
      BISPopover.create(BIS.$('#bis-email', attr.form).value, attr.variantId)
                .then(showResponse);
    }
  }
</script>
<form onsubmit="BISSubmit({ form: this, variantId: {{product.variants.first.id}} }); return false;">
  <p>Enter your email address to receive a notification when this is available to order.</p>
  
  <input type="email" class="email" placeholder="Email Address" value="" id="bis-email" required="" name="email">
  <input class="compact" type="submit" name="subscribe" value="Notify Me">
</form>
{% endunless %}

Example product page notification form

You can download this file, then upload it to your theme under 'snippets'.

Then include it in product.liquid with:

  {% include 'bis-form' %}

This is minimal example: it doesn't handle multiple variants, and only uses an alert dialog for the confirmation and error messages.

For more information on integration with Back In Stock visit http://backinstock.org/page/customization