Size does not fit

Use case

The customer is either too small for the smallest size or too tall for the biggest size of the bike and therefore the bike does not fit. I want to offer an alternative for that customer.

If the customer is out of range the widget will show a different button reading Continue shopping.

Confirm Size Unavailable Screen

Consider this example for that use case:

const myDoesNotFitAlternative = (payload) => {
// you get the same payload as in the checkIsAvailable callback,
// if you need that to construct your category filter url – for example.
const { code, size, type } = payload;
return (window.location = `${collectionUrl}`);
// please note that ${collectionUrl} is just an example that would need to be declared elsewhere.
};
const OZ_CONFIG = {
settings: {
// config options here
},
events: {
confirmSizeDoesNotFit: {
callback: myDoesNotFitAlternative,
},
},
};

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.
size: "L",
type: 1
}
note

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