Back In Stock form for Shopify React theme

back-in-stock.liquid

<style>
  #BIS_form { margin-top: 20px; }
  #BIS_form .btn { height: 34px; line-height: 34px; }
  .BIS_response { min-height: 1em; }
</style>

<form id="BIS_form" class="clearfix" data-first-variant="{{product.variants.first.id}}" id="BIS_form" onsubmit="return BISCreateNotification{{product.id}}(this); return false;" {% if product.available %}style="display:none"{% endif %}>
  <p><strong>Notify me when this product is available</strong></p>	
  <p>
    <input type="email" class="text" name="email">
	<input type="submit" class="btn" value="Notify Me">
  </p>
  <p class="BIS_response"></p>
</form>

<script>
  $(function() {     
    var BISNotificationCallback = function(data) {
	  var msg = '';
      if (data.status == 'OK') {
        msg = data.message; // just show the success message
      } else { // it was an error
        for (var k in data.errors) {  // collect all the error messages into a string
          msg += data.errors[k].join();
         }
      }
	  $('#BIS_form .BIS_response').text(msg);
    };
    
    var BISCreateNotification{{product.id}} = function(form) {
		var email = $(form).find("[name=email]").val(),
            variantId = $('[name=id]').val() || $(form).attr('data-first-variant');
                                                           
      	BISPopover.create(email, variantId).then(BISNotificationCallback);
	
    	return false;
    };

    var clearBISResponse = function() { 
      $('#BIS_form .BIS_response').html('&nbsp;');
    };

    $(function() { 
      $('#BIS_form input').bind('focus change', clearBISResponse);
      $('.product_form select').bind('change', clearBISResponse);
    });
    
    var _originalSelectCallback = selectCallback;
    
    window.selectCallback = function(variant) {
      BISPopover.variantIsUnavailable(variant) ? $('#BIS_form').show() : $('#BIS_form').hide();
      _originalSelectCallback.apply(null, arguments);
    };
    
    window.BISCreateNotification{{product.id}} = BISCreateNotification{{product.id}};
  });
</script>

Installation instructions

1. Download the back-in-stock.liquid and upload it to your React theme under snippets.
2. Edit product.liquid, and add {% include 'back-in-stock' %} after the closing </form> around line 100

1. Save the product template and test your store.