Update Widget configurations

Usually if you navigate between different bike models in a shop a new page is loaded everytime you change the model and therefore the Online Sizing Widget is reloaded with the correct data of the selected bike. This might be difficult if you switch between models without a page reload.

Use case

In my shop I change between models without reloading the page. I'd like the Online Sizing widget to have the correct values (product code, image-url, product title) to trigger the appopriate sizing after switching models.

Reload the widget using the default button

Stick to the following solution if you use our default button configuration.

First you need to give each find my size button an id (e.g. oz-button).

<div
id="oz-button"
class="oz-container"
data-oz-widget="launcher"
data-oz-code="{{ product.ean }}"
data-oz-name="{{ product.title }}"
data-oz-image="{{ product.image.src }}"
></div>

You need to setup below function so it's executed after variant or model change. First you select the button with the given id and then set the updated attributes to this element. Finally you call the function to update the particular element.

const ozButton = document.getElementById("oz-button");
ozButton.setAttribute(`data-${oz.namespace}-code`, "EANCODE");
ozButton.setAttribute(`data-${oz.namespace}-name`, "Bike Display Name");
ozButton.setAttribute(`data-${oz.namespace}-image`, "Image URL");
oz.updateWidgetConfigurations([ozButton], "container");
note

"EANCODE", "Bike Display Name" and "Image URL" are variables that depend on the shop system you use.

Reload the widget using a custom button

Stick to the following solution if you use a custom button.

Your custom button usually already has an id (e.g. my-custom-oz-button).

<button
id="my-custom-oz-button"
class="oz-trigger"
data-oz-code="{{ product.ean }}"
data-oz-name="{{ product.title }}"
data-oz-image="{{ product.image.src }}"
data-oz-fullscreen="true"
>
What's my size?
</button>

You need to setup below function so it's executed after variant or model change. First you select the button with your id and then set the updated attributes to this element. Finally you call the function to update the particular element.

const customButton = document.getElementById("my-custom-oz-button");
customButton.setAttribute(`data-${oz.namespace}-code`, "EANCODE");
customButton.setAttribute(`data-${oz.namespace}-name`, "Bike Display Name");
customButton.setAttribute(`data-${oz.namespace}-image`, "Image URL");
oz.updateWidgetConfigurations([customButton]);
note

"EANCODE", "Bike Display Name" and "Image URL" are variables that depend on the shop system you use.

Reload multiple buttons

In case you want to update multiple elements after variant change you simply select all elements (my-custom-oz-button-1, my-custom-oz-button-2, my-custom-oz-button-3), update the attributes as stated above and then add those elements in the function call.

const ozButton1 = document.getElementById("oz-button-1");
const ozButton2 = document.getElementById("oz-button-2");
const ozButton3 = document.getElementById("oz-button-3");
...
// Update attributes
...
oz.updateWidgetConfigurations([ozButton1, ozButton2, ozButton3], "container");

The same applies for custom buttons.

const customButton1 = document.getElementById("my-custom-oz-button-1");
const customButton2 = document.getElementById("my-custom-oz-button-2");
const customButton3 = document.getElementById("my-custom-oz-button-3");
...
// Update attributes
...
oz.updateWidgetConfigurations([customButton1, customButton2, customButton3]);