Check available stock in shop

Use case

I would like to check my own stock of the suggested frame size before displaying the result to the customer. If the size is out of stock I want to redirect the customer to alternative products.

If your function returns false for the suggested size, the result screen of the widget will show a different button reading Show Alternatives.

Confirm Size Unavailable Screen

note

For this button to work, you need to provide another callback function confirmSizeUnavailable which decides what should happen in this scenario. You could – like in the example below – navigate to a category page in your shop, which shows other bikes in the same category.

const myCheckStockFunction = (payload) => {
  const { code, size, 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 myShowAlternatives = (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: {
    checkIsAvailable: {
      callback: myCheckStockFunction,
    },
    confirmSizeUnavailable: {
      callback: myShowAlternatives,
    },
  },
};

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 Show Alternatives to something else. Here you find how you can do this.