Skip to main content

Check if sizing is available

info

We have two callbacks available to handle scenarios around the fact a product code is available in our database which controls if our sizing is available or not.

info important You only need this if you are not using the default button, because that has the code check already integrated. Of course if you would like to do something addtional to just showing "sizing unavailable" on the button, you may of course use this config option. :::

Sizing Available​

You can hide the "Find My Size" Button by default and display it if the product code has been found in our database.

Consider this example for that use case:

const showMyButton = (payload) => {
  // the payload will contain the product code if you need that for something
  // and the id of the trigger element/your button (if you configured an id…)
  const { code, id } = payload;
  const myButton = document.getElementById(id);

  // remove the hidden class to show the button
  myButton.classList.remove("hidden");
};

const OZ_CONFIG = {
  settings: {
    // config options here
  },
  events: {
    sizingAvailable: {
      callback: showMyButton,
    },
  },
};

Sizing NOT available​

To backup your sizing recommendation you can e.g. display a size chart if the Ski Sizing widget is not available because the product code is not in our database.

Consider this example for that use case:

const showSizingChart = (payload) => {
  // the payload will contain the product code if you need that for something
  // and the id of the trigger element/your button (if you configured an id…)
  const { code, id } = payload;
  const myButton = document.getElementById(id);
  const mySizingChart = document.getElementById("my-sizing-chart");

  // hide the sizing button
  myButton.classList.add("hidden");

  // show the sizing chart
  mySizingChart.classList.remove("hidden");
};

const OZ_CONFIG = {
  settings: {
    // config options here
  },
  events: {
    sizingUnavailable: {
      callback: showSizingChart,
    },
  },
};