Size does not fit
info
The confirmSizeDoesNotFit
callback triggers a custom function that specifies what should happen if the customer is either too small for the smallest size or too tall for the biggest size of the ski and therefore the ski does not fit.
If the customer is out of range the widget will show a different button reading Continue shopping.
Consider this example for that use case:
- Code
- Payload
- Example
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;
// here goes YOUR code with the functionality you like when the user clicks on the button "Continue shopping", if the ski is not available.
};
const OZ_CONFIG = {
settings: {
// config options here
},
events: {
confirmSizeDoesNotFit: {
callback: myDoesNotFitAlternative,
},
},
};
Object {
bestIndex: 1,
bestIndicator: 1.2,
bestIndexAlternative: 1,
bestIndexStatus: "TOO_HIGH",
code: "7615523592708", // will be in the same format as you passed it to the widget.
codeType: 1,
displaySize01: "176",
id: "oz-button-generic-default", // this is the ID of the widget that triggered this callback. Useful if you have more than one widget on a page
stock: null,
oz-meta: {...} //auto generated data, which is important for functionality. Please don`t use this
}
const showAlternativeDoesNotFit = (payload) => {
// collectionUrl will be passed from the product page
return (window.location = `${collectionUrl}`);
};
const OZ_CONFIG = {
settings: {
apiKey: "YOUR API-KEY",
// more config options
},
events: {
confirmSizeDoesNotFit: {
callback: showAlternativeDoesNotFit,
},
},
};
tip
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 in the global configuration for every widget on the page or in the local configuration for single widgets.