En este código, aún cuando se selecciona el producto y aparece en la consola, trato de hacer que cuando el usuario seleccione el mismo, también aparezca seleccionado en el DOM, a través de la función agregarAFavoritos pero la función no hacía nada...
alert('bienvenidos a nuestro shop!')
const products = [
{ id: 1, name: 'Sombreros de playa', price: 2200, img: "https://i.pinimg.com/474x/72/93/4d/72934d54964866b482ebf79c2df60aeb.jpg" },
{ id: 2, name: 'velas aromaticas ', price: 600, img: 'https://i.pinimg.com/564x/b0/3f/09/b03f098563f5b493d3604c7dcd0fc01b.jpg' },
{ id: 3, name: 'cepillos de bambu', price: 1500, img: 'https://i.pinimg.com/474x/7e/84/f8/7e84f81cbee05ed2bd4f656c7b6ac9c2.jpg' },
{ id: 4, name: 'shampoo solido organico', price: 700, img: 'https://http2.mlstatic.com/D_NQ_NP_752421-MLA41972998872_052020-W.jpg' },
{ id: 5, name: 'Aprende a surfear', price: 1800, img: 'https://i.pinimg.com/564x/26/bd/0f/26bd0fe84aa57566c756725917ceafcb.jpg' },
{ id: 2, name: 'Clases de yoga', price: 1000, img: 'https://i.pinimg.com/474x/53/a6/ec/53a6ec3daf4982031eea7284514a3630.jpg' },
{ id: 3, name: 'Medita frente al mar', price: 900, img: 'https://i.pinimg.com/564x/a1/d5/2c/a1d52c2ba21a1ccf83ad2d497a6e3645.jpg' },
{ id: 4, name: 'Conoce tu carta natal', price: 2000, img: 'https://i.pinimg.com/474x/4e/b2/a7/4eb2a74ad161a50464600175699d97d0.jpg' }
]
let htmlCatalog = ''
for (const product of products) {
htmlCatalog += `
<div class='col-3 '>
<img class="product-image" src='${product.img}'/>
<div class="product-especifics">
<h3>${product.name}</h3>
<p class="product-price" >$ ${product.price}</p>
<br>
<div class='btn-info btnAddCart shop-button' id='product-${product.id}'>Add to cart</div>
</div>
</div>
`
}
const produtcsFavoritos = []
document.getElementById('catalog').innerHTML = htmlCatalog
const btns = document.getElementsByClassName('btnAddCart')
for (const btn of btns) {
btn.onclick = addToCart
//btn.onclick= agregarAfovritos
}
function addToCart(e) {
const btn = e.target
const id = btn.id.split('-')[1]
const product = products.find(p => p.id == id)
console.log('Bien!! acabas de elegir ', product.name,)
console.log('y su valor es de $$', product.price)
alert('Elegiste ' + product.name)
}
function agregarAfavoritos(product) {
for (const product of products) {
htmlCatalog += `
<div class="produtcsFavoritos">
<div class='col-3 '>
<img class="product-image" src='${product.img}'/>
<div class="product-especifics">
<h3>${product.name}</h3>
<p class="product-price" >$ ${product.price}</p>
<br/>
</div>
</div>
</div>
`
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./estilos.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>shop</h1>
<div class="container">
<div id="catalog" class="row"></div>
</div>
<div class="produtcsFavoritos" >
</div>