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.

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

Code

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,
    },
  },
};

Payload

Object {
  code: "8053323623816", // will be in the same format as you passed it to the widget.
  displaySize01: "L",
  size: "L", // Deprecated. Use displaySize01 instead.
  codeType: "ean" // Possible values: "ean", "upc" and "sku"
}

Example

// variantStock contains the stock counts for all variants.
// In an actual implementation this or something similar would come from your backend.
const variantStock = {
  "4712878580879": 0
  "4712878580886": 1
  "4712878580893": 1
};

const myCheckStockFunction = (payload) => {
  const { code } = payload;

  const inStock = variantStock[code] > 0;
  return inStock;
};

const OZ_CONFIG = {
  settings: {
    apiKey: "YOUR API-KEY",
    // more config options
  },
  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):

Code

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,
    },
  },
};

Payload

Object {
  code: "8053323623816", // will be in the same format as you passed it to the widget.
  displaySize01: "L",
  size: "L", // Deprecated. Use displaySize01 instead.
  codeType: "ean" // Possible values: "ean", "upc" and "sku"
}

Example

const myCheckStockFunction = (payload) => {
  const fetchData = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(payload), // send code, codeType and displaySize01 to our fictitious backend
  };
  return fetch("https://my-amazing-shop.fake/stock", fetchData)
    .then((response) => response.json()) // get JSON response
    .then((response) => {
      return response.isInStock; // our fictitious backend will respond with a value of "true" or "false" in the isInStock property
    });
};

const OZ_CONFIG = {
  settings: {
    apiKey: "YOUR API-KEY",
    // more config options
  },
  events: {
    checkIsAvailable: {
      callback: myCheckStockFunction,
    },
  },
};

Example (using await)

You can also use the more modern approach of using async/await instead of chaining then:

const myCheckStockFunction = async (payload) => {
  const fetchData = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(payload), // send code, codeType and displaySize01 to our fictitious backend
  };

  const response = await fetch("https://my-amazing-shop.fake/stock", fetchData);
  const jsonResponse = await response.json(); // get JSON response
  return jsonResponse.isInStock; // our fictitious backend will respond with a value of "true" or "false" in the isInStock property
};

const OZ_CONFIG = {
  settings: {
    apiKey: "YOUR API-KEY",
    // more config options
  },
  events: {
    checkIsAvailable: {
      callback: myCheckStockFunction,
    },
  },
};