Size does not fit

info

The confirmSizeDoesNotFit callback triggers a custom function that specifies what should happen if the customer is either too small for the smallest size or too tall for the biggest size of the bike and therefore the bike does not fit.

If the customer is out of range the widget will show a different button reading Continue shopping.

Consider this example for that use case:

Code

const myDoesNotFitAlternative = (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;

  // 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: {
    confirmSizeDoesNotFit: {
      callback: myDoesNotFitAlternative,
    },
  },
};

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 showAlternativeDoesNotFit = (payload) => {
  // collectionUrl will be passed from the product page
  return (window.location = `${collectionUrl}`);
};

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

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.