I've been developing a shopping cart application that utilizes a JSON file to store menu items. Using JavaScript, I have successfully rendered the menu items in HTML by creating a forEach loop and using document.createElement() along with appendChild(). When a user clicks on an "Add to Cart" button, I capture the details of the selected menu item, retrieve its price from the JSON file, and then invoke a helper function to calculate the final price.
QUERY:
My current challenge is storing the user's selected items in localStorage and then utilizing this data to display Cart Details. How can I achieve this? Could you provide a relevant code snippet based on my existing code? Additionally, I need guidance on how to store the image details of the menu item in localStorage.
SAMPLE CODE:
store.js
//Function triggered when "Add to Cart" button is clicked
function addToCartClicked(event) {
//Fetch all details of the selected item
var button = event.target;
var shopItem = button.parentElement.parentElement;
var title = shopItem.getElementsByClassName("shop-item-title")[0].innerText;
var price = shopItem.getElementsByClassName("shop-item-price")[0].innerText;
var sizePrices = document.getElementsByName("sizes");
var size_price;
for (var i = 0; i < sizePrices.length; i++) {
if (sizePrices[i].checked) {
size_price = sizePrices[i].value;
break;
}
}
var imageSrc = shopItem.getElementsByClassName("shop-item-image")[0].src;
price = parseFloat(price.replace("Rs.", "")) + parseFloat(size_price);
console.log(price);
addItemToCart(title, price, imageSrc, size_price);
updateCartTotal();
}
//Utility function for addToCartClicked
function addItemToCart(title, price, imageSrc, size_price) {
var cartRow = document.createElement("div");
cartRow.classList.add("cart-row");
var cartItems = document.getElementsByClassName("cart-items")[0];
var cartItemNames = cartItems.getElementsByClassName("cart-item-title");
var cartRowContents = `
<div class="cart-item cart-column">
<img class="cart-item-image" src="${imageSrc}" width="100" height="100">
<span class="cart-item-title">${title}</span>
<span class="cart-item-size">"Rs.${size_price}"</span>
</div>
<span class="cart-price cart-column">${price}</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="1">
<button class="btn btn-danger" type="button">REMOVE</button>
</div>`;
cartRow.innerHTML = cartRowContents;
cartItems.append(cartRow);
cartRow.getElementsByClassName("btn-danger")[0].addEventListener("click", removeCartItem);
cartRow.getElementsByClassName("cart-quantity-input")[0].addEventListener("change", quantityChanged);
}
data.json
{
"pizza": [
{
"id": 1,
"name": "Tandoori Pizza",
"image": "Images/pizza.png",
"price": "Rs.200",
"sizes": { "Small": 100, "Medium": 200, "Large": 300 }
},
{
"id": 2,
"name": "Veggie Supreme",
"image": "Images/pizza.png",
"price": "Rs.250",
"sizes": { "Small": 100, "Medium": 200, "Large": 300 }
}
]
}
I'm looking for guidance on implementing localStorage for storing selected items and rendering them under Cart Items. Any insights provided should be purely JavaScript-based as that is my preferred approach.