Estoy teniendo un poco de problemas con este problema. Estoy trabajando en el proyecto de una aplicación de comercio electrónico que funciona en varias páginas html. Logré enviar productos a través de la página html del carrito, pero parece que no puedo encontrar una manera de actualizar en esta página solo la cantidad de un producto y no enviar todos los elementos de dicho producto (imágenes, identificación, etc.). Al hacer clic, si el producto existe, solo quiero que se actualice la cantidad. Aquí está el código, si alguno de ustedes puede ayudarme, se lo agradecería mucho.
setItems(kanap); function setItems(kanap) { let cart = JSON.parse(localStorage.getItem('cart')); let imgKanap = kanap.imageUrl; let idKanap = kanap._id; let colorKanap = colors.value; let quantityKanap = parseInt(quantity.value); let key = idKanap + ' ' + colorKanap; let cartItem = { id: idKanap, color: colorKanap, quantity: quantityKanap, kanap: kanap }; if (cart === null) { cart = []; } cart.push(cartItem); localStorage.setItem('cart', JSON.stringify(cart)); function addProduct(cartItem) { var found = false; for (key in cartItem) { if (cartItem[key].idKanap == idKanap) { cartItem[key].quantityKanap += quantityKanap; found = true; break; } } if (!found) { cart.push(cartItem); } } addProduct(); } <div class="item__content__addButton"> <button id="addToCart" type="submit">Ajouter au panier</button> </div> <section class="cart"> <!-- <section id="cart__items"> <article class="cart__item" data-id="{product-ID}"> <div class="cart__item__img"> <img id ="image" alt="Photographie dun canapé"> </div> <div class="cart__item__content"> <div class="cart__item__content__titlePrice"> <h2 class=title></h2> <p class =price></p> </div> <div class="cart__item__content__settings"> <div class="cart__item__content__settings__quantity"> <p class= quantity>Qté : </p> <input type="number" class="itemQuantity" name="itemQuantity" min="1" max="100" value=""> </div> <div class="cart__item__content__settings__delete"> <p class="deleteItem">Supprimer</p> </div> </div> </div> </article> --> </section>Hay algunos enfoques que puede tomar, pero estoy usando .find para buscar en su carrito.
Si la función .find() encuentra un artículo con la misma id que está a punto de agregar, aumentará la cantidad del artículo existente en lugar de agregar otro objeto con la misma identificación.
Usé un almacenamiento local simulado ya que el almacenamiento local no funciona en estos fragmentos, así que simplemente ignórelo y use lo que ha estado haciendo para acceder al almacenamiento local.
let mockLS = null; // guessed at the structure here, you may have something slightly different const exampleItem = { _id: "abc", imageUrl: "imageurlexample", colors: { value: "red" }, quantity: { value: 1 } } const exampleItem2 = { _id: "abc2", imageUrl: "imageurlexample2", colors: { value: "blue" }, quantity: { value: 1 } } function setItems(kanap) { //let cart = JSON.parse(localStorage.getItem('cart')); // using a mock localstorage here since it doesn't work within this snippet, use what you currently have instead let cart = mockLS; let imgKanap = kanap.imageUrl; let idKanap = kanap._id; let colorKanap = kanap.colors.value; let quantityKanap = parseInt(kanap.quantity.value); let key = idKanap + ' ' + colorKanap; let cartItem = { id: idKanap, color: colorKanap, quantity: quantityKanap //kanap: kanap not sure why you want the whole obj here so I left this one out }; if (cart === null) { cart = []; } // here is the case where cart exists and there may be the same item in it const itemExists = cart.find(item => { if(item.id === idKanap) { item.quantity += quantityKanap; return true; } return false; }) if (!itemExists) { cart.push(cartItem); } //localStorage.setItem('cart', JSON.stringify(cart)); mockLS = cart; } setItems(exampleItem); setItems(exampleItem2); setItems(exampleItem); console.log(mockLS)