Check if sizing is available

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.

note

You only need this if you are not using the ready made button widget, 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

Use case

I'm using my own custom button element, which is hidden on page load and I would like to show that to the user if sizing is available for this product code.

Consider this example for that use case:

.hidden {
  display: none;
}

const showMyButton = (data) => {
  // 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 } = data;
  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,
    },
  },
};

The payload passed to your function looks like this:

Object {
  code: "8053323623816",
  id: "oz-custom-button", // this is the ID that you gave your button
}

Sizing NOT available

Use case

I would like to trigger a custom interaction when sizing is not available. For example: show a sizing chart instead if the sizing button.

Consider this example for that use case:

.hidden {
  display: none;
}

const showSizingChart = (data) => {
  // 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 } = data;
  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,
    },
  },
};

The payload passed to your function looks like this:

Object {
  code: "8053323623816",
  id: "oz-custom-button", // this is the ID that you gave your button
}

note

Sizing Available#

Use case

Sizing NOT available#

Use case

Sizing Available

Sizing NOT available