Confirm Size

Use case

I want to automatically select the suggested frame size on my product page, when the customer clicks "select size" in the Online Sizing widget.

We got that example covered in our CodePen example as well. Here how you would configure that:

const myVariantSelectionFunction = (payload) => {
const { code, id, size, codeType } = payload;
// here goes YOUR code that will select the recommended size.
// you can use the payload variables to identify the correct bike in your shop.
};
const OZ_CONFIG = {
settings: {
// config options here
},
events: {
confirmSize: {
callback: myVariantSelectionFunction, // don't add parentheses here, otherwise the funtion will execute immediately instead of waiting for invocation
},
},
};
tip

We recommend that you use the product code passed in the payload to your function to select the correct bike in your shop as this is least vulnerable.

The payload passed to your function looks like this:

Object {
code: "8053323623816", // will be in the same format as you passed it to the widget.
id: "oz-trigger-1", // this is the ID of the widget that triggered this callback. Useful if you have more than one widget on a page
size: "L",
codeType: 1
}
note

Depending on your function you may want to change the label of the result button from Select size to something else. Here you find how you can do this.