// 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>