Helper methods

info

We created some helper methods that you can apply to the Online Sizing Widget to update the button attributes.

Update widget configurations

info

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 (product code, image-url, product title, price) of the selected bike. This might be difficult if you switch between models without a page reload.

Therefore we created a function called updateWidgetConfigurations to pass the correct data to the widget on variant change.

tip

This function might only be needed if you have options to choose between multiple colors or frame shapes in your shop and this information is not updated on change automatically.

Using the default button

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

Select the default button using the querySelector for the class oz-container.

<div
  id="oz-button"
  class="oz-container"
  data-oz-widget="sizing"
  data-oz-embed="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.querySelector(".oz-container");
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");

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

Using a custom button

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

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

<button
  id="my-custom-oz-button"
  data-oz-widget="sizing"
  data-oz-embed="custom"
  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]);

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

Update 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]);

Reinitialize widget

info

You might experience that the Widget button is not working anymore after you change the product variant. In that case it might be enough to destroy and reinitialize the widget.

oz.destroy();
oz.initialize();

Check for registered button

You might be facing issues, that there is no button registered when you try to update any attributes with the updateWidgetConfigurations function on some pages. This is one example how you can check if there is a button registered to prevent errors:

if(Object.keys(oz.widgets).length) {
  oz.updateWidgetConfigurations(...)
}