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)
}
classList
hay que fijarse en eses detalles..... jejejeje