0

Estoy haciendo un carrito de compras, sin embargo a la hora de establecer la función para agregar productos al carrito mediante un evento con un botón, me marca el error siguiente:

Uncaught TypeError: productos.find is not a function
at Function.obtenerProducto (scripts.js:126:26)
at HTMLButtonElement.<anonymous> (scripts.js:92:51)

Cada producto tiene un id que se checa a la hora de hacer click sobre el botón.Cabe mencionar que traigo los productos desde un JSON local que llamo mediante una promesa y que son pintados en el HTML :

[
    {
        "id": "1",
        "nombre": "Conchita",
        "precio": "12.99",
        "imgSrc": "../imagenes/imagenes-productos/imagen-productos-1.jpg"
    },
    {
        "id": "2",
        "nombre": "Croissant",
        "precio": "13.99",
        "imgSrc": "../imagenes/imagenes-productos/imagen-productos-2.jpg"
    },
    {
        "id": "3",
        "nombre": "Pan de Muerto",
        "precio": "13.99",
        "imgSrc": "../imagenes/imagenes-productos/imagen-productos-3.jpg"
    },
    {
        "id": "4",
        "nombre": "Baguette",
        "precio": "23.99",
        "imgSrc": "../imagenes/imagenes-productos/imagen-productos-4.jpg"
    },
    {
        "id": "5",
        "nombre": "Focaccia",
        "precio": "17.99",
        "imgSrc": "../imagenes/imagenes-productos/imagen-productos-5.jpg"
    },
    {
        "id": "6",
        "nombre": "Bolitas de Arándano",
        "precio": "5.99",
        "imgSrc": "../imagenes/imagenes-productos/imagen-productos-6.jpg"
    },
    {
        "id": "7",
        "nombre": "Fruit Cake",
        "precio": "14.99",
        "imgSrc": "../imagenes/imagenes-productos/imagen-productos-7.jpg"
    },
    {
        "id": "8",
        "nombre": "Chispas de chocolate",
        "precio": "5.99",
        "imgSrc": "../imagenes/imagenes-productos/imagen-productos-8.jpg"
    }
]

Al parecer el error aparece cuando establezco la función obtenerProductos, en la cual uso un método find para recorrer el array. Estoy casi seguro que se trata de un error con el JSON. Aquí está mi código de JS :

// Variables principales
const carritoBtn = document.querySelector (".carrito-btn1")
const carritoContador = document.getElementById ("carrito-contador")
const productosDOM = document.querySelector (".productos-card-container")
const carritoOverlay = document.querySelector (".carrito-overlay")
const carritoDOM = document.querySelector (".carrito-principal")
const carritoCerrar = document.querySelector (".carrito-cerrar")
const carritoContenido = document.querySelector (".carrito-contenido")
const carritoTotal = document.querySelector (".carrito-total")
const carritoVaciar = document.querySelector (".carrito-vaciar")

// Arrays principales
let carrito = []
let botonesDOM = []

// Función para activar contenido del DOM mediante un evento
document.addEventListener ("DOMContentLoaded", () => {
    const productos = new Productos ()
    const desplegar = new Desplegar ()
    // Activar los productos desde el JSON
    productos.activarProductos ().then (resultado => {
    desplegar.desplegarProductos (resultado)
    // Guardar productos en local storage
    Storage.guardarProductos (productos)
    }) .then(() => {
        // Activar botones para agregar productos al carrito
        desplegar.activarBotonesComprar ()
    })
})


// Crear clase "Productos" para cargar productos desde el JSON 
class Productos {
    // Utilizo async/await para cumplir la promesa.
    async activarProductos () {
        try {
        let contenido = await fetch ("../farina-rustica-productos.json")
        let resultado = await contenido.json ()
        return resultado;
        } catch (error) {
            console.log (error);
        }
    }
}

// Crear clase "Desplegar" para mostrar los productos cargados por la clase "Productos" o el Local Storage en la página web
class Desplegar {
    desplegarProductos (productos) {
        let productosHtml = ""
        // Utilizo el método forEach para que todas las propiedas de cada producto aparezcan en el HTML
        productos.forEach (producto => {
            productosHtml += `
                <div class="card">
                    <div class="card-contenedor-imagen">
                        <img
                            src="${producto.imgSrc}"
                            class="card-img-top card-imagen"
                            alt="Imagen de Conchita"
                            />
                        <button class="carrito-btn2" data-id=${producto.id}>
                            <i class="fa-solid fa-cart-shopping"> </i>
                            Agregar al carrito
                        </button>
                    </div>
                    <div class="card-body">
                        <h3 class="card-title text-center">${producto.nombre}</h3>
                        <h3 class="card-title text-center card-precio">$${producto.precio}</h3>
                    </div>
                </div>
            `
        })
        // Utilizo la propiedad innerHTML para mostrar cada producto con sus propiedades en el HTML
        productosDOM.innerHTML = productosHtml
    }
    // Habilitar el uso de los botones para agregar productos al carrito
    activarBotonesComprar () {
        const botonesComprar = [...document.querySelectorAll (".carrito-btn2")]
        botonesDOM = botonesComprar
        botonesComprar.forEach (button => {
            let id = button.dataset.id
            let productoAgregado = carrito.find (item => item.id === id)
            // Si el producto ya está el carrito
            if (productoAgregado) {
                button.innerText = "El producto ya está en el carrito"
                button.disabled = true
            // Si el producto no está en el carrito
            } else {
                button.addEventListener ("click", e => {
                    e.target.innerText = "El producto ya está en el carrito"
                    e.target.disabled = true
                    // Hacer que el boton "agregar al carrito" añada el item con sus características mediante el id
                    let carritoItem = {...Storage.obtenerProducto (id), cantidad: 1}
                    // Agregar el producto al carrito
                    carrito = [...carrito, carritoItem]
                    // Guardar el carrito en local storage
                    Storage.guardarCarrito (carrito)
                    // Número total de items en el carrito y sub-total del carrito 
                    this.infoCarrito (carrito)
                    //
                    //
                })
            }
        })
    }
    // Número total de items en el carrito y sub-total del carrito
    infoCarrito (carrito) {
        let totalItems = 0
        let subTotal = 0
        carrito.map (item => {
            totalItems += item.cantidad
            subTotal += item.precio * item.cantidad
        })
        carritoContador.innerText = totalItems
        carritoTotal.innerText = parseFloat (subTotal.toFixed (2))
    }
}

// Crear clase "Storage" encargada del almacenamiento en Local Storage
class Storage {
    static guardarProductos (productos) {
        localStorage.setItem ("productos", JSON.stringify (productos))
    }
    // Hacer que el boton "agregar al carrito" añada el item con sus características mediante el id
    static obtenerProducto (id) {
        let productos = JSON.parse (localStorage.getItem ("productos"))
        return productos.find (producto => producto.id === id)
    }
    // Guardar el carrito en local storage
    static guardarCarrito (carrito) {
        localStorage.setItem ("carrito", JSON.stringify (carrito))
    }
}

1 respuesta 1

0

Diria que el principal problema lo tienes aquí, cuando intentas guardar una instancia de clase en el localStorage:

// Guardar productos en local storage
    Storage.guardarProductos (productos)

pues me temo que deberia ser esto, usando la variable resultado donde realmente se guardan los datos resultantes del método productos.activarProductos() :

// Guardar productos en local storage
    Storage.guardarProductos (resultado)

Ya nos dirás si era eso. En mis pruebas con eso me salto el error.

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.