I am trying to implement product cart in my e-commerce site.
Everything is working fine but only on one page.
The main idea, is to store products inside the Map data structure. So the key is a product id and the value is the other information about product.
simple explanation how it works. More detailed below
{ key -> id:
value -> {
name: name,
image: image,
numberOfProducts: numberOfProducts,
price: numberOfProducts
}
}
As you can see, with this approach I have to initialize a variable with Map data structure in my App.js folder, whitch always updates when a new page opens and all data inside the Map clears, because it reinitialize the empty Map variable again with.
Here is the implementation of logic in Vanilla JS.
let cartMap = new Map;
localStorage.setItem("cartMap",JSON.stringify(cartMap))
let numberOfProducts = 1;
sessionStorage.setItem("amount",numberOfProducts)
function addToCart(name,id,price,image){
if(cartMap.has(id)){
cartMap.set(id,
{
name: name,
image: image,
numberOfProducts: ++numberOfProducts,
price: price*numberOfProducts
}
)
}
else{
numberOfProducts = 1;
cartMap.set(id,
{
name: name,
image: image,
numberOfProducts: numberOfProducts,
price: price*numberOfProducts
}
)
}
alerting()
}
const cartContent = document.querySelector('.modal-content-cart');
function alerting(){
cartContent.innerHTML = Array.from( cartMap ).map(
(([key,value]) => (
`
<div class="container-form-cart" id="cart_${key}">
<button onclick="removeItemFromCart(${key})" type="button" class="delete-product-from-cart">
<img src="/images/remove-image.png" alt="${key}">
</button>
<img class="cart-image" src="${value.image}" alt="">
<h1 class="cart-name">
${value.name}
</h1>
<div class="amountOf">
<button onclick="increment(${key})" type="button" class="up">+</button>
<h1 class="total-price_${key}">${value.numberOfProducts}</h1>
<button onclick="decrement(${key})" type="button" class="down">-</button>
</div>
<h1 class="sum-price">
<p class="product-price-one_${key}">${value.price}</p>₽
</h1>
</div>
`
)
)
).join("");
}
function increment(id){
cartMap.set(
id,
{...cartMap.get(id),
numberOfProducts:cartMap.get(id).numberOfProducts+1,
price: cartMap.get(id).price+(cartMap.get(id).price/(cartMap.get(id).numberOfProducts))
}
)
document.querySelector(".total-price_"+id).textContent = cartMap.get(id).numberOfProducts
document.querySelector(".product-price-one_"+id).textContent = cartMap.get(id).price
}
function decrement(id){
cartMap.set(
id,
{...cartMap.get(id),
numberOfProducts:cartMap.get(id).numberOfProducts-1,
price: cartMap.get(id).price-(cartMap.get(id).price/(cartMap.get(id).numberOfProducts))
}
)
document.querySelector(".total-price_"+id).textContent = cartMap.get(id).numberOfProducts
document.querySelector(".product-price-one_"+id).textContent = cartMap.get(id).price
}
function removeItemFromCart(id){
cartMap.delete(id)
document.querySelector("#cart_"+id).remove()
}
First try
I’ve tried to move from Map implementation into Html/map version, it basically means that my HTML will be that Map with keys as a name of the div class and object info inside it, but with this case I got stuck with the innerHTML -> I can’t make it create again and again one more div if i add product to the card, and even thou i will face same problem with page switching I think it’s not a good implementation of product Cart.
<div class="modal-wrapper">
<form class="modal-content-cart animate">
<!-- Here will come the cart -->
</form>
</div>
Second try
I could’ve solve this problem with localStorage, but it can’t initialize inside a Map. We always have to first initialize the map then store it inside the localStorage, same with sessionStorage.
Conclusion
From all that thoughts and tries i came up with two questions.
Is there an ultimate way to initialize Map without reinitialize when the page reloads? and the second question, How can I use my HTML as Map, so i will add HTML blocks one after another inside the div,without replacing them.
If you need additional information, don’t be shy, go ahead and ask it.
