1
resposta

Como fazer o carrinho de compras não repetir o produto selecionado e sim adicionar no existente?

Olá, consegui completar o desafio do curso e incrementar algumas melhorias. Porém eu não consegui descobrir como realizar a seguinte melhoria:

Exemplo: Quando o cliente escolher o Celular (1x Celular), depois escolher Fone de ouvido (1x Fone de ouvido) e depois escolher mais 2 celulares, quero que fique (3x Celular) e não repetir 2x Celular no carrinho, visto que no início já tinha 1 celular adicionado no carrinho.

1 resposta

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!