behavior getCartData()
def toINR(num)
return num.toLocaleString('en-IN', {style:'currency', currency:'INR', trailingZeroDisplay:'stripIfInteger'})
end
on load
if localStorage
set value of #checkout-data to localStorage['cartItems']
then set $cartItems to localStorage['cartItems'] as Object
-- then js console.log(JSON.stringify($cartItems, null, 4)) end
then set $cartTotal to localStorage['cartTotal'] as Number
if $cartTotal is not 0
set my @style to 'display:block'
for item in $cartItems
if item.type is 'kit'
append `
Discovery Kit — ${item.name}
${toINR(item.price)}incl. tax
` to #data
end
if item.type is 'custom'
append `
Make Your Own — ${item.size} (${item.variant})
${toINR(item.price)}incl. tax
` to #data
set tempCounter3 to 1
repeat item.bottles.length times index i
set ingredient1 to ''
if item.bottles[i].ingredients[0][0] exists
then set ingredient1 to `${item.bottles[i].ingredients[0][0]}`
end
set ingredient2 to ''
if item.bottles[i].ingredients[0][1] exists
then set ingredient2 to `, ${item.bottles[i].ingredients[0][1]}`
end
set ingredient3 to ''
if item.bottles[i].ingredients[0][2] exists
then set ingredient3 to `, ${item.bottles[i].ingredients[0][2]}`
end
set ingredient4 to ''
if item.bottles[i].ingredients[0][3] exists
then set ingredient4 to `, ${item.bottles[i].ingredients[0][3]}`
end
set ingredient5 to ''
if item.bottles[i].ingredients[0][4] exists
then set ingredient5 to `, ${item.bottles[i].ingredients[0][4]}`
end
set ingredient6 to ''
if item.bottles[i].ingredients[0][5] exists
then set ingredient6 to `, ${item.bottles[i].ingredients[0][5]}`
end
if item.bottles[i].engraving is 'Yes'
set cardEngravingDecision to 'yes'
then set cardEngravingCost to `₹${item.bottles[i].engravingCost} Extra`
then set cardEngravingFont to item.bottles[i].engravingFont
then set cardEngraving to item.bottles[i].engravingChars
else if item.bottles[i].engraving is 'No'
set cardEngravingDecision to 'no'
then set cardEngravingCost to '—'
then set cardEngravingFont to 'nothing'
then set cardEngraving to '—'
end
if item.bottles.length is 1
append `
Bottle Ingredients: ${ingredient1}${ingredient2}${ingredient3}${ingredient4}${ingredient5}${ingredient6}
Bottle Engraving: ${cardEngravingCost}${cardEngraving}
` to #{item.uuid}
else
append `
Bottle ${tempCounter3} Ingredients: ${ingredient1}${ingredient2}${ingredient3}${ingredient4}${ingredient5}${ingredient6}
Bottle ${tempCounter3} Engraving: ${cardEngravingCost}${cardEngraving}
` to #{item.uuid}
end
then increment tempCounter3
end
end
if item.type is 'reorder'
append `
Reorder Your Blend — ${item.size} (${item.variant})
${toINR(item.price)}incl. tax
` to #data
set tempCounter3 to 1
repeat item.bottles.length times index i
set blendName to ''
if item.bottles[i].bottleBlend exists
then set blendName to `${item.bottles[i].bottleBlend}`
end
if item.bottles[i].engraving is 'Yes'
set cardEngravingDecision to 'yes'
then set cardEngravingCost to `₹${item.bottles[i].engravingCost} Extra`
then set cardEngravingFont to item.bottles[i].engravingFont
then set cardEngraving to item.bottles[i].engravingChars
else if item.bottles[i].engraving is 'No'
set cardEngravingDecision to 'no'
then set cardEngravingCost to '—'
then set cardEngravingFont to 'nothing'
then set cardEngraving to '—'
end
if item.bottles.length is 1
append `
Bottle Blend: ${blendName}
Bottle Engraving: ${cardEngravingCost}${cardEngraving}
` to #{item.uuid}
else
append `
Bottle ${tempCounter3} Blend: ${blendName}
Bottle ${tempCounter3} Engraving: ${cardEngravingCost}${cardEngraving}
` to #{item.uuid}
end
then increment tempCounter3
end
end
end
then set innerHTML of #total-amount to toINR($cartTotal)
else
set @style of #empty-message to 'display:block'
end
end
js
// Function to turn a number into an INR currency formatted-number
const inr = (num) => {
return num.toLocaleString('en-IN', {
style: 'currency',
currency: 'INR',
trailingZeroDisplay: 'stripIfInteger',
});
};
// Custom event to dispact on removing an item from cart
const removedfromcart = () =>
new CustomEvent('removedfromcart', {
bubbles: true,
detail: { removed: true },
});
// Custom event to dispact on updating an item in cart
const updatedcart = () =>
new CustomEvent('updatedcart', {
bubbles: true,
detail: { updated: true },
});
// For all remove buttons
const removables = document.querySelectorAll('.remove-button');
removables.forEach((removeBtn) => {
// On clicking any remove button
removeBtn.addEventListener('click', (e) => {
const itemUUID = e.target.getAttribute('data-uuid');
let cartItems = JSON.parse(localStorage.getItem('cartItems'));
cartItems = cartItems.filter((item) => {
return item.uuid !== itemUUID;
});
localStorage.setItem('cartItems', JSON.stringify(cartItems));
e.target.dispatchEvent(removedfromcart());
window.location.reload(true);
});
});
// For all minus buttons
const minusButtons = document.querySelectorAll('.minus');
minusButtons.forEach((minus) => {
// On clicking any minus button
minus.addEventListener('click', (e) => {
const itemUUID = e.target.getAttribute('data-uuid');
let itemQty = document.querySelector(`.${itemUUID} .qty .number`);
let itemTotal = document.querySelector(`.${itemUUID} .amount`);
let cartTotal = document.getElementById('total-number');
let checkoutData = document.getElementById('checkout-data');
let cartItems = JSON.parse(localStorage.getItem('cartItems'));
let chosenItem = cartItems.find((item) => {
return item.uuid === itemUUID;
});
if (chosenItem.quantity > 1) {
chosenItem.quantity = chosenItem.quantity - 1;
chosenItem.price = chosenItem.quantity * 999;
localStorage.setItem('cartItems', JSON.stringify(cartItems));
itemQty.innerHTML = chosenItem.quantity;
itemTotal.innerHTML = inr(chosenItem.price);
e.target.dispatchEvent(updatedcart());
let updatedTotal = JSON.parse(localStorage.getItem('cartTotal'));
cartTotal.innerHTML = inr(updatedTotal);
checkoutData.value = localStorage.getItem('cartItems');
} else if (chosenItem.quantity === 1) {
cartItems = cartItems.filter((item) => {
return item.uuid !== itemUUID;
});
localStorage.setItem('cartItems', JSON.stringify(cartItems));
e.target.dispatchEvent(removedfromcart());
window.location.reload(true);
}
});
});
// For all plus buttons
const plusButtons = document.querySelectorAll('.plus');
plusButtons.forEach((plus) => {
// On clicking any plus button
plus.addEventListener('click', (e) => {
const itemUUID = e.target.getAttribute('data-uuid');
let itemQty = document.querySelector(`.${itemUUID} .qty .number`);
let itemTotal = document.querySelector(`.${itemUUID} .amount`);
let cartTotal = document.getElementById('total-number');
let checkoutData = document.getElementById('checkout-data');
let cartItems = JSON.parse(localStorage.getItem('cartItems'));
let chosenItem = cartItems.find((item) => {
return item.uuid === itemUUID;
});
chosenItem.quantity = chosenItem.quantity + 1;
chosenItem.price = chosenItem.quantity * 999;
localStorage.setItem('cartItems', JSON.stringify(cartItems));
itemQty.innerHTML = chosenItem.quantity;
itemTotal.innerHTML = inr(chosenItem.price);
e.target.dispatchEvent(updatedcart());
let updatedTotal = JSON.parse(localStorage.getItem('cartTotal'));
cartTotal.innerHTML = inr(updatedTotal);
checkoutData.value = localStorage.getItem('cartItems');
});
});
end
end