Como pedido pela lista, aqui esta a minha implementação de carrinho.
Parte do código HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta metacharset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AluraBooks</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"
integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css" />
<script src="app/metodoForEach.js" defer></script>
<script src="app/main.js" defer></script>
<script src="app/metodoMap.js" defer></script>
<script src="app/metodoFilter.js" defer></script>
<script src="app/carrinho.js" defer></script>
<!-- Development version
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script> -->
</head>
<header class="header">
<h1><img src="imagens/Logo-1.png" /></h1>
<div class="carrinho">
<div class="bolinha disable"></div>
<i data-lucide="shopping-basket"></i>
<div class="pop-up__carrinho disable">
<div class="container__carrinho">
<div class="titulo__carrinho">carrinho</div>
<div class="produtos__carrinho">
</div>
<div class="checkout_carrinho">
<p class="text_carrinho">Subtotal</p >
<p class="preco_carrinho">R$999,99</p >
</div>
</div>
</div>
</div>
</header>
Parte do código JAVASCRIPT:
let carinho = []
const iconeCarinho = document.querySelector('.bolinha')
const carinhoIcone = document.querySelector('.carrinho')
const popCarrinho = document.querySelector('.pop-up__carrinho')
async function itemLivros() {
listaItems = await document.querySelectorAll('.livro')
listaItems.forEach(livro => {
livro.addEventListener('click', () => {
carinho.push(livro.id)
iconeCarinho.classList.remove('disable')
})
})
}
carinhoIcone.addEventListener('click', () => {
console.log(popCarrinho.classList.length === 1)
if (popCarrinho.classList.length === 1 && popCarrinho.classList[1] === undefined) {
popCarrinho.classList.add('disable')
} else if (carinho.length > 0 && popCarrinho.classList.length == 2) {
//const elementosSelecionados = indices.map(index => elementos[index]);
const listaCarrinho = carinho.map(index => livros[index])
const items = document.querySelector('.produtos__carrinho')
const totalCarrinho = document.querySelector('.preco_carrinho')
listaCarrinho.forEach(item => {
items.innerHTML += `
<div class="produto">
<img class="livro__imagens__carrinho" src="${item.imagem}"
alt="${item.alt}">
<h2 class="livro__titulo__carrinho">
${item.titulo}
</h2>
<p class="livro__preco__carrinho" id="preco__carrinho">R$${item.preco.toFixed(2)}</p>
</div>
`
})
totalCarrinho.textContent = `R$${somarLivros(listaCarrinho)}`
console.table(listaCarrinho)
popCarrinho.classList.remove('disable')
}
})
// window.addEventListener('click', () =>{
// if (popCarrinho.classList[1] === undefined){
// popCarrinho.classList.add('disable')
// }
// })
Código completo: https://github.com/limonheiro/alura_books
