1

Comunidad, ¡los saludo! Tengo un problema realizando un carrito de compras y es que cuando agrego un producto al mismo, se duplica de inmediato, es decir, doy click y en vez de aparecer en el carrito que agregué 1 producto aparecen 2 y luego si le doy otra vez y agrego 2 aparecen 3 y así sucesivamente. Siempre se suma 1 de más. De seguro esto tiene que ver con el ciclo sobre el array de productos y cada vez que se cumple el mismo lo recorre dos veces pero he hecho múltipes pruebas y no logro dar con el error. Lo más probable es que esté en la función agregar cantidad o la función comprar. Estaré agradecido por la ayuda.

// FUNCION PARA GENERAR INTERFAZ DE PRODUCTOS
function productoUI(productos,id){
// EL ARRAY DE PRODUCTO GLOBALES
$(id).empty();
for (const producto of productos) {
$(id).append(`<div class="card"style="width: 18rem;">
<img src="${producto.img}"class="card-img-top"alt="..." >
<div class="card-body">
  <h5 class="card-title"><strong>${producto.modelo}</strong></h5>
  <h4> ${producto.color}</h4>
      <span class="badge badge-warning"><p class="card-text">$${producto.precio}</p>  </span>
  <h6>${producto.categorias}</h6>
  <h7>${producto.marca}</h7> <br><br>
  <a href="#" id="${producto.id}" class="btn btn-primary btn-compra"  >Comprar</a>
</div>
</div>
 
 `);
 
}
const botones = $(`.btn-compra`);
for (const boton of botones) {
    boton.onclick = comprarProducto;
}

// FUNCION BOTON
}
function comprarProducto(e){
    // refresco al presionar
    e.preventDefault();
    
    // obtener id del boton presionado
    const productoID = e.target.id;
    // obtener objeto del prpducto correspondiente al ID
    const seleccionado = productos.find(p => p.id == productoID );
    if(seleccionado == undefined){
      carrito.push(productos.find(p => p.id == productoID));
    }else{
      //SI SE ENCONTRO AGREGAR UN CANTIDAD
      seleccionado.agregarCantidad(1);
    }
    carrito.push(seleccionado);

    // GUARDAR EN STORAGE
    localStorage.setItem("CARRITO", JSON.stringify(carrito));

    // GENERAR SALIDA DEL PRODUCTO
    carritoUI(carrito);
}
//   FUNCION PARA REDENRIZAR LA INTERFAZ DEL CARRITO
function carritoUI(productos){
    
$("#cantidadCompras").html(productos.length);
$("#carritoCompras").empty();
for (const producto of productos) {
 $(`#carritoCompras`).append(registroCarrito(producto)); 
  }  
// $("#carritoCompras").append(`<option>${producto.modelo} ${producto.color}  $${producto.precio}</option>`)   }
//agregamos total
$('#carritoCompras').append(`<p id="totalCarrito"> $ TOTAL ${totalCarrito(productos)}</p>`)
//   ASOCIACION EVENTOS
$(`.btn-delete`).on(`click`,eliminarCarrito);
$(`.btn-add`).click(addCantidad);
$(`.btn-sub`).click(subCantidad);
}



function registroCarrito(producto){
    return `<p>
                 ${producto.modelo}
                  
                <span class="badge badge-warning" >  $ ${producto.precio}</span>
                
                <span class="badge badge-dark"> ${producto.cantidad}</span>
                
                <span class="badge badge-light"> $ ${producto.subtotal()}</span>
                <img src="${producto.img}" alt="">
                <a id="${producto.id}" class=" btn btn-outline-dark my-0 my-sm-0  btn-add">+</a>
                
               <a id="${producto.id}" class="btn btn-outline-dark my-0 my-sm-0 btn-sub">-</a> 
                <a  id="${producto.id}" class="btn btn-outline-danger my-0 my-sm-0 btn-delete"  >x</a>
                </p>
    
   `
}
// ${producto.color}
// FUNCION ELIMINAR CARRRITO
function eliminarCarrito(e){
    console.log(e.target.id);
    // eliminar con filter
    // carrito = carrito.filter(producto => producto.id != e.target.id)
    let posicion = carrito.findIndex(p => p.id == e.target.id);
    carrito.splice(posicion, 1);
    // actualizar interfaz
carritoUI(carrito);
// GUARDAR EN STORAGE
localStorage.setItem("CARRITO", JSON.stringify(carrito));
}
//MANEJADOR PARA AGREGAR cantidad 
function addCantidad(){
    let producto = carrito.find(p => p.id == this.id);
    producto.agregarCantidad(1);
    $(this).parent().children()[1].innerHTML = producto.cantidad;
    $(this).parent().children()[2].innerHTML = producto.subtotal();
    // modificar
    $("#totalCarrito").html(`TOTAL ${totalCarrito(carrito)}`);
    //GUARDAR EN STORAGE
    localStorage.setItem("CARRITO",JSON.stringify(carrito));
  }
  //MANEJADOR PARA RESTAR CANTIDAD
  function subCantidad(){
    let producto = carrito.find(p => p.id == this.id);
    if(producto.cantidad > 1){
      producto.agregarCantidad(-1);
      //$(this).parent().children()[1].innerHTML = producto.cantidad;
      let registroUI = $(this).parent().children();
      registroUI[1].innerHTML = producto.cantidad;
      registroUI[2].innerHTML = producto.subtotal();
      // modificar total
      $("#totalCarrito").html(`TOTAL ${totalCarrito(carrito)}`);
      //GUARDAR EN STORAGE
      localStorage.setItem("CARRITO",JSON.stringify(carrito));
    }
  }
  //Filtros Categorias  y Marca(Generar filtro)
  function filtroA(lista,selector){
    $(selector).empty();
    // Recorre lista
    lista.forEach(ele => {
$(selector).append(`<option value='${ele}'>${ele}</option>`);
 });
$(selector).prepend("<option value='TODOS'>Todos los productos</option>");
  }


//FUNCION PARA OBTENER EL PRECIO TOTAL DEL CARRITO
function totalCarrito(carrito){
  console.log(carrito);
  let total = 0;
  carrito.forEach(p => total += p.subtotal());
  return total;
}
1
  • si esto devuelve undefined : const seleccionado = productos.find(p => p.id == productoID ); para que hacer esto : carrito.push(productos.find(p => p.id == productoID)); porque haces un push si es undefined? no deberias validar si existe o no en carrito? no en los productos? const seleccionado = carrito.find(p =>
    – Bryro
    Commented el 24 ago. 2021 a las 3:46

1 respuesta 1

1

Estás insertando el resultado de seleccionado independientemente de si es un producto o undefined, solo quita la última línea mostrada en este bloque y ya debe funcionar sin problema:

// Creas la variable, buscando en carrito, no en productos
const seleccionado = carrito.find(p => p.id == productoID );
if(seleccionado == undefined){
  // Si no existe en carrito, lo agregas
  carrito.push(productos.find(p => p.id == productoID));
}else{
  // Si se encontró, incrementas cantidad
  seleccionado.agregarCantidad(1);
}
// Esta línea sobra, ya insertaste o incrementaste cantidad
carrito.push(seleccionado);

Por cierto, ya que estás usando jQuery, podrías remplazar el siguiente código:

const botones = $(`.btn-compra`);
for (const boton of botones) {
    boton.onclick = comprarProducto;
}

Por solo esta línea:

$('.btn-compra').on('click', comprarProducto);

No es necesario crear la constante ni recorrer para asignar evento a cada botón, jQuery lo hace automáticamente. Referencia: $.on()

2
  • Sabes @Triby que esa prueba la había hecho antes por la lógica que me comentas y no funcionó. La volví a hacer y lo que pasa es que al eliminar esa línea ya no se agrega nada al carrito y eso es lo que no entiendo. Gracias por la recomendación de simplificar el código. Commented el 24 ago. 2021 a las 3:39
  • @OtroMasComoTu, modifiqué la respuesta, no me di cuenta que estabas buscando en productos y debías buscar en carrito. Ahora solo quedaría verificar la función agregarCantidad() para ver qué hace, porque no la encontré en la pregunta.
    – Triby
    Commented el 24 ago. 2021 a las 3:57

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.