Buenas buenas! Estoy arrancando con JS y me pidieron hacer un carrito de compras, todo funciona bastante bien pero quise agregar al carrito un boton para sumar un item una vez que lo haya, o eliminarlo sin afectar a los demas si quisiera borrar uno y no todo el carro, estoy atorado en esta parte y ya probe varias opciones, en el codigo actual el error indica que no puede acceder a la propiedad "id" del carrito para agregar uno mas, a pesar de que lo veo en pantalla, podrian decirme que estoy haciendo mal? y orientarme para agregar tambien un boton de "eliminar uno". el problema arranca en la const "btnAgregarUno" y funcion agregarUno
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/style.css" />
<link
rel="shortcut icon"
href="assets/images/favicon.png"
type="image/x-icon"
/>
<title>Salvaje</title>
</head>
<body>
<header>
<img src="./assets/images/logo.png" alt="logo" class="logo" />
</header>
<nav>
<ul>
<li>
<a href="index.html" class="enlaces">Inicio</a>
</li>
<li>
<a href="#container" class="enlaces">Coleccion</a>
</li>
<li>
<a href="#shoppingCart" class="enlaces cart">Carrito</a>
</li>
<li>
<a href="#contacto" class="enlaces">Contacto</a>
</li>
</ul>
</nav>
</section>
<main>
<div id="container" class="cardbox">
</div>
<div id="shoppingCart">
</div>
</main>
<footer>
<section>
<article>
<h4 id="contacto">Contactanos</h4>
<ul>
<li>
<a class="enlaces" href="https://web.whatsapp.com/"></a>
</li>
<li>
<a class="enlaces" href="https://mail.google.com/mail/u/0/"></a>
</li>
<li>
<a class="enlaces" href="https://www.google.com.ar/maps">PALERMO</a>
</li>
</ul>
</article>
</section>
</footer>
<script src="./js/index.js"></script>
</body>
</html>
index Javascript:
let articles = [];
class Product {
constructor(id, name, price, category, img) {
this.id = id;
this.name = name;
this.price = price;
this.category = category;
this.img = img;
}
}
articles.push(new Product("01", "Polerin Yaro Negro", 4790, "Ropa", "./assets/images/card/card1.jpg"));
let shoppingCart=[];
function loadShoppingCart() {
if (JSON.parse(localStorage.getItem("shoppingCart"))) {
shoppingCart = JSON.parse(localStorage.getItem("shoppingCart"));
} else {
localStorage.setItem("shoppingCart", JSON.stringify([]));
shoppingCart = JSON.parse(localStorage.getItem("shoppingCart"));
}
}
loadShoppingCart();
function desplegarProducts() {
for (let i = 0; i < articles.length; i++) {
const element = articles[i];
const { id, name, price, img } = element
const card = `
<div class="card">
<div>
<img class="imgProduct" src=${img} alt=''/>
</div>
<p>${name}</p>
<div>
<p>$${price.toLocaleString()}</p>
</div>
<div>
<button id=${id} class="btnAgregar">Agregar al carrito</button>
</div>
</div>
`
const container = document.getElementById('container')
container.innerHTML += card
}
}
desplegarProducts()
const btnAgregar = document.getElementsByClassName('btnAgregar');
Array.from(btnAgregar).forEach((btn) => {
btn.addEventListener('click', agregarAlCarrito);
});
function agregarAlCarrito (e) {
const btn = e.target;
const id = btn.getAttribute('id')
const prodEncontrado = articles.find(art => art.id == id)
const enCarrito = shoppingCart.find(art => art.id == prodEncontrado.id)
if (!enCarrito){
shoppingCart.push({...prodEncontrado, cantidad: 1})
} else {
let carritoFiltrado = shoppingCart.filter(art => art.id != enCarrito.id)
shoppingCart = [...carritoFiltrado, {...enCarrito, cantidad: enCarrito.cantidad += 1}]
}
localStorage.setItem('shoppingCart', JSON.stringify(shoppingCart))
location.reload();
}
const totalCarrito = () => shoppingCart.reduce((acc, art) => acc + art.price * art.cantidad, 0);
if (JSON.parse(localStorage.getItem("shoppingCart"))){
shoppingCart = JSON.parse(localStorage.getItem("shoppingCart"))
} else {
localStorage.setItem("shoppingCart", JSON.stringify([]))
shoppingCart = JSON.parse(localStorage.getItem("shoppingCart"))
}
const body = document.getElementById('shoppingCart')
if(shoppingCart.length == 0){
const texto = `
<div class="cartContainer">
<h3 class='txtCarrito'>El carrito esta vacio</h1>
<a href='index.html'>
<button class='btnCart'>Actualizar</button>
</a>
</div>`;
body.innerHTML += texto;
} else {
const titulo = `
<div class='cartContainer'>
<h1 class= 'txtCarrito'>Carrito de compras</h1>
</div>`
body.innerHTML += titulo;
const table = `
<div class="tableContainer">
<table>
<thead>
<tr>
<th>Cod. Interno</th>
<th>Productos</th>
<th>Cantidad</th>
<th>Agregar uno</th>
<th>Quitar uno</th>
<th>Precio</th>
</tr>
</thead>
<tbody id='tbody'></tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th>Total:</th>
<th id='total'>$${totalCarrito().toLocaleString()}</th>
</tr>
</tfoot>
</table>
</div>
<div class="cartContainer">
<button id="vaciar" class="btnCart">Vaciar carrito</button>
<button id="terminar" class="btnCart">Terminar compra</button>
</div>`
body.innerHTML += table
const tbody =document.getElementById('tbody')
for (let i = 0; i < shoppingCart.length; i++) {
const element = shoppingCart[i];
const { id, name, img, price, cantidad} = element;
const cart = `
<tr id=${id}>
<th>${id}</th>
<th class='detallesTabla'><img class= 'imgProdCart' src=${img} alt=''><span class='nameProd'>- ${name}</span></th>
<th>${cantidad}</th>
<th><button id=${id} class="botonAgregarUno"><img class='imgBtnCart' src='assets/images/add.png' alt='addOne'></button></th>
<th><button id="botonQuitarUno"><img class='imgBtnCart' src='assets/images/trash.png' alt='trash'></button></th>
<th>$${(cantidad * price).toLocaleString()}</th>
</tr>`
tbody.innerHTML += cart
}
const btnAgregarUno = document.getElementsByClassName('botonAgregarUno');
Array.from(btnAgregarUno).forEach((btn) => {
btn.addEventListener('click', agregarUno);
});
function agregarUno(e) {
const btn = e.target;
const id = btn.getAttribute('id');
const prodEncontrado = shoppingCart.find(art => art.id == id);
const carritoFiltrado = shoppingCart.filter(art => art.id != prodEncontrado.id);
shoppingCart = [...carritoFiltrado, {...prodEncontrado, cantidad: prodEncontrado.cantidad += 1}];
localStorage.setItem('shoppingCart', JSON.stringify(shoppingCart));
location.reload();
}
let deleteCart = document.getElementById("vaciar");
deleteCart.onclick = () => {
shoppingCart = []
localStorage.setItem('shoppingCart', JSON.stringify(shoppingCart))
location.reload();
}
let terminarOperacion = document.getElementById("terminar");
terminarOperacion.onclick = () => {
Swal.fire(
'Gracias por elegirnos',
'Seras redirigido a... algun lugar... porque aun estamos desarrollando...',
'info'
)
}
}
Prueba eliminando en el siguiente código la imagen y la sustituyes por texto, como "AGREGAR UNO" y "ELIMINAR UNO", cuando haces click sobre la imagen con coge el atributo "id" del botón.
Saludos.
${name}</span></th>
<th>${cantidad}</th>
<th><button id=${id} class="botonAgregarUno"><img class='imgBtnCart' src='assets/images/add.png' alt='addOne'></button></th>
<th><button id="botonQuitarUno"><img class='imgBtnCart' src='assets/images/trash.png' alt='trash'></button></th>
<th>$${(cantidad * price).toLocaleString()}</th>
</tr>`
(No se puede continuar esta discusión porque tiene más de dos meses de antigüedad. Si tienes dudas parecidas, abre un nuevo hilo.)