Does the app work with headless storefronts?

The InStockNotify app can support headless storefronts on the BigCommerce platform. Support is via an API endpoint that you POST the required data to our servers. The registration form that the customer uses to sign up needs to be custom built on the front end in whichever technology you are using for the front end headless storefront (WordPress, React, NextJs etc).

We do not do any of the custom form integration with the headless storefront, we only handle the backend processing of the data.

Step 1: Enable headless storefronts in the app

In the app go to the Settings -> Storefronts page and enable the headless storefronts. 

• Click the show headless storefronts in the header
• Click the enable on any headless storefronts you want to enable
• Be sure to click the save button on the bottom of the page

This step creates the settings (ie. email templates) that are customizable per storefront.

Step 2: Build the custom form in your storefront

You are free to build the form as your needs require. Below is the default html we use to build the standard form in a BigCommerce standard theme:

Default html:

<div id="instocknotify-container-custom" style="display: block;">

                <div id="InStockNotifyForm-custom" style="margin-bottom:8px;">

                                <div style="clear:both"></div>

                                <div id="inStockNotifyOutOfStock-custom" style="display: block;">Enter your email address to be notified when this item is back in stock.</div>

                                <div id="inStockNotifyInvalidEmail-custom" style="color: rgb(255, 0, 0); display: none;">Please enter a valid email address</div>

                                <div id="inStockNotifyEmail-custom" style="display: block;">

                                                <input id="inStockNotifyEmailAddress-custom" name="user" type="text" class="form-input" placeholder="Email Address" style="margin-top: 1rem; width:90%;" maxlength="128">

                                </div>

                                <div id="inStockNotifyButton-custom" style="display: block;">

                                                <input id="inStockNotifyClick-custom" name="inStockNotifyClick-custom" type="button" class="button button--primary" style="margin-top: 1rem;" value="Notify Me">

                                </div>

                                <div id="inStockNotifyComplete-custom" style="display: none;">Thank you! we will email you when this item is back in stock. </div>

                                <div style="clear:both"></div>

                </div>

</div>

Step 3: Submit the data to our server

When the end user clicks the Notify Me button, be sure to validate that the email address entered is valid (at least properly formatted) then post the required data to our server.

API endpoint to post the data to: https://www.instocknotify.net/api/bigcommerce/headless/create

POST the  following data to the API endpoint as a JSON formatted string:

productId	The id BigCommerce assigns to a product (not an SKU)
variantId	For options/variants, the id of the variant (assigned by BigCommerce). If no variant, should be null.  If a product has variants, the variantId is required. Because inventory is stored at the variant level, without the id, we have no way to know which variant to monitor for the customer.
email	Please validate the email is a correctly formatted email address.
storeId	Can be found in the app on the Account -> Profile page
siteId	The id of the storefront found on the Settings -> Storefront page in the app.

Postman Example:

Here is an example using Postman sending data to our API endpoint.