Skip to main content

Add functions

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.

Implementation Methods​

This feature requires a JavaScript function that responds to the widget's select event. Choose one of these implementation methods:

  1. Using addEventListener (Recommended)
  2. Using the onselect attribute

Creating Your Select Function​

Below is an example of a JavaScript function that selects the suggested size in your product form:

function 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 = CSS.escape(optionValue);
		const selector = `[name^="${optionName}"][value="${escapedOptionValue}"]`;
		const element = document.querySelector(selector);
		element?.click();
	});
}

Implementation Options​

This method is preferred as it follows standard JavaScript event handling patterns.

const widget = document.querySelector('#onlinesizing-widget');
widget?.addEventListener('select', yourSelectFunction);

Using the onselect attribute​

Alternatively, you can pass your function directly as an attribute in the widget HTML:

<sf-product-sizing
  onselect="yourSelectFunction"
  name="{{ Product title variable }}" 
  ...
>
</sf-product-sizing>

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