Add functions

You can create a liquid file in the assets folder of your theme with the functions for your onlinesizing widget and load the file in your theme.liquid file.

Onlinesizing functions

assets/onlinesizing-functions.js

// This function selects the suggested size
confirmSize = (event) => {
  const variant = product.variants.find((v) => v.id == event.detail.code);
  if (!variant) return;
  variant.options.forEach((optionValue, index) => {
    const optionName = product.options[index];
    const escapedOptionValue = optionValue.replace(/"/g, '\\"');
    const selector = `[name^="${optionName}"][value="${escapedOptionValue}"]`;
    const element = document.querySelector(selector);
    element?.click();
  });
};

// This function updates the widget code
subscribe(PUB_SUB_EVENTS.variantChange, (event) => {
  const widget = document.querySelector('#onlinesizing-widget');
  widget?.setAttribute('variant-id', event.data.variant.id);
});

info

In the Dawn theme there is a predefined function PUB_SUB_EVENTS.variantChange(), which is executed as soon as a variant is changed. In this case, we take advantage of this and wait for this function to be executed in order to update the widget code. In other themes there might be similar functions that you can use.

Load file

theme.liquid

    <script src="{{ 'onlinesizing-functions.js' | asset_url }}" defer="defer"></script>
    <script type="module" src="https://widget3.smartfit.online/?apiKey= {{ ADD YOUR API KEY }} "></script>
  </head>