cart.js=
import {products} from"../html/products.js";
export const cart=JSON.parse(localStorage.getItem('cart')) ||[
{}
];
let cartHTML="";
cart.forEach(x=>{
cartHTML+=`<div class="product" data-product-id="${x.id}">
<div class="image">
<img class="img" src="${x.image}" alt="Product Image">
</div>
<div class="content">
<h2>${x.name}</h2>
<p>Price:Rs.${x.price} </p>
<p>Quantity:<p id="quantity">${x.quantity}</p></p>
<button class="update">update</button><button class="delete">delete</button>
<br><br>
</div>
</div>`
});
document.querySelector(".totalHTML").innerHTML=cartHTML;
export function addToCart(event){
const ProductId= event.target.closest('.productParent').querySelector('.products').dataset.productId;
const Product= products.find(product=>product.id===ProductId);
const dropDownElement = event.target.closest('.content').querySelector('.select');
let selectedValue = Number(dropDownElement.value);
const matchingProduct =cart.find(x=>x.id===Product.id)
if(matchingProduct){
document.querySelector(`.product[data-product-id="${ProductId}"] #quantity`)+=selectedValue;
}else if(Product) {
Product.quantity = selectedValue;
cart.push(Product);
console.log("pushed");
}
localStorage.setItem('cart', JSON.stringify(cart));
};
const deleteBTNs=document.querySelectorAll('.delete');
deleteBTNs.forEach((x=>{
x.addEventListener("click", (e)=>{
const nearProduct =e.target.closest('.product')
const ProductId= nearProduct.dataset.productId;
console.log(nearProduct.dataset)
const updatedCart=cart.filter(x=>x.id !== ProductId)
console.log(updatedCart)
// localStorage.setItem("cart", JSON.stringify(updatedCart))
nearProduct.remove();
localStorage.setItem("cart", JSON.stringify(updatedCart));
// console.log(JSON.parse(localStorage.getItem('cart')))
})}));
script.js(main script file)
import {products} from"../html/products.js";
import {addToCart, toDelete, } from"../html/cart.js";
let productsHTML="";
products.forEach(x => {
productsHTML+=`
<div class=productParent><div class="products" data-product-id="${x.id}">
<div class="image">
<img class="img"src="${x.image}" alt="">
</div>
<div class="content">
<div class="productName">${x.name}</div>
<div class="productPrice">Rs.${x.price}</div>
<select name="number" class="select" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<button class="addtocart" >Add To Cart</button>
</div>
</div>
</div>`
});
document.querySelector(".totalHTML").innerHTML=productsHTML;
const buttons = document.querySelectorAll('.addtocart');
buttons.forEach(btn => {
btn.addEventListener("click", (e) => {
addToCart(e);
//for cart Quantity
const selectElement = e.target.closest('.content').querySelector('.select');
let selectedValue = Number(selectElement.value);
cartMath(selectedValue);
});
});
let cartQuantity=0;
export function cartMath(x){
cartQuantity+=x;
document.getElementById("cartQuantity").innerHTML=cartQuantity;
};
homepage.html(main html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/css/homepage.css">
</head>
<body>
<div class="nav"><a href="../html/cartpage.html">Cart</a><span id="cartQuantity">00</span>
</div>
<div class="totalHTML">
<!-- html that is now in script.js-->
</div>
</body>
<script src="script.js" type="module"></script>
<script src="products.js" type="module"></script>
<script src="cart.js" type="module"></script>
</html>
cartpage.html(cart html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/cartstyle.css">
<title>Add to Cart</title>
</head>
<body>
<div class="totalHTML">
</div>
<div class="cart-summary">
<h2>Cart Summary</h2>
<p>Total Quantity: <span id="total-quantity">0</span></p>
<p>Total Sum: Rs. <span id="total-sum">0</span></p>
<p>Delivery Charge: Rs. 250</p>
<p>Dashain Offer: Rs. -50</p>
<h3>Total Payable: Rs. <span id="total-payable">0</span></h3>
<button class="buynow">Buy Now</button>
</div>
</body>
<script src="cart.js" type="module"></script>
</html>
products.js(the storing of items)
export const products=[
{
id:"1",
name:"shoe",
image:"images/products/knit-athletic-sneakers-gray.jpg",
price:1200,
quantity:1,
},
{
id:"2",
name:"shirt",
image:"images/products/adults-plain-cotton-tshirt-2-pack-teal.jpg",
price:1000,
quantity:1,
},
{
id:"3",
name:"Sandals",
image:"images/products/women-beach-sandals.jpg",
price:200,
quantity:1,
},
{
id:"4",
name:"Dinner Plate",
image:"images/products/6-piece-white-dinner-plate-set.jpg",
price:2750,
quantity:1,
},
];
So I tried putting the localStorage here and there but didnt work.
i got a suggestion to rerender but i couldnt do it.
another thing i think would work is after clicking delete update the html in cart.js file itself