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>
<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> <span>${item.inCart}</span> <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
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))); }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.