Skip to main content

Check available stock in shop

info

The checkIsAvailable callback triggers a custom function that is used to check the stock of the desired bike. If stock information is provided to the widget and the bike is out of stock it will display a sold out message. You can then setup an additional custom function for the confirmSizeUnavailable callback to specify what happens after closing the widget.

tip

With our Recommendation Engine tool you can show fitting alternatives that are available in your shop to the customer and don't need to set up an own function. Click here to learn more about our Recommendation Engine.

If your function to check your stock returns false for the suggested size, the result screen of the widget will show a different button reading Continue shopping.

Confirm Size Unavailable Screen

important

For this button to work, you need to provide another callback function confirmSizeUnavailable which decides what should happen in this scenario.

Using a synchronous function

const myCheckStockFunction = (payload) => {
const { code, displaySize01, codeType } = 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,
},
},
};
caution

We explicitely recommend that you use the product code passed in the payload to your function to query the stock for the desired variant. Passed size information is not consistent and should not be used as an identifier.

Using promises (async API)

In the modern JavaScript world we no longer use XMLHttpRequests or the like. Instead there is fetch() which uses promises. You can use promises in the checkIsAvailable callback like this (since widget v2.16.0):

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

// here goes YOUR code that will check the stock for recommended bike…
// … and return a promise which resolves to `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
// A rejected promise is treated the same as resolving to `false`.
return Promise.resolve(sizeAvailable);
};

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