Public JS API Documentation

Now Back In Stock - Public JS API

The NBIS app provides a JavaScript API which will allow merchants to customise the app widget to their specifications.

Prior to using any of the functionality of the Public API you must wait for the "script tag" to finish loading via Shopify's async loader. The app will emit an event of 'esc-out-of-stock-loaded' when the script has finished loading. You must then create 'window.eastsidecoOutOfStock' object in order to access the public API.

 window.addEventListener('esc-out-of-stock-loaded', function (e) {

  

    var outOfStock = window.eastsidecoOutOfStock || {} ;  

    

//Any code making use of public API goes here

  }):

Events

The App will emit these events.

Event Description
onBeforeRender** an event that fires prior to the widget being rendered on the page
onAfterRender** an event that fires after the widget is rendered on the page
onSubscribing an event that fires when the customer clicks on the subscribe button
onSubscriptionSuccess an event that fires after a customer has successfully subscribed to a product update
onSubscriptionFail an event that fires after a customer has attempted to subscribe to a product update and this request has failed

**These Events are not available if the widget is created manuallyUsage Example:

outOfStock.onSubscribing().subscribe((s) =>

    alert('Subscribed');

);

Create new widget

The code below demonstrates how you can use the public API to manually create a widget.

var el = document.getElementById('esc-oos-form');

  let data = {

      "domain": "your-shop.myshopify.com",

      "formColor": "#00ce3d",

      "smsEnabled": "1",

      "preferredCountries": ["GB", "IN"],

      "quantity": 0,

      "modal": "0",

      "modal_auto": "0",

      "gdpr": "0",

      "selectedVariantId": 123456789,

  };

  

 const widget = outOfStock.createWidget(data, el);

Below table list the attributes needed when manually creating a widget:

Attribute Description Required
domain The my shopify url of your shop. Yes
formColor The color/colour of the button(s) in the widget Yes
smsEnabled Enables SMS based product subscriptions. You would still require a package with sms tokens to actually send text messages. ("1" = yes, "0" = no) Yes
preferredCountries An Array of 2 country codes. These 2 countries will appear on the top of the list of countries that customers can subscribe to text messages Yes
quantity The quantity available for the specified product variant. The widget will only load when this is 0. Yes
modal Load the widget on a modal window (pop up within page) triggered by a button, instead of loading directly on the page. Yes
modal_auto Automatically load the modal window on page load Yes
gdpr Require users to opt-in to privacy policy Yes
selectedVariantId The id of the selected variant Yes
translation translation object for language/text used in widget No

Modifying Widget Translation (Language).

You can manually change the text content of the widget by adding a translation object to the widget data.Below table lists the attributes of a translation object:
Attribute Default Required
title Item out of stock - notify me! Yes
sms_email_heading Enter your phone number or email address below to be notified when this item is back in stock: Yes
email_only_heading Enter your email address below to be notified when this item is back in stock: Yes
country_heading Select country: Yes
sms_btn Text Me Yes
sms_error Enter valid mobile phone number Yes
sms_success Thank you - we'll send you an SMS when your item becomes available Yes
email_placeholder you@example.com Yes
email_btn Email Me Yes
email_error Enter valid email address Yes
email_already_tracked Whoops! You've already signed up to be notified Yes
sms_already_tracked Whoops! You've already signed up to be notified Yes
email_success Thank you - we'll send you an email when your item becomes available Yes
email_unsubscribed Email address currently unsubscribed Yes
product_back_in_stock Product now back in stock! Refresh your page Yes
subscribe_push_notifications Also subscribe via push notification Yes
gdpr_notice I agree to receive personalised marketing emails from this store. Yes

Translation Usage Example:

var translation = {

     "title":"Item out of stock - notify me Pleaz!",

     "sms_email_heading":"Enter your phone number or email address below to be notified when this item is back in stock:",

     "email_only_heading":"Enter your email address below to be notified when this item is back in stock:",

     "country_heading":"Select country:",

     "sms_btn":"Text Me",

     "sms_error":"Enter valid mobile phone number",

     "sms_success":"Thank you - we'll send you an SMS when your item becomes available",

     "email_placeholder":"you@example.com",

     "email_btn":"Email Me",

     "email_error":"Enter valid email address",

     "email_already_tracked":"Whoops! You've already signed up to be notified",

     "sms_already_tracked":"Whoops! You've already signed up to be notified",

     "email_success":"Thank you - we'll send you an email when your item becomes available",

     "email_unsubscribed":"Email address currently unsubscribed",

     "product_back_in_stock":"Product now back in stock! Refresh your page",

     "subscribe_push_notifications":"Also subscribe via push notification",

     "gdpr_notice":"I agree to receive personalised marketing emails from this store."

   };

 let data = {

     ...

   "translation": translation

 };

    

 const w = outOfStock.createWidget(data, el);

Overwriting an existing widget

You can change the 'selectedVariantId' of an existing widget using this method:

const widget = outOfStock.createWidget(data, el);

outOfStock.overwriteWidgets(1234,widget);

To change other attributes of the widget, simple change the data of the widget

widget.data.formColor = '#403f3f';

Still need help? Contact Us Contact Us