Location stock quantity does not update after selecting a variant

For the majority of the themes, the app should be able to detect when a variant selection has changed on product pages, this is done by monitoring the variant changes in the URL. In this URL: https://inventory-info-demo.myshopify.com/products/clay-plant-pot?variant=37638571360448 the variant queryString will change or be added when the user changes the variant on the product pages.

However, some themes don’t use URLs for variants or change the URL in a way that is not detected by the app. In such cases, you have two options:

Option 1: Use the “Theme does not use variant id in the URL when switching variants” option within the app.

From the Product Page Widget of your app, navigate to the “Advanced” tab and scroll down to Miscellaneous Options.

Option 2: Provide a custom variant selector (Needs HTML/JavaScript knowledge).

Custom code to change variants via the App’s APIs

If none of the options work because the theme has something entirely custom to display variant options, you need to detect a change in the variant on your theme and then update the location stock quantity using the app’s JavaScript API.

Below is a code snippet sample:


(function() {

  const getHandleFromUrl = function() {

    const pathname = window.location.pathname;

    const index = pathname.lastIndexOf('/') + 1;

    return pathname.substr(index);

  };

  const customElement = document.querySelector('[SELECTOR_FOR_YOUR_ELEMENT]');

  // Typically event is change or click/touch

  customElement.addEventListener('[EVENT]', function() {

    const productHandle = getHandleFromUrl();

    const variantId = getVariant(); //THIS IS YOUR FUNCTION WHICH GIVES CURRENTLY SELECTED VARIANT ID

    // Below line is the API function exposed by the app which requires an object with

    // product handle and variant Id to display location stock quanity.

    window.inventoryInfo.api.loadApp({

      handle: productHandle,

      variant: variantId

    });

  });

})();

If you need help with any of these, please feel free to reach out to our support team.

What are your feelings