Setting up Storefront SDK

To setup the SDK, you should follow below steps:

Check if the SDK has already been loaded
1. If yes, you can start initializing & using the SDK directly.
2. If no, you should listen to the onAppExtensionSDKLoaded event. On event trigger, you can start initializing & using the SDK.
Initialize the SDK
Start using the SDK functions

Below is the example script of the above flow:

var appId = '';	// Your app ID

function useSDK() {
  // Initialize the SDK
  const sdk = window.shopline.appExtension.init({ appId });
  
  // Start using the SDK functions
  ...
}

// Check if the SDK has already been loaded
if (window.shopline.appExtension.isSDKLoaded()) {
  useSDK();
} else {
  // Listen to SDK loaded event
  window.addEventListener('onAppExtensionSDKLoaded', () => {
    useSDK();
  });
}

Check the current page identifier before using page specific SDK features. For example, PDP functions and events are available on the Product Detail Page (product_detail).

const pageIdentifier = await sdk.utils.getCurrentPageIdentifier();

if (pageIdentifier === 'product_detail') {
  sdk.events.addEventListener('page.variationChanged', (payload) => {
    console.log(payload);
  });

  sdk.events.addEventListener('page.quantityChanged', (payload) => {
    console.log(payload);
  });

  sdk.events.addEventListener('page.addonQuantityChanged', (payload) => {
    console.log(payload);
  });

  const product = await sdk.utils.getPDPProduct();
  console.log(product);
}

For specific event & function details, see List of Available Utils Functions & Events.