En este código, se implementó Fetch para realizar una llamada asincrónica pero pasa que cuando inicia la pagina, se pierde la la funcionalidad de los botones para agregar al carrito... antes de esto, sacando el Fetch, todo funcionaba bien pero lo que no entiendo es porque al meterlo no funcionan los botones. Realicé varias pruebas cambiando las porciones de código correspondientes y así resolver tal vez por hoisting e incluso sacando todos el bloque de código de los botones y colocándolo fuera o dentro y nada...
let productoNombre, valorCosto, porcGanancia, eleccion, pagaEnCuotas
let valorCuotas, cantCuotas, cuota, cantUnidades, total, searchTxt, arrItems, btnAddToCarrito, ArrBotonesCarrito
let btnSearch, result, searchBar
let items = []
let productos = []
let carrito = []
window.addEventListener('load', function(){
fetchData()
items = document.getElementsByClassName('items-grilla')
arrItems = Array.from(items)
for (let item of arrItems){
item.addEventListener('click', btnClick)
}
//obtenemos los botones de agregar al carrito
btnAddToCarrito = this.document.getElementsByClassName('btnAddCarrito')
ArrBotonesCarrito = Array.from(btnAddToCarrito)
for (let btn of ArrBotonesCarrito){
btn.addEventListener('click', cargarProducto)
}
})
btnSearch = document.getElementById('BtnSearch')
result = document.getElementById('ListaProductos')
searchBar = document.getElementById('SearchBar')
searchBar.addEventListener('keyup', filtrar)
filtrar()
// ------------------------------- FUNCIONES -----------------------------
function filtrar(){
result.innerHTML = '';
searchTxt = searchBar.value.toLowerCase()
for(let producto of productos){
let nombre = producto.nombre.toLowerCase()
if(nombre.indexOf(searchTxt) !== -1){
result.innerHTML += `<div id='itemsGrilla' class='items-grilla'>`
+ `<div class="card border-primary mb-3" style="max-width: 18rem;">`
+ `<div class="card-header">${producto.nombre}</div>`
+ `<div class="imagenes-container">`
+ `<img class="imagen-prod" src="${producto.img}">`
+ `</div>`
+ `<div id="divPrecioyCant" class="card-body text-primary precioContainer"> `
+ `<h5 class="card-title">$ ${producto.valor}</h5></p>`
+ `<button id="btnRestar" class="btn btn-secondary btnResta">-</button><p class="txtCantidad">1</p><button id="btnSumar" class="btn btn-secondary btnSuma">+</button>`
+ `<button class="btn btn-primary btnAddCarrito">Agregar al carrito</button>`
+ `</div>`
+ `</div>`
}
}
items = document.getElementsByClassName('items-grilla')
arrItems = Array.from(items)
for (let item of arrItems){
item.addEventListener('click', btnClick)
}
//obtenemos los botones de agregar al carrito
btnAddToCarrito = document.getElementsByClassName('btnAddCarrito')
ArrBotonesCarrito = Array.from(btnAddToCarrito)
for (let btn of ArrBotonesCarrito){
btn.addEventListener('click', cargarProducto)
}
}
function Producto(nombre, precio, imagen, cantidad){
this.nombre = nombre
this.precio = precio
this.imagen = imagen
this.cantidad = cantidad
}
async function fetchData(){
result.innerHTML = '';
await fetch('/ListaDeProductos.json')
.then((res) => res.json())
.then((data) => {
data.forEach((prod) => {
const searchTxt = searchBar.value.toLowerCase()
// for(let producto of productos){
let nombre = prod.nombre.toLowerCase()
if(nombre.indexOf(searchTxt) !== -1){
result.innerHTML += `<div id='itemsGrilla' class='items-grilla'>`
+ `<div class="card border-primary mb-3" style="max-width: 18rem;">`
+ `<div class="card-header">${prod.nombre}</div>`
+ `<div class="imagenes-container">`
+ `<img class="imagen-prod" src="${prod.img}">`
+ `</div>`
+ `<div id="divPrecioyCant" class="card-body text-primary precioContainer"> `
+ `<h5 class="card-title">$ ${prod.valor}</h5></p>`
+ `<button id="btnRestar" class="btn btn-secondary btnResta">-</button><p class="txtCantidad">1</p><button id="btnSumar" class="btn btn-secondary btnSuma">+</button>`
+ `<button class="btn btn-primary btnAddCarrito">Agregar al carrito</button>`
+ `</div>`
+ `</div>`
}
productos.push(prod);
});
})
}
function cargarProducto(e){
let nombreProd, precioProd, cantidadProd, imagenProd
let hijos = e.target.parentNode.parentElement.childNodes
for (let nodo of hijos){
if(nodo.className === 'card-header'){
nombreProd = nodo.innerHTML
}
if(nodo.className === 'imagenes-container'){
let hijo1 = nodo.childNodes
for(let hijoaux of hijo1){
imagenProd = hijoaux.getAttribute("src")
}
}
if(nodo.id === 'divPrecioyCant'){
let hijo2 = nodo.childNodes
for(let hijoaux of hijo2){
if(hijoaux.className === 'card-title'){
precioProd = hijoaux.innerHTML
}
if (hijoaux.className === 'txtCantidad'){
cantidadProd = hijoaux.innerHTML
}
}
}
}
const productoSeleccionado = new Producto(nombreProd, precioProd, imagenProd, cantidadProd)
addToCarrito(productoSeleccionado)
console.log(carrito)
}
function addToCarrito(producto){
//mostramos una alerta de que el producto fue agregado al carrito
swal({
title: 'Producto agregado!',
text: 'Se ha agregado el producto ' + producto.nombre + ' al carrito',
icon: 'success',
timer: 1100,
buttons: false,
})
carrito.push(producto)
localStorage.setItem('carrito', JSON.stringify(carrito))
}
function filtrarByCategory(e){
console.log(e.target)
result.innerHTML = '';
for(let producto of productos){
let categoria = producto.category.toLowerCase()
if(categoria.indexOf(category) !== -1){
result.innerHTML += `<div id='itemsGrilla' class='items-grilla'>`
+ `<div class="card border-primary mb-3" style="max-width: 18rem;">`
+ `<div class="card-header">${producto.nombre}</div>`
+ `<div class="imagenes-container">`
+ `<img src="${producto.img}">`
+ `</div>`
+ `<div id="divPrecioyCant" class="card-body text-primary"> `
+ `<h5 class="card-title">$ ${producto.valor}</h5></p>`
+ `<button id="btnRestar" class="btn btn-secondary btnResta">-</button><p class="txtCantidad">1</p><button id="btnSumar" class="btn btn-secondary btnSuma">+</button>`
+ `<button class="btn btn-primary">Agregar al carrito</button>`
+ `</div>`
+ `</div>`
}
}
}
function btnClick(e){
if (e.target.classList.contains('btnResta')){
restarCantidad(e)
}
if (e.target.classList.contains('btnSuma')){
sumarCantidad(e)
}
}
function restarCantidad(e){
let hijos = e.target.parentNode.childNodes
for (let nodo of hijos){
if(nodo.className === 'txtCantidad'){
let cantidad = parseInt(nodo.innerHTML)
if (cantidad > 0){
cantidad--
}
nodo.innerHTML = cantidad
console.log(nodo.innerHTML)
}
}
}
function sumarCantidad(e){
let hijos = e.target.parentNode.childNodes
for (let nodo of hijos){
if(nodo.className === 'txtCantidad'){
let cantidad = parseInt(nodo.innerHTML)
cantidad++
nodo.innerHTML = cantidad
console.log(nodo.innerHTML)
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<link rel="stylesheet" href="index.css" type="text/css" media="all" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<!-- NAV BAR -->
<div class="Buscador">
<div class="container-logo">
</div>
<div class="container container-searchbar">
<input type="text" id="SearchBar" class="form-control inpumsearch" placeholder="Ingrese el nombre del producto...">
<div>
<button class="btnVerCarrito" title="Ver mis compras">
<span><a href="./carrito.html" ><i class="fas fa-shopping-cart iconoCarrito"></i></a></span>
</button>
</div>
</div>
</div>
<div class="container-filtros">
<div class="container">
<button id="btnTodos" class="btn-filtro btn-todos">Todos</button>
<button id="btnMemorias" class="btn-filtro">Memorias</button>
<button id="btnTeclados" class="btn-filtro">Teclados</button>
<button id="btnMouses" class="btn-filtro">Mouse</button>
<button id="btnMonitores" class="btn-filtro">Monitores</button>
</div>
</div>
<!-- END NAV BAR-->
<div class="grid-container">
<div>
<ul id="ListaProductos">
</ul>
</div>
</div>
<br>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="index.js"></script>
</body>
</html>