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;
}
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 esundefined
? no deberias validar si existe o no en carrito? no en los productos?const seleccionado = carrito.find(p =>