JAVASCRIPT

clear for me API jquery

// Clear for me API jquery https://www.clearforme.com/


<div class="dialog" id="ingredients">
    <div class="dialog__content"></div>
</div>

<div class="ingredient-pop-up">
    
</div>

<style>
    .dialog__content span {
        display: block;
        cursor: pointer;
    }
    .ingredient-pop-up {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 500px;
        max-width: 100%;
        padding: 30px;
        transform: translate(-50%, -50%);
        background: #fff;
        box-shadow: 0px 0px 17px rgb(0 0 0 / 61%);
        z-index: 101;
    }
    .ingredient-pop-up.show {
      display: block !important;
    }
    .close_ingredients {
        position: absolute;
        right: 0;
        top: 0;
        background: #000;
        z-index: 2;
        width: 35px;
        height: 35px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .close_ingredients svg {
        width: 30px;
        height: 30px;
    }
    .close_ingredients svg path {
        fill: #fff;
        
    }
</style>


<script>
    window.addEventListener('load', function() {
      var $ingredientsListElement = $('.dialog#ingredients .dialog__content');
      var bearerToken = 'Bearer abc123' // Use your API token in a
      var sku = '{{ product.selected_or_first_available_variant.sku }}';
      var clientName = 'you client name';
  
      $.ajax({
        contentType: 'application/json',
        headers: {
          'Authorization': bearerToken 
        },
        dataType: 'json',
        method: 'GET',
        url: 'https://server.clearforme.com/api/app/products/details?sku=' + sku + '&clientname=' + clientName
      })
      // We now have the product details from the API, which also includes
  
      .then(function(response) {
  
      var ingredientsListHTML = '';
      var ingredientGroups = response.productIngredients[0].functionGroup;
  
      ingredientGroups.forEach(function(group) {
        group.ingredients.forEach(function(ingredient) {
          var name = ingredient.ingredientName;
          var singleIngredientHTML = '<span data-ingredient="' + name + '">'
          + name + '</span>';
          ingredientsListHTML += singleIngredientHTML;
        });
      });
  
      $ingredientsListElement.prepend(ingredientsListHTML);
      })
      .catch(function(response) {
      // If the API request fails, add error handling code here. For example,
      });
  
      $ingredientsListElement.on('click', 'span[data-ingredient]', function() {
      //console.log("Test");
  
        var ingredientName = $(this).text();
  
        // Let's make the API request.
        $.ajax({
        contentType: 'application/json',
        headers: {
        'Authorization': bearerToken
        },
        dataType: 'json',
        method: 'GET',
        url:
        'https://server.clearforme.com/api/app/ingredients/definition?sku=' + sku + '&ingredientName=' + ingredientName + '&clientname=' + clientName
        }).then(function(response) {
  
        // API "response" JSON will have the ingredient name and definition.
        // Add the definition to the pop-up modal.
        var definition = response.definition;
        $('.ingredient-pop-up').text(definition);
        $('.ingredient-pop-up').append("<div class='close_ingredients'> <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'/></svg> </div>");
        $('.ingredient-pop-up').addClass('show');
      })
      })
    });
  
  </script>