How can I add remove items and increment the quantity and increase the price while incrementing or decrementing the quantity of my cart. code by telmo

Question

This is the code from telmo sampiao's shopping cart series, im missing remove items and increment/decrement buttons while also including it on local storage.

function displayCart(){
    let cartItems = localStorage.getItem("productsInCart");
    cartItems = JSON.parse(cartItems);
    let productContainer = document.querySelector(".products");
    let cartCost = localStorage.getItem('totalCost');
    console.log(cartItems);
    if( cartItems && productContainer){
        productContainer.innerHTML = '';
        Object.values(cartItems).map(item => {
            productContainer.innerHTML += `
            <div class="product">
                <button class="btn btn-danger remove">Remove</button>&nbsp;&nbsp;
                <img src="./img/${item.tag}.jpg">
                <span>${item.name}</span>
                </div>
                <div class="price">
                ₱${item.price}.00
                </div>
                <div class="quantity"><i class="fa-solid fa-plus"></i>&nbsp;<span>${item.inCart}</span>&nbsp;<i class="fa-solid fa-minus"></i></div>
                <div class="total">
                    ₱${item.inCart * item.price}.00
                </div>
            `
        });
        productContainer.innerHTML += `
            <div class="basketTotalContainer">
            <h4 class="basketTotalTitle">
                Cart Total
                </h4>
                <h4 class="basketTotal">
                ₱${cartCost}.00
                </h4>
`;
}
}

Im not good at javascript I tried many diffrenet things but doesnt work

Answer 1

You only store one value for several different inputs. You need to identify each value for each input seperately.

HTML

Add a unique attribute "data-key". Or you can use the "id" of each element.

<div class="item">
<button class="plus" data-qty="1">+</button>
<input class="count" data-qty="1" type="number" min="1" max="5" value="1" data-key="myInput1"> <!-- add a unique key -->
<button class="minus" data-qty="1">-</button>

+ -

Jquery

I altered your code. See comments below. Now "data-key" is used as key for the localStorage.

<script>

let itemData = {
    itemQty: 1
};

if (localStorage.getItem("itemData") === null) {
    localStorage.setItem("itemData", JSON.stringify(itemData));
}

// new code for initializing
// parse all inputs and user their keys to find the corresponding itemdata
var allinputs = $('.count');

for (var i = 0; i < allinputs.length; i++) {

    // get data according to "data-key"
    var getItem = loadQuantity($(allinputs[i]).attr('data-key'));
   
    if (getItem != null) {
        $(allinputs[i]).val(getItem.itemQty);
    } else {
        // data not existing. Set global default value
        saveQuantity(JSON.stringify(itemData), $(allinputs[i]).attr('data-key')); // *1 set first parameter just to itemData
    }
}


$(".plus").click(function () {

    // use key to get itemdata of this input
    var keyOfInput = $(this).closest(".item").find(".count").attr('data-key');

    var getItem = loadQuantity(keyOfInput);
    getItem.itemQty = getItem.itemQty + 1;
    saveQuantity(getItem, keyOfInput);
    $(this).closest(".item").find(".count").val(getItem.itemQty);
});

$(".minus").click(function () {

    // use key to get itemdata of this input
    var keyOfInput = $(this).closest(".item").find(".count").attr('data-key');

    var getItem = loadQuantity(keyOfInput);

    if(getItem.itemQty != 1){
        getItem.itemQty = getItem.itemQty - 1;
    }

    saveQuantity(getItem, keyOfInput);
    $(this).closest(".item").find(".count").val(getItem.itemQty);
});

// added new parameter "key"
function saveQuantity(data, key) {
    localStorage.setItem(key, JSON.stringify(data));
}

function loadQuantity(key) {
    return JSON.parse(localStorage.getItem(key)); // *2 Change to JSON.parse(JSON.parse(localStorage.getItem(key)));
}