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