Integrating Back In Stock with the notify me snippet

snippet-notify-me.liquid

{% form 'contact' %}
  {% if form.posted_successfully? %}
  <p class="accent-text">Thanks! We will notify you when this product becomes available!</p>
  {% else %}
  <p>Click <a id="notify-me" href="#">here</a> to be notified by email when {{ product.title }} becomes available.</p>
  {% endif %}
  {% if form.errors %}
  <div class="error feedback accent-text">
    <p>Please provide a valid email address.</p>
  </div>
  {% endif %}
  {% unless form.posted_successfully? %}
  <div id="notify-me-wrapper" class="clearfix" style="display:none; margin:10px 0;">
    {% if customer %}
    <input type="hidden" name="contact[email]" value="{{ customer.email }}" />
    {% else %}
    <input style="float:left; width:200px;" required="required" type="email" name="contact[email]" placeholder="[email protected]" class="styled-input{% if form.errors contains 'email' %} error{% endif %}" value="{{ contact.fields.email }}" />
    {% endif %}
    <input type="hidden" name="contact[body]" value="Please notify me when {{ product.title }} becomes available." />
    <input style="float:left; margin-left:5px;" class="btn styled-submit" type="submit" value="Send" />         
  </div>
  {% endunless %}
  <script>
    
  <!-- Added for Back In Stock app -->    
  $('#notify-me-wrapper [type=submit]').click(function(e) {
    e.preventDefault();
    BISPopover.create($(this).prevAll('[type=email]').val(), {{product.variants.first.id}})
          .then(function(data) { 
            if (data.status == 'OK') { alert(data.message) } 
            else { 
              var msg = [];
              for(var i in data.errors) { 
                msg.push(data.errors[i]);
              }
              alert(msg.join("\n"));
            } 
            }); 
  });
  <!-- End added for Back In Stock app -->
  
  jQuery('#notify-me').click(function() { 
    {% if customer %}
    jQuery('#sold-out form').submit(); 
    {% else %}            
    jQuery('#notify-me-wrapper').fadeIn();           
    {% endif %}
    return false;
  } );
  </script>
{% endform %}

Thanks Matt! I was able to get one step further toward the standard functionality by changing alert(data.message) to pull in the HTML that Shopify would have displayed if the form submitted successfully using the .html function in jQuery.

        if (data.status == 'OK') { $('#notify-me-wrapper').html('<p class="accent-text">Thanks! We will notify you when this product becomes available!</p> 

Hello there,

Thank you for providing this code. Where will the list of emails show up in Shopify if we are not using the back in stock app?

Thanks so much!

It will send the mail to customer 's email address which you can find in general settings in shopify and you can change the email id as per your need.