Size unavailable

info

The confirmSizeUnavailable callback triggers a custom function that specifies what should happen if the recommended bike for the customer is not available. You could – like in the example below – navigate to the parent category page in your shop, which shows other bikes of the same category.

important

This information can only be retrieved if the checkIsAvailable callback is configured correctly.

If the bike is out of stock the widget will show a different button reading Continue shopping.

Consider this example for that use case:

Code

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

Payload

Object {
  bestIndex: 2
  bestIndicator: 89
  code: "8053323623816", // will be in the same format as you passed it to the widget.
  codeType: 1
  displaySize01: "M-L",
  displaySize02: "50cm",
  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
}

Example

const myCheckStockFunction = (payload) => {
  const { code } = payload;
  // variantStock is an array of objects with key-value pairs (productcode: stock) for all variants.
  // E.g.
  // 4712878580879: 0
  // 4712878580886: 1
  // 4712878580893: 1
  if (variantStock[code] > 0) {
    return true;
  } else {
    return false;
  }
};

const showAlternativeNotAvailable = (payload) => {
  // In this case collectionUrl is passed from the product template page
  return (window.location = `${collectionUrl}`);
};

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

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.