0

Estoy intentando hacer un carrito de compras con JS y sin base de datos. Mi problema viene a raiz de que cuando intento agregar un producto al carrito me sale el siguiente error en la consola:

Uncaught TypeError: Cannot read properties of undefined (reading 'contains') at addCarrito (productos.js:37:28) at HTMLDivElement. (productos.js:10:5)

Fuí a esa línea de código, pero no logro darme cuenta de el error

adjunto codigo JS Y HTML

HTML:

 <div class="container">
 <h5>Carrito</h5>
    <hr>
    <div class="row" id="item">

        <template id="template-card">
            <div class="col-12 mb-2 cold-md-4">
                <div class="card">
                    <img src="" alt="" class="card-img-top">
                    <div class="card-body">
                        <h5>Titulo</h5>
                        <p>precio</p>
                        <button class="btn btn-dark">Añadir al carrito</button>
                    </div>
                </div>
            </div>
        </template>

        <div class="col-xs-10 col-sm-6 col-md-4" class="item">
            <div class="card">
            <img src="../Multimedia/aceite-oliva.png" alt="">
            <h3>ACEITE OLIVA EXTRA VIRGEN</h3>
            <p>$899,00</p>
            <button class="btn btn-dark"  data-id="1">AÑADIR AL CARRITO</button>
            </div>
            </div>
       
            <div class="col-xs-10 col-sm-6 col-md-4" class="item">
            <div class="card">
            <img src="../Multimedia/Rutini_Merlot.jpg" alt="">
            <h3>RUTTINI MERLOT</h3>
            <p>$1850,00</p>
            <button class="btn btn-dark" data-id="5">AÑADIR AL CARRITO</button>
            </div>
            </div>
        
            <div class="col-xs-10 col-sm-6 col-md-4" class="item">
            <div class="card">
            <img src="../Multimedia/queso-gruyere.png" alt="">
            <h3>QUESO GRUYERE</h3>
            <p>$220,00</p>
            <button class="btn btn-dark" data-id="6">AÑADIR AL CARRITO</button>
            </div>
            </div>
        
</div>
</div>

</article>

CODIGO JS:

const item = document.getElementById('item')
const templateCard = document.getElementById('template-card').content
const fragment = document.createDocumentFragment();

document.addEventListener('DOMContentLoaded', () =>{
        fetchData()
});

item.addEventListener('click', e => {
    addCarrito(e)
});

    const fetchData = async () => {
        try {
            const res = await fetch('../api.json')
            const data = await res.json() 
            //console.log(data)
        } catch (error) {
            console.log(error)
        }
};

const pintarCards =  data =>{
    data.forEach(producto =>{
        templateCard.queryselector('h5').textcontent = producto.title
        templateCard.queryselector('p').textcontent = producto.title
        templateCard.queryselector('img').setAttribute('src', producto.thumbnailURL)
        templateCard.queryselector('btn btn-dark').dataset.id = producto.id
        const clone = templateCard.cloneNode(true)
        fragment.appendChild(clone)
    })
    item.appendChild(fragment)
};
const addCarrito = e => {
    //console.log(e.target)
    //console.log(e.target.classlist.contains('btn-dark'))
    if (e.target.classlist.contains('btn-dark')){
        setCarrito(e.target.parentElement)
    }
    e.stopPropagation()
}
const setCarrito = objeto =>{
    console.log(objeto)
    const producto = {
        id : objeto.queryselector('.btn-dark').dataset.id,
        title: objeto.queryselector('h5').textcontent,
        precio: objeto.queryselector('p').textcontent,
        cantidad: 1 
    }
    if(carrito.hasOwnProperty(producto.id)){
        producto.cantidad = carrito[producto.id].cantidad + 1 
    }
    carrito[producto.id] = {...producto}
    console.log(carrito)
}

2
  • No puedes agregar elementos inexistentes al carrito. Edita la pregunta y agrega más detalles como los pasos que realizas para que te genere el error.
    – fredyfx
    el 27 jun. 2022 a las 18:51
  • tienes que cambiar classlist por classList hay que fijarse en eses detalles..... jejejeje
    – Suso
    el 27 jun. 2022 a las 19:10

1 respuesta 1

1

Tienes varios errores. Tienes que cambiar classlist por classList, textcontent por textContent, queryselector por querySelector y dentro de un querySelector, h5 y tienes que poner h3.

También tienes que declarar globalmente carrito. const carrito ={};

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.