Implementing call to action on size recommendation screen

EyeFitU SizeEngine SDK exposes an API which allows to change default Continue button on size recommendation screen to a call to action, e.g. Add to Cart.

Defining call to action button

To change action text set a data-prompt-button-text attribute on a widget element:

<div
  data-eyefitu-sizing-widget
  [ ... other required attributes ]
  data-prompt-button-text="Add {X} to Cart"
></div>

Here {X} is a placeholder, which will be replaced with selected size.

Call to action API

EyeFitU SizeEngine SDK emits a click event on call to action button, which you could handle according to your needs.

We have seen following use case:

• add garment in selected size to the cart
• select recommended size on a product details page
• send recommended and selected sizes into store analytics

For all these use cases you need to listen for the eyefitu event on the widget element (DOM element marked with data-eyefitu-sizing-widget atribute):

document.querySelector('[data-eyefitu-sizing-widget]')
  .addEventListener('eyefitu', (event) => {
    // `recommendedSize` is a size recommended by EyeFitU.
    console.log(event.detail.recommendedSize);

    // `selectedSize` is a size selected by the user according
    // to personal preferences.
    console.log(event.detail.selectedSize);
  });

Integration with eCommerce platform

Implementation of the Add to Cart function requires integration with eCommerce platform. Please consult your technology provider for implementing this integration.

Shopify

On Shopify you should call Cart API to add item to cart.

document.querySelector('[data-eyefitu-sizing-widget]')
  .addEventListener('eyefitu', (event) => {
    const variantId = lookupVariantBySize(event.detail.selectedSize);

    jQuery.post('/cart/add.js', {
      items: [
        {
          quantity: 1,
          id: variantId
        }
      ]
    });
  });