1

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);
        }
}

1 respuesta 1

0

El error está en if(encontrado == undefined) que, en todo caso, deberías usar typeof, quedando la comparación así:

if(typeof encontrado == 'undefined')

Revisa la consola del navegador para ver los mensajes de error. Ejemplo:

// Así es como se debe comparar
if(typeof noDefinido == 'undefined') {
    console.log('Comparación correcta');
}
// Esto va a generar un error
if(noDefinido == undefined) {
    console.log('No definido');
}

Pero puedes simplificar la lógica si solo buscas una vez la posición del producto en el carrito, directamente con .findIndex(), que devuelve la posición o -1 si no existe.

Finalmente, los ID en HTML no deben ser solo números, aunque puede funcionar, lo adecuado es que comience con letra y, para mejor entendimiento del código, usa prod-{idDelProducto}:

// Agregar productos al carrito
function agregarAlCarrito(productoNuevo) {
    // Busca directamente la posición, no necesitas el elemento
    let posicion = carrito.findIndex(prod => prod.id == productoNuevo.id);
    if (posicion == -1) {
        // El producto no está en el carrito
        let productoaAgregar = new productoCarrito(productoNuevo);
        carrito.push(productoNuevo);
        // El ID no debe ser numérico
        $("#tablabody").append(
            `<tr id="tr-">
            <td>${productoaAgregar.id}</td>
            <td>${productoaAgregar.nombre}</td>
            <td id="prod-${productoaAgregar.id}">${productoaAgregar.cantidad}</td>
            <td>${productoaAgregar.precio}</td>
        </tr>`);
        Swal.fire(
            'Nuevo producto agregado al carrito',
            productoNuevo.nombre,
            'success'
        );
    } else {
        // El producto existe, actualizar cantidad y HTML
        carrito[posicion].cantidad += 1;
        $(`#prod-${productoNuevo.id}`).html(carrito[posicion].cantidad);
    }
}

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.