Skip to main content

Remove obsolete code

info

The functionality of the checkIsAvailable callback and confirmSizeUnavailable callback will be covered by the Recommendation Engine itself and can therefore be removed from the code.

The confirmSizeUnavailableLabel will also be predefined by the Recommendation Engine.

Callbacks

checkIsAvailable

The event checkIsAvailable as well as the related callback function can be removed from the configuration.

const myCheckStockFunction = (payload) => {
const { code, displaySize01, type } = payload;
let sizeAvailable = false;

// here goes YOUR code that will check the stock for recommended bike…
// … and return `true` if in stock or `false` if not
// use the payload to identify the recommended bike in your shop that you need to check the stock for
return sizeAvailable;
};

const OZ_CONFIG = {
settings: {
// config options here
},
events: {
checkIsAvailable: {
callback: myCheckStockFunction,
},
},
};

confirmSizeUnavailable

const myShowAlternatives = (payload) => {
// you get the same payload as in the checkIsAvailable callback,
// if you need that to construct a 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 bike is not available.
};

const OZ_CONFIG = {
settings: {
// config options here
},
events: {
confirmSizeUnavailable: {
callback: myShowAlternatives,
},
},
};

Labels

Confirm Size Unavailable Label

The confirmSizeUnavailableLabel can be either in the global configuration or locally in the button configuration. This label can be removed as it is predefined by the Recommendation Engine and can't be changed by the customer.

Global configuration:

settings: {
// more global config options …
confirmSizeUnavailableLabel: "Custom Size Unavailable Text",
// more global config options …
}

Button configuration:

<div
class="oz-container"
data-oz-widget="launcher"
data-oz-code="{{ product.ean }}"
data-oz-name="{{ product.title }}"
data-oz-image="{{ product.image.src }}"
data-oz-price="{{ product.price }}"
data-oz-confirm-size-unavailable-label="Custom Size Unavailable Text"
></div>