Adding inventory widget to non product page

App provides JavaScript APIs to load the widget on for example, on the Quick View pop-up page or any other Shopify page

Add Product Page API App block

This is an invisible app block which provides required product information to be loaded via API and must be added to your Shopify Product page, even if you are not using API on the product page directly

Once added, copy the section Id, this is required when calling app’s API

Placeholder Div

Add a placeholder div in your HTML/liquid where you want the inventory widget to appear for example

<div id="inventory-info-app" class="iia-container"></div>

JavaScript APIs

Call the app’s JavaScript API to load the widget

const productIdentifier = {id:8089888031028,handle:'black-leather-bag',variant:44303493529908};
const sectionId = 'template--22757946261812__main'; // Copied from Product Page API Block
window.inventoryInfo.api.loadApp(productIdentifier,  'document', sectionId);

Note: variant in productIdentifier is optional; if not passed app will load inventory info for the first available or default variant

Updating Widget on Variant change

When a user selects a variant use the following custom even to trigger an update to the widget to show inventory info of selected variant

const customEvent = new CustomEvent(eventToFire, {
 detail: { variantId: 40328379597190}
});
document.dispatchEvent(customEvent);

Note: Please note App uses strict datatypes and all ids must be passed in as a number