I’m creating a shopping cart ,in which I am having a problem that I am unable to get the items from local storage and display it on my page ,I’m new to web development so it’s so confusing can you guy’s take a look at my code and tell me what am I doing wrong here.
Here’s my JavaScript
let shopItemsData = [
{
id: "jfhgbvnscs",
name: "Casual Shirt",
price: 45,
desc: "Lorem ipsum dolor sit amet consectetur adipisicing.",
img: "images/img-1.jpg",
},
{
id: "ioytrhndcv",
name: "Office Shirt",
price: 100,
desc: "Lorem ipsum dolor sit amet consectetur adipisicing.",
img: "images/img-2.jpg",
},
{
id: "wuefbncxbsn",
name: "T Shirt",
price: 25,
desc: "Lorem ipsum dolor sit amet consectetur adipisicing.",
img: "images/img-3.jpg",
},
{
id: "thyfhcbcv",
name: "Mens Suit",
price: 300,
desc: "Lorem ipsum dolor sit amet consectetur adipisicing.",
img: "images/img-4.jpg",
},
];
// everytime u slecetd cart its gona store the data in the basket
let basket = JSON.parse(localStorage.getItem("data")) || [];
const productsContainer = document.querySelector(".products");
function displayProducts(data) {
productsContainer.innerHTML = data
.map((item) => {
let { id, name, price, desc, img } = item;
let search = basket.find((x) => x.id === id || []);
return `
<div id=product-id-${id} class="product">
<img src=${img} alt="">
<div class="details">
<h3>${name}</h3>
<span>${desc}</span>
<div class="price">
<h3>${"$ " + price}</h3>
<div class="buttons">
<i onclick="decrement(${id})" class="ri-subtract-fill"></i>
<span id=${id} class="quantity" >${
search.item === undefined ? 0 : search.item
}</span>
<i onclick="increment(${id})" class="ri-add-line"></i>
</div>
</div>
</div>
</div>
`;
})
.join("");
}
displayProducts(shopItemsData);
/**
* first search in basket that if the item exist or not if not push the item in basket and if yes increase the basket's item quantity
**/
let increment = (id) => {
let selectedItem = id;
let search = basket.find((x) => x.id === selectedItem.id);
if (search === undefined) {
basket.push({
id: selectedItem.id,
item: 1,
});
} else {
search.item += 1;
}
// console.log(basket);
localStorage.setItem("data", JSON.stringify(basket));
upgrade(selectedItem.id);
};
let decrement = (id) => {
let selectedItem = id;
let search = basket.find((x) => x.id === selectedItem.id);
if (search === undefined) return;
else if (search.item === 0) return;
else {
search.item -= 1;
}
// console.log(basket);
localStorage.setItem("data", JSON.stringify(basket));
upgrade(selectedItem.id);
};
let upgrade = (id) => {
let search = basket.find((x) => x.id === id);
// console.log(search.item);
document.getElementById(id).innerHTML = search.item;
calculation();
};
let calculation = () => {
let cartIcon = document.getElementById("cartAmount");
cartIcon.innerHTML = basket.map((x) => x.item).reduce((x, y) => x + y, 0);
};
// Saving data in local storage
I tried other resources and videos to get help but I am unable to solve this problem.
Thanks in advance