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';