Confirm Size

info

To automatically select the suggested size on the product page (e.g. in a dropdown menu) you can set up a custom function that is triggered by the confirmSize callback.

We also got that example covered in our CodePen example as well. Here how you would configure that:

Code

const myVariantSelectionFunction = (payload) => {
  const { code, id, displaySize01, codeType } = payload;
  // here goes YOUR code that will select the recommended size.
  // you can use the payload variables to identify the correct ski in your shop.
};

const OZ_CONFIG = {
  settings: {
    // config options here
  },
  events: {
    confirmSize: {
      callback: myVariantSelectionFunction, // don't add parentheses here, otherwise the funtion will execute immediately instead of waiting for invocation
    },
  },
};

Payload

Object {
    bestIndicator: 0.41169230769230725,
    codeType: 1,
    code: "7615523592692", // will be in the same format as you passed it to the widget.
    bestIndex: 1,
    bestIndexAlternative: 1,
    bestIndexStatus: "FIT",
    stock: null,
    displaySize01: "169",
    id: "smartfit-button", // this is the ID of the widget that triggered this callback. Useful if you have more than one widget on a page
    oz-meta: {...} //auto generated data, which is important for functionality. Please don`t use this
}

Example

const myVariantSelectionFunction = (payload) => {
  const { code } = payload;
  // productUrl and variantId are available from another function in this example
  return (window.location = `${productUrl}?variant=${variantId[code]}`);
};

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

caution

We explicitely recommend that you use the product code passed in the payload to your function to select the correct ski in your shop. Passed size information is not consistent and should not be used as an identifier.

tip

Depending on your function you may want to change the label of the result button from Select size 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.