Oi, dev! Tudo bem?
Para evitar a repetição de produtos no carrinho e atualizar a quantidade de um produto já existente, podemos seguir os passos do código abaixo, onde a ideia é verificar se o produto já está no carrinho e caso esteja, apenas atualize a quantidade; caso contrário, adicione o novo produto.
let totalGeral = 0;
let carrinhoProdutos = {};
function adicionar() {
// Recuperar valores nome do produto, quantidade e valor
let produto = document.getElementById('produto').value;
let nomeProduto = produto.split('-')[0].trim();
let valorUnitario = parseFloat(produto.split('R$')[1].trim());
let quantidade = parseInt(document.getElementById('quantidade').value);
// Verificar se o produto já está no carrinho
if (carrinhoProdutos[nomeProduto]) {
// Atualizar a quantidade do produto existente
carrinhoProdutos[nomeProduto].quantidade += quantidade;
} else {
// Adicionar novo produto ao carrinho
carrinhoProdutos[nomeProduto] = {
quantidade: quantidade,
valorUnitario: valorUnitario
};
}
// Atualizar o carrinho na página
atualizarCarrinho();
// Atualizar o valor total
totalGeral += quantidade * valorUnitario;
let campoTotal = document.getElementById('valor-total');
campoTotal.textContent = `R$ ${totalGeral.toFixed(2)}`;
// Limpar o campo de quantidade
document.getElementById('quantidade').value = 0;
}
function atualizarCarrinho() {
let carrinho = document.getElementById('lista-produtos');
carrinho.innerHTML = ''; // Limpar o carrinho atual
// Adicionar produtos do objeto carrinhoProdutos ao carrinho na página
for (let nomeProduto in carrinhoProdutos) {
let produto = carrinhoProdutos[nomeProduto];
let preco = produto.quantidade * produto.valorUnitario;
carrinho.innerHTML += `<section class="carrinho__produtos__produto">
<span class="texto-azul">${produto.quantidade}x</span> ${nomeProduto} <span class="texto-azul">R$ ${preco.toFixed(2)}</span>
</section>`;
}
}
function limpar() {
totalGeral = 0;
carrinhoProdutos = {};
document.getElementById('lista-produtos').innerHTML = '';
document.getElementById('valor-total').textContent = 'R$ 0';
}
Neste código, a função adicionar
verifica se o produto já está no carrinho por meio do objeto carrinhoProdutos
. Se o produto já existe, ele atualiza a quantidade, caso não, ele adiciona um novo produto. A função atualizarCarrinho
é responsável por atualizar a exibição do carrinho na página.
Espero ter ajudado!
Um forte abraço e bons estudos!