mySHOEFITTER x Empress of Heels

empressofheels.html

<!-- Load the mySHOEFITTER Script -->
<script src="https://js.myshoefitter.com/v1/script.js"></script>

<!-- Initialize mySHOEFITTER -->
<script type="application/javascript">
  myshoefitter.events(event => {
    console.log('mySHOEFITTER Event', event);
    if (event.type === 'RESULT') {
      // Work with the result - e.g. preselect size in shop
      if (typeof hj === 'function' && 'result' in event.data) {
        const hjRes = hj('event', 'myshoefitter_result', {
          size: event.data.result,
          product: document.title
        });
        console.log('mySHOEFITTER button click event sent to Hotjar:', hjRes);
      } else {
        console.error('hj function is not defined.');
      }
      console.log('mySHOEFITTER Shoe Size', event.data.result);
    }

    if (event.type === 'BUTTON' && event.data && event.data.action === 'click') {
      // Send click event to google tag manager
      if (typeof hj === 'function') {
        const hjClick = hj('event', 'myshoefitter_button_click', {
          size: event.data.result,
          product: document.title
        });
        console.log('mySHOEFITTER button click event sent to Hotjar:', hjClick);
      } else {
        console.error('hj function is not defined.');
      }
      // Log the event to the console (for debugging purposes)
      console.log('Shopify button click event sent to Hotjar.');
    }
  });
  myshoefitter.init({
    shopSystem: 'shopify',
    button: {
      attachTo: ".product-form__input--dropdown",
      position: "after", // before
      text: "Find your size",
      styles: {
        border: "2px solid var(--primary_button_background_gradient)",
      }
    }
   });
</script>