Skip to main content

Add functions

Update widget attributes​

info

Almost every shop uses product variants. If your shop uses product variants on the product page (e.g. different colors, different frame shapes etc.) make sure to udpate the button configuration to request always the correct product code.

You can do so by updating the widget attributes with simple javascript. Make sure to trigger the function on variant change.

const widget = document.querySelector('#onlinesizing-widget');
widget?.setAttribute('variant-id', newVariantId);
widget?.setAttribute('global-id', newGlobalId);
widget?.setAttribute('image', newImage);

Select suggested size​

info

To automatically select the suggested size in the widget on the product page (e.g. in a dropdown menu), you can set up a custom function triggered by the onselect event of the widget.

Udpate widget code​

<oz-widget
  onselect="yourSelectFunction"
  name="{{ Product title variable }}" 
  ...
>
</oz-widget>

Your select function​

Here's an example of a javascript function to select the suggested size.

yourSelectFunction = (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();
  });
};