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>