Shopping cart- usunięcie produktu z koszyka

Question

let carts = document.querySelectorAll('.add-cart');
let cartContent = document.querySelector('.products');
let products = [
    {
        name: 'Peper',
        tag: 'peperItem',
        price: 15,
        inCart: 0,
        "id": "1"
    },
    {
        name: 'Strawberries',
        tag: 'strawberriesItem',
        price: 10,
        inCart: 0,
        "id": "2"
    },
    {
        name: 'Green Beans',
        tag: 'greenBeansItem',
        price: 5,
        inCart: 0,
        "id": "3"
    },
    {
        name: 'Juice',
        tag: 'juiceItem',
        price: 20,
        inCart: 0,
        "id": "4"
    }
];

for(let i=0; i < carts.length; i++){
    carts[i].addEventListener('click', ()=> {
        cartNumbers(products[i]);
        totalCost(products[i]);
    });
}

function onLoadCartNumbers(){
    let productNumbers = localStorage.getItem('cartNumbers');

    if(productNumbers){
        document.querySelector('.cart-items').textContent = productNumbers;
    }
}
function cartNumbers(product){
    let productNumbers = localStorage.getItem('cartNumbers');
    productNumbers = parseInt(productNumbers);
    
    if(productNumbers){
        localStorage.setItem('cartNumbers',productNumbers+1);
        document.querySelector('.cart-items').textContent = productNumbers+1;
    } else{
        localStorage.setItem('cartNumbers',1);
        document.querySelector('.cart-items').textContent = 1;
    }
    setItems(product);
}

function setItems(product){
    let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);

    if(cartItems != null){

        if(cartItems[product.tag] == undefined){
            cartItems = {
                ...cartItems,
                [product.tag]: product
            }
        }
        cartItems[product.tag].inCart += 1;
    }
    else{
        product.inCart = 1;
        cartItems = {
            [product.tag] : product
        }
    }
    localStorage.setItem('productsInCart', JSON.stringify(cartItems));
}

function totalCost(product){
    let cartCost = localStorage.getItem('totalCost');
    
    if(cartCost != null){
        cartCost = parseInt(cartCost);
        localStorage.setItem('totalCost', cartCost + product.price);
    }else {
        localStorage.setItem('totalCost', product.price);
    }
}

function displayCart(){
    let cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);
    let productContainer = document.querySelector('.products');
    let cartCost = localStorage.getItem('totalCost');
    
    if(cartItems && productContainer){
        productContainer.innerHTML = '';
        Object.values(cartItems).map(item => {
            productContainer.innerHTML += `
            <div class="product">
                <i class="fas fa-trash-alt remove-item"></i>
                <img src="./images/${item.tag}.jpg">
                <span>${item.name}</span>
            </div>
            <div class="price">$${item.price},00</div>
            <div class="quantity">
                <i class="fas fa-minus minus-item"></i>
                <span>${item.inCart}</span>
                <i class="fas fa-plus plus-item"></i>
            </div>
            <div class="total">
                $${item.inCart * item.price},00
            </div>
            `
        });
        productContainer.innerHTML += `
            <div class="basketTotalContainer">
            <h4 class="basketTotalTitle>
                Basket total
            </h4>
            <h4 class="basketTotal">
                Your Total
                </br></br>
                $${cartCost},00
            </h4>
        ` 
    }
}
onLoadCartNumbers();
displayCart();

Pomoże ktoś z usunięciem produktu z koszyka poprzez naciśnięcie ikonki fa-trash? Program napisany w Vanilla JS. Z góry dziękuję za pomoc.

Comments

W jakiej formie jest zaimplementowany koszyk na stronie - czy to localStorage i z niego chcesz usunąć konkretny produkt?

---

Tak strona korzysta z localStorage. Chcę usunąć produkt z koszyka i przy tym zaktualizować oczywiście inne rzeczy jak całkowita cena, ilość produktów w koszyku itp...

Answer 1

Usunięcie produktu z localStorage można zrobić analogicznie do funkcji setItems, a może i nawet wewnątrz niej - chociaż wtedy tą funkcję bym podzielił na dwie osobne: addItem i removeItem, które były by wołane przez setItems.

Pobierz produkty z localStorage, sparsuj na obiekt, zaktualizuj odpowiednie dane produktu w aplikacji i na koniec usuń operatorem delete (lub przypisz w to miejsce null) obiekt reprezentujący dany produkt z głównego obiektu (pobranego z localStorage). Na koniec zserializuj całość i umieść w localStorage (tak, jak w 32 linijce).

Jeśli będziesz mieć konkretne pytania, to daj znać.

Comments

document.querySelector('body').addEventListener('click', function(event) {
	// event.target is the clicked item
	if (!event.target) { return; }

	// Check if the event.target is a remove button
	if (event.target.matches('.remove-item')) {
		removeItem();
	}
});

const removeItem = (product) => {
    let cartItems = localStorage.getItem("productsInCart");
    let cartNumbers = localStorage.getItem("cartNumbers");
    let totalCost = localStorage.getItem("totalCost");
    cartItems = JSON.parse(cartItems);
    if (cartItems != null) {
        if (cartItems[product.tag] == undefined) {
          cartItems = {
            ...cartItems,
            [product.tag]: product,
          };
        }
        cartItems[product.tag].inCart = null;
      } else {
        product.inCart = 1;
        cartItems = {
          [product.tag]: product,
        };
      }
      localStorage.removeItem(cartItems[product.tag]);
}

Nie wiem za bardzo jak to zrobić żeby usunąć konkretny produkt. Consola wyświetla tag jako undefined. 

---

W którym miejscu tag jest undefined? Funkcję removeItem wołasz w linii 7 bez żadnego parametru, więc jej argument product powinien być undefined, a zatem przy próbie odczytu jakiegokolwiek property (w tym tag) tego argumentu powinno rzucać błędem.

---

document.querySelector('body').addEventListener('click', function(event) {
	// event.target is the clicked item
	if (!event.target) { return; }

	// Check if the event.target is a remove button
	if (event.target.matches('.remove-item')) {
		removeItem(product);
	}
});

const removeItem = (product) => {
    let cartItems = localStorage.getItem("productsInCart");
    let cartNumbers = localStorage.getItem("cartNumbers");
    let totalCost = localStorage.getItem("totalCost");
    cartItems = JSON.parse(cartItems);
    if (cartItems != null) {
        if (cartItems[product.tag] == undefined) {
          cartItems = {
            ...cartItems,
            [product.tag]: product,
          };
        }
        cartItems[product.tag].inCart = null;
      } else {
        product.inCart = 1;
        cartItems = {
          [product.tag]: product,
        };
      }
      localStorage.removeItem(cartItems[product.tag]);
}

Ok no tak, lecz gdy wrzucę product jako parametr to wyrzuca błąd że product is not defined w 92 linijce.

---

W 92 linijce? Powyższy fragment kodu ma 31 linijek. W 7 linijce product może być undefined, bo w callbacku event listenera nie tworzysz tej zmiennej (a zakładam, że ta zmienna nie jest dostępna w wyższych scope'ach).

Jeśli chcesz usunąć produkt, to musisz przekazać albo jego referencję (może da radę dobrać się do niej po event.target), albo indeks (jeśli jest umieszczony na jakiejś liście) lub cokolwiek, po czym można go zidentyfikować i usunąć. Chyba, że traktujesz kolekcję produktów jako kolejkę LIFO/FIFO, to usunąć produkt możesz poprzez użycie metod Array.prototype.[shift/pop] (lub w analogiczny sposób, jeśli to nie są stricte tablice).

Answer 2

Trzymaj sobie to jako tablice obiektow, wyszukaj z Array.prototype.findIndex w połączeniu  z Array.prototype.splice powinnonwystarczyc w taki najszybszy sposób. Gdzie to zapisujesz nie ma znaczenia, ale LS nie jest dobrym miejscem na takie informacje.