Dobry Wieczór ,
mam zagwozdkę, chodzi o usuwanie elementów z koszyka.
Po próbie usunieciu elementu z koszyka, usuwa mi sie on z localStorage i dokładnie o to mi chodziło, ale nie usuwa sie z koszyka, element dalej sie wyświetla w currentCartProducts.
Jak ponownie wyrenderowac to w currentCartProducts ?
import { changeValueOfCounter } from "./utils.js";
const getCartProducts = async () => {
const response = await fetch('https://fakestoreapi.com/products');
const products = await response.json();
return products;
};
const showCartProducts = async () => {
const cartContainer = document.querySelector('.cart_container');
let products = [];
try {
products = await getCartProducts();
} catch (e) {
console.log(e)
}
let cartProductsID = (JSON.parse(localStorage.getItem('cartArray'))) || [];
let currentCartProducts = products.filter(product => cartProductsID.some(item => item == product.id)).map((product) => {
cartContainer.innerHTML += `
<div class="cart_container--product">
<div class="cart_product--image">
<img src=${product.image}>
</div>
<p class="cart_product--desc">${product.title}</p>
<div class="cart_product-price--quantinity">
<p>${product.price}$</p>
<select class="cart_select" data-id=${product.id}>
<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>
</select>
<i class="fa-solid fa-trash" data-delete=${product.id}></i>
</div>
<div>`;
})
const deleteProduct = (e) => {
let deleteIconId = e.target.getAttribute("data-delete");
let deleteCurrentProduct = cartProductsID.filter((product) => {return product !== deleteIconId});
if (deleteCurrentProduct) {
cartProductsID = deleteCurrentProduct;
localStorage.setItem('cartArray', JSON.stringify(deleteCurrentProduct));
changeValueOfCounter()
console.log(cartProductsID)
}
}
const deleteBtn = document.querySelectorAll('[data-delete]').forEach((btn) => {
btn.addEventListener('click', deleteProduct);
});
}
document.addEventListener('DOMContentLoaded', showCartProducts);