OXID

Our JavaScript snippet is the easiest way to integrate mySHOEFITTER into your website.

Add the Script

Add the following script tag add the end of your product pages, just before the </body> tag.
Below you will find an example how to dynamically pass the product id to the mySHOEFITTER script.

This is an example how to retrieve the product ID dynamically!
If you prefer to use server side rendering or other methods, please feel free to use them instead!

index.html

<!-- Load the mySHOEFITTER Script -->
<script src="https://js.myshoefitter.com/v1/script.js"></script>
 
<!-- Initialize mySHOEFITTER -->
<script type="application/javascript">
 
  // Function to retrieve the item ID from either window.DY.recommendationContext.data or window.dataLayer
  function retrieveProductId() {
    var id = null;
 
    // First attempt: Try to get the ID from window.DY.recommendationContext.data
    try {
      if (window.DY && window.DY.recommendationContext && Array.isArray(window.DY.recommendationContext.data) && window.DY.recommendationContext.data.length > 0) {
        id = window.DY.recommendationContext.data[0];
      }
    } catch (e) {
      console.log("mySHOEFITTER: Error accessing the ID from DY.recommendationContext:", e);
    }
 
    // If the ID was not found in the first attempt, try the second source: window.dataLayer
    if (id === null) {
      try {
        if (Array.isArray(window.dataLayer) && window.dataLayer.length > 0) {
          var lastEcommerceObject = window.dataLayer.slice().reverse().find(obj => obj.ecommerce && Array.isArray(obj.ecommerce.items) && obj.ecommerce.items.length > 0);
          id = lastEcommerceObject ? lastEcommerceObject.ecommerce.items[0].item_id : null;
        }
      } catch (e) {
        console.log("mySHOEFITTER: Error accessing the item_id from dataLayer:", e);
      }
    }
 
    return id; // Return the found ID or null if not found
  }
 
  // Use the retrieveItemId function to dynamically get the productId
  const productId = retrieveProductId();
 
  // Check if the productId was successfully retrieved
  if (productId) {
    // Initialize mySHOEFITTER with the dynamically retrieved Product ID
    myshoefitter.init({
      shopId: 'your-shop-id', // Replace 'your-shop-id' with your actual shop ID
      productId: productId // The dynamically retrieved Product ID
    });
  } else {
    console.warn("mySHOEFITTER: Product ID not found. myshoefitter initialization skipped.");
    // Hide mySHOEFITTER Button
    const button = document.getElementById('myshoefitter-button');
    if (button) {
      button.style.display = 'none';
    }
  }
</script>

Add the Button

Add this code below your "add to cart" button:

index.html

<button id="myshoefitter-button">Find the right size</button>

That's it. You are ready!

Novomind Shopify