Estoy aprendiendo js
y encarando un proyecto de carrito de compras, pero me surgió un problema, no logro sumar 2 productos iguales en mi carrito, es como que le doy 1 vez, lo suma en mi tabla pero se vuelve inutilizable ese producto, es decir. lo toco de vuelta y no lo suma ni me tira la alerta de añadido al carrito
Adjunto código.
//VARIABLES GLOBALES
let carrito = [];
let productosJSON = [];
$(document).ready(function(){
//Renderizar Productos DOM
renderizandoProductos();
//renderizandoProductos2();
obtenerJsonProductos();
// DOM AGREGAR TITULO DE LA PAGINA ARRIBA A LA IZK
let nombrePrincipal = document.getElementById("nombrePrincipal");
nombrePrincipal.innerHTML = `<p> Las recetas de Mamá </p>`
//LLAMO A FUNCION PARA ORDENAR Y SELECCIONAR PRODUCTOS
$("#miSeleccion option[value='pordefecto']").attr("selected", true);
$("#miSeleccion").change(function(){
ordenar();
});
});
//CREANDO PRODUCTOS
function renderizandoProductos(){
for (const producto of productosJSON){
$(".listaProductos").append(
`<li class="col-sm-3 list-group-item border">
<h2 class="textoProducto"> ${producto.nombre}</h2>
<img class="imagenesProductos" src=${producto.foto} width="250" height="250" >
<p></p>
<b class="precioProducto">$ ${producto.precio}</b>
<button class='btn btn-info botonCarrito' id='btn${producto.id}'>Añadir Al Carrito</button>
</li>`);
//Eventos para cada boton
$(`#btn${producto.id}`).on('click', function() {
agregarAlCarrito(producto); //mando completo el objeto
});
}
}
const obtenerJsonProductos = () => {
//GETJSON
const URLJSON = "productos.json";
$.getJSON(URLJSON, function(respuesta, estado) {
if (estado == "success") {
productosJSON = respuesta;
console.log(productosJSON);
renderizandoProductos();
}
});
}
//ORDENAR POR PRECIO Y AZ
function ordenar(){
let seleccion = $("#miSeleccion").val();
console.log(seleccion);
if (seleccion =="menor"){
productosJSON.sort(function(a, b){return a.precio - b.precio});
}else if (seleccion == "mayor"){
productosJSON.sort(function(a, b){return b.precio- a.precio});
}else if (seleccion == "alfabetico"){
productosJSON.sort(function(a, b){
return a.nombre.localeCompare(b.nombre);
});
}
$("li").remove();
renderizandoProductos();
}
//CLASE CONSTRUCTORA PRODUCTO DEL CARRITO
class productoCarrito{
constructor(obj){
this.id = obj.id;
this.foto = obj.foto
this.nombre = obj.nombre;
this.precio = obj.precio;
this.cantidad = 1;
}
}
//AGREGAR AL CARRITO PRODUCTOS
function agregarAlCarrito(productoNuevo) {
let encontrado = carrito.find(prod => prod.id == productoNuevo.id);
if (encontrado == undefined){
let productoaAgregar = new productoCarrito(productoNuevo);
carrito.push(productoNuevo);
console.log(carrito);
Swal.fire(
'Nuevo producto agregado al carrito',
productoNuevo.nombre,
'success'
);
$("#tablabody").append(
`<tr>
<td>${productoaAgregar.id}</td>
<td>${productoaAgregar.nombre}</td>
<td id='${productoaAgregar.id}'>${productoaAgregar.cantidad}</td>
<td>${productoaAgregar.precio}</td>
</tr>`);
} else{
let posicion = carrito.findIndex( p => p.id == productoNuevo.id);
//console.log
carrito[posicion].cantidad += 1;
$(`#${productoNuevo.id}`).html(carrito[posicion].cantidad);
console.log(carrito);
}
}