How to select recommended size on product page

Problem

By default EyeFitU tells recommended size while keeping the experience of adding selected size to the cart unmodified. Which means that the user should select the recommended size and add it to cart.

There is an option to automatically select the recommended size for the user, or even add it to the cart.

Solution

Once we show the recommendation to the user, there is a DOM event, to which product page could react.

Reactions could vary, usually it is selecting the recommended size. You could also add recommended size to cart, show additional features in case the recommended size is not available.

You would need to add a script to the product page to listen for the eyefitu event and react accordingly. For example here is a listener which would select the recommended size:

document.addEventListener('eyefitu', (event) => {
  // `recommendedSize` is a size recommended by EyeFitU. `selectedSize` is a
  // size selected by the user while cheking sizes adjacent to the recommended.
  const { recommendedSize, selectedSize } = event.detail;

  const el = document.querySelector(`ul.sizes li[data-size-label=${recommendedSize}]`);

  el.click();
});