Back In Stock Javascript API

Initialize OnVoard object

Specify the following snippet once before you add any javascript API code so that OnVoard object is initialized.

<script>
(function() {
  window.OnVoard = window.OnVoard || function() {
  (window.OnVoard.q = window.OnVoard.q || []).push(arguments);
  };
})();
</script>

Below are available methods for javascript API.

Back In Stock

Show Modal
Use this to show back-in-stock modal

OnVoard('back_in_stock', 'showModal');

Hide Modal
Use this to hide back-in-stock modal

OnVoard('back_in_stock', 'hideModal');

Set Product Data
Manually set product data. Keep in mind that product data should be compatible with the format shown below.

const productData = {
'id': '334',
'title': 'Red Wing Iron Ranger Boot',
'out_of_stock': false,
'variants': [{
  'id': '556',
  'title': '8',
  'out_of_stock': true,
  }, {
  'id': '557',
  'title': '8.5',
  'out_of_stock': true,
  }, {
  'id': '558',
  'title': '9',
  'out_of_stock': false,
  }, {
  'id': '559',
  'title': '9.5',
  'out_of_stock': false,
  }]
};

OnVoard('back_in_stock', 'setProductData', productData);

On Ready Event
Execute a callback function when back-in-stock is loaded and ready.

const yourCallback = () => {
 console.log("BackInStock is ready");
};

OnVoard('back_in_stock', 'onReady', yourCallback);

Back In Stock Inline Form

Set Variant ID
Use this to set variant ID for product.

OnVoard('back_in_stock_inline_form', 'setVariantId', '12345');

On Ready Event
Execute a callback function when back-in-stock inline form is loaded and ready.

const yourCallback = () => {
 console.log("Form is ready");
};

OnVoard('back_in_stock_inline_form', 'onReady', yourCallback);