Skip to content

Instantly share code, notes, and snippets.

@msmithstubbs
Created January 5, 2015 15:12
Show Gist options
  • Save msmithstubbs/6fcd228ca2bad9346c32 to your computer and use it in GitHub Desktop.
Save msmithstubbs/6fcd228ca2bad9346c32 to your computer and use it in GitHub Desktop.
Back in Stock form for Pacific theme (Shopify)
<style>
.BIS_form {
text-align: center;
margin-top: 20px;
display: none;
}
.BIS_form label {
display: block;
}
.BIS_form [name=email] {
width: 280px;
display: inline-block;
}
</style>
<div class="BIS_form">
<label for="BIS_email">Email me when restocked</label>
<input id="BIS_email" name="email" type="email" data-product-id="{{product.id}}" placeholder="your@email.com" value="{{customer.email}}">
<button id="BIS_button" onclick="BIScreateNotification()";>Notify Me</button>
<p class="BIS_response"> </p>
</div>
<script>
var BIScreateNotification = function() {
BISPopover.ready.then(function() {
var variantId = (Shopify.urlParam('variant') || BISPopover.variants[0].id),
emailField = document.querySelector('.product-form #BIS_email'),
responseContainer = document.querySelector('.product-form .BIS_response');
responseContainer.innerText = '';
BISPopover.create(emailField.value, variantId, emailField.getAttribute('data-product-id')).then(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();
}
}
responseContainer.innerText = msg;
});
});
}
</script>
@msmithstubbs
Copy link
Author

  1. Add {% include 'back-in-stock' %} to snippets/product-form.liquid just to the end of the product-form div.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment