Fit Quiz for Size guide pages.html

<div class='wrapper'>
  <div class='categories'></div>
  <div class='easysize-embed'></div>
  <div style="display: none"><div class="fakeholder"></div></div>
</div>

<script async type="text/javascript" src="https://webapp.easysize.me/web_app_v1.0/js/easysize.js"></script>
<script type="text/javascript" async>
  // --- Fill in these details:
  let shop_id = '<shop_id>'; 
  let product_brand = '<your_easysize_brand>';

  let products = [
    {
      id: 1,
      category: 'Dresses',
      model: 'True to size',
      gender: 'female',
      sizes_in_stock: { 'S': 1, 'M':1, 'L': 1 },
      icon: 'https://popup.easysize.me/static/icons/categories/regular/dresses-female.png',
    },
    {
      id: 2,
      category: 'Pants & Trousers',
      model: 'True to size',
      gender: 'female',
      sizes_in_stock: { '30': 1, '31':1, '32': 1, '33': 1, '34': 1 },
      icon: 'https://popup.easysize.me/static/icons/categories/regular/pants-%26-trousers-female.png',
    }
  ];


  // --- Fit Quiz init. Only change these if you know what you are doing!
  let start_size_insights = () => {
    if (window.EasysizeSizeInsights) {
      let settings = Object.assign(
        EasySizeParametersDebug.product.model_settings[EasySizeParametersDebug.product.gender],
        { texts: EasySizeParametersDebug.features.size_insights_texts }
      )
  
      // Scale settings
      let scale_conf = {
        placeholder: '.wrapper',
        placeholder_type: 'before',
        visual: "text"
      }
  
      window.EasysizeSizeInsights(Object.assign(settings, scale_conf));
    }
  }

  let start_easysize = (product) => {
    var easysize_attributes = {
      "placeholder": '.fakeholder',
      "size_selector": '.fakeholder',
      "order_button_id": '.fakeholder',
      "shop_id": shop_id,
      "product_brand": product_brand,
      "product_type": product['category'],
      "product_model": product['model'],
      "product_gender": product['gender'],
      "product_id": product['id'],
      "user_id": "-1",
      "loaded": function() {
        /*
        This function call replaces the contents of all '.easysize-embed' elements with a widget
        */
        window.easy_size.embed();
        start_size_insights();
      },
      "sizes_in_stock": product['sizes_in_stock']
    };
  
    window.easy_size = new EasySize(easysize_attributes);
    window.easy_size.start();
  }

  
  // HTML list generation based on the chosen products.
  let categories_element = document.querySelector('.categories');
  products.forEach((i) => {
    let category = document.createElement('div');
    category.innerHTML = `
    <img src='${i['icon']}'></img>
    <span>${i['category']}</span>
`;
    category.className = 'category';
    category.onclick = function() {
      start_easysize(i);
      document.querySelector('.category.active')?.classList.remove('active');
      category.classList.add('active');
      document.querySelector('.easysize-embed').innerHTML = '<div class="loader"> </div>';
      document.querySelector('.size_insights').remove();
    }
    categories_element.appendChild(category);
  });

  // After we create the product list and Easysize has loaded, we simply 'click' the first element in order to render the widget on initial load
  window.addEventListener("easysize_ready", function() {
    document.querySelector('.category').click();
  });
</script>

<style> 
  .size_insights .size_insights--text-wrapper {
    text-align: center!important;
  }
  .wrapper {
    margin-top: 110px;
  }
  .size_insights + .wrapper {
    margin-top: 0px;
  }
  .main-page-title {
    text-align: center;
  }

  .page-width--narrow {
    max-width: var(--page-width) !important;
  }
  .wrapper {
    display: flex;
  }
  .easysize-embed {
    height: 500px;
    max-width: 600px;
    width: 100%;
    margin: auto;
    display: flex;
    align-items: center;
  }
  .categories {
    margin: 0 auto; 
  }
  .category {
    cursor: pointer;
    max-width: 100px;
    display: flex;
    margin-bottom: 10px;
  }
  .category span {
    width: 100px;
    margin: auto;
  }
  .category img {
    width: 100%;
  }
  .category.active {
    text-decoration: underline;
  }

  @media only screen and (max-width: 800px) {
    .wrapper {
      flex-direction: column;
    }
    .easysize-embed {
      height: 600px;
    }
  }
  
  /* CSS Loader util  */
  .loader {
    margin: auto;
    width: 50px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-right-color: #000;
    animation: spin 1s infinite linear;
  }
  .loader::before,
  .loader::after {    
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
    animation: spin 2s infinite;
  }
  .loader::after {
    margin: 8px;
    animation-duration: 3s;
  }
  @keyframes spin{ 
    100%{transform: rotate(1turn)}
  }
</style>