多次点击购物车商品数量不刷新

Question

当我点击一个产品时，我希望数量增加 1，该功能正在运行但未显示在购物车中，除非我添加了当时购物车中不存在的另一个产品。有帮助吗？

我试过了，但找不到错误。我认为是错误在“if(existe){...}”中，但不知道在哪里。

我对其进行了编辑以添加更多代码

const addToCart = document.querySelectorAll('.addToCart');
let carritoEl = document.querySelector('.ul');

let carrito = [];


 addToCart.forEach(btn => {
     btn.addEventListener('click', addToCarritoItem);});

 function addToCarritoItem(e){
     e.preventDefault();


     const boton = e.target;
     const item = boton.closest('.box'); 
    const itemTitle = item.querySelector('.producto-titulo').textContent;
    const itemPrice = item.querySelector('.precio').textContent;
    const itemImg = item.querySelector('.imgCart').src;
    const itemId = item.querySelector('.addToCart').getAttribute('data-id');
    

    const nuevoProducto = {

        title: itemTitle,
        price: itemPrice,
        image: itemImg,
        id: itemId,
        cantidad: 1

    };


    const existe = carrito.some(item => item.id === nuevoProducto.id); 

    console.log(existe);

    
    if(existe){

        const producto = carrito.map( item =>{
            if (item.id === nuevoProducto.id){
                item.cantidad++;
                return item;
            }else{
                return item;
            }
        });
    }else{
        addItemCarrito(nuevoProducto);
    }

 }

 function addItemCarrito(nuevoProducto){



    carritoSumaTotal();
    carrito.push(nuevoProducto);
    renderCarrito(); // 

 }

function renderCarrito(){
   // carritoEl.innerHTML = ""; //
    while(carritoEl.firstChild){
        carritoEl.removeChild(carritoEl.firstChild)
    };

    carrito.forEach((item) =>{

        carritoEl.innerHTML += `
        <li class="buyItem">
            <img src=${item.image}>
            <div class="productCartInfo">
                <h5 class="prdTitle">${item.title}</h5>
                <h6>${item.price}</h6>
                <div class="qnty">
                    <div>
                        <button class="mbtn">-</button>
                        <span class="countOfProduct">${item.cantidad}</span>
                        <button class="pbtn">+</button>
                    </div>
                    <div><i class="fas fa-times-circle dltProduct" data-id="${item.id}"></i></div>
                </div>
            </div>
        </li>
        `
    })


    carritoSumaTotal(); 
    
}

Answer 1

没有错误日志或任何演示，这是我的想法：这是因为您在增加数量后没有调用 renderCarrito 函数：

// Your Code
if(existe){
  const producto = carrito.map( item =>{
    if (item.id === nuevoProducto.id){
      item.cantidad++;
      return item;  // <--- Here you are just returning
    } else {
      return item;
    }
  }); // <--- You should probably call renderCarrito() after the mapping
} else {
  addItemCarrito(nuevoProducto);
}

这里有一个片段可以帮助您理解我要解释的内容：

if (existe) {
  // 1. map() would return an array
  //    Since you are updating the array contents, I would 
  //    suggest you use forEach() instead, like so:
  carrito.forEach(item => { 
    if (item.id === nuevoProducto.id) {
      item.cantidad++;
      // 2. No need to return item as this would update the item
      //    inside the carrito array directly
    }
    // 3. No need of 'else' block
    //    as you are incrementing only if the ids are same
  });
  
  // 4. Once you are done looping through
  //    you should probably invoke the renderCarrito() method here
  //    unless you want to do anything else
  renderCarrito();
} else {
  addItemCarrito(nuevoProducto);
}

多次点击购物车商品数量不刷新

Cart products quantity not refreshing when clicked multiple times

javascript

shopping-cart