0

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>
4
  • ¿puedes agregar un ejemplo de ListaDeProductos.json en la pregunta?
    – masterguru
    Commented el 19 may. 2022 a las 23:28
  • donde esta el método fetchData(), puede agregarlo? Commented el 19 may. 2022 a las 23:37
  • @RichardVíquezPérez el método fetchData (mas bien función asíncrona) está inmediatamente después del objeto Producto y antes de la función cargarProducto Commented el 20 may. 2022 a las 0:28
  • Ok entonces cambie esto: window.addEventListener('load', function(){ fetchData() por esto: window.addEventListener('load', async function(){ await fetchData() y me cuenta, también sería bueno try catch en fetchdata. Cada vez que usted llama un método asíncrono tiene que sí o sí utilizar "await" Commented el 20 may. 2022 a las 1:34

1 respuesta 1

1
+50

Al crear elementos de forma dinámica y asíncrona, en este caso mediante la función fetchData(), dichos elementos son creados después de la carga inicial del documento.

Durante dicha carga inicial del documento, estás intentando acceder a sus eventos con el método addEventListener(), pero al no estar aún creados, dicho método no se está vinculando a esos elementos, aunque lo pueda parecer por el orden en que lo pones en el código.

Las llamadas asincronas no son secuenciales, aunque las pongas de forma secuencial en el código, pensando que funcionarán conjuntamente con el resto del código en ese orden. Eso no es así, como ya estás comprobando con este problema actual.

Una posible solución pasa por la denominada delegación de eventos, que explico con más detalle en esta respuesta, y donde basicamente colocamos el evento a escuchar en un elemento superior jerárquicamente al elemento que realmente lo inicia, para después, dentro de la función asociada al evento mediante addEventListener, comprobar si el elemento que lo inicia coincide con lo que queremos realmente controlar.

Eso nos asegura que, aunque los elementos sean creados sobre la marcha, dinámicamente, un elemento superior puede detectarlos y lanzar acciones sobre ellos.

El elemento más superior jerárquicamente que vamos a usar en esta solución, es el body, pero podria ser cualquier otro que contenga al elemento deseado.

Y sin más dilación, explico la solución en el código:

  1. Modificar el window.addEventListener('load... para dejarlo de este modo:
window.addEventListener('load', function(){
    fetchData()
    document.body.addEventListener('click', function(e) {
        clasesElem = e.target.classList
        switch(true) {
            case clasesElem.contains('btnResta'):
            case clasesElem.contains('btnSuma'):
                btnClick(e)
                break;
            case clasesElem.contains('btnAddCarrito'):
                cargarProducto(e)
                break;
        }
    })
  })
  1. Eliminar todo el código relacionado con la escucha de esos elementos creados dinamicamente que hay hasta ahora, pues aunque aparece repetido, no está encontrando los elementos por lo explicado anteriormente. A saber:
    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)
    }

Con esto ya vuelven a funcionar los botones que habian dejado de funcionar antes de implementar la función fetchData().

Explicación ampliada del nuevo código

Repasemos el nuevo código línea por línea:

  • Ponemos a la escucha el evento click en el elemento body
    document.body.addEventListener('click', function(e) {
  • Consultamos y asignamos a una variable la lista de clases que el elemento que realmente ha lanzado el evento tiene, gracias a e.target que nos apunta a el directamente (a pesar que es a nivel del body cuando se está interpretando realmente).
        clasesElem = e.target.classList
  • En este punto vamos a buscar, dentro de las clases del elemento que ha lanzado el evento, si coinciden con alguna de las esperadas y en caso afirmativo (true) vamos a realizar alguna acción sobre el. Para ello vamos a usar switch() donde esperaremos que se cumpla una condición verdadera en sus posibles case, por lo tanto lo escribimos así:
        switch(true) {
  • Ahora empiezan los casos que he detectado que el OP quiere controlar. Analizando su código he visto que dentro de la función btnClick tan solo espera dos clases para actuar, que son btnResta y btnSuma, las cuales podemos poner así, seguidas, sin break entre ellas, para que ejecuten la misma función, la cual ya desgrana que hacer en cada caso:
            case clasesElem.contains('btnResta'):
            case clasesElem.contains('btnSuma'):
                btnClick(e)
                break;
  • Luego he visto este otro caso en un addEventListener, que queda así:
            case clasesElem.contains('btnAddCarrito'):
                cargarProducto(e)
                break;

Y de momento no he detectado ningún otro, por lo tanto con esto ya estariamos.

Ya nos diras si te sirve o si aún tienes problemas.

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.