Como fazer para que o mesmo produto seja adicionado ao carrinho apenas 1 vez?

Oi Luidi! Tudo joia?

Para garantir que o mesmo produto seja adicionado ao carrinho apenas uma vez, você pode modificar a lógica de adição de produtos para verificar se o produto já está presente no carrinho.

Se estiver, apenas atualize a quantidade e o preço total desse produto, em vez de adicionar uma nova entrada. Aqui está um exemplo de como você pode fazer isso:

1. Crie uma estrutura para armazenar os produtos do carrinho. Você pode usar um objeto ou um array de objetos, onde cada objeto representa um produto com suas propriedades, como nome, quantidade e preço.

2. Ao adicionar um produto, verifique se ele já existe no carrinho. Se já existir, atualize a quantidade e o preço total desse produto. Caso contrário, adicione-o como um novo item.

Aqui está um exemplo de como isso pode ser implementado em JavaScript:

let carrinho = [];
let totalGeral = 0;

function adicionar() {
    let produto = document.getElementById('produto').value;
    let nomeProduto = produto.split('-')[0];
    let valorUnitario = parseFloat(produto.split('R$')[1]);
    let quantidade = parseInt(document.getElementById('quantidade').value);

    // Verifica se o produto já está no carrinho
    let produtoExistente = carrinho.find(item => item.nome === nomeProduto);

    if (produtoExistente) {
        // Atualiza a quantidade e o preço do produto
        produtoExistente.quantidade += quantidade;
        produtoExistente.preco += quantidade * valorUnitario;
    } else {
        // Adiciona o novo produto ao carrinho
        carrinho.push({
            nome: nomeProduto,
            quantidade: quantidade,
            preco: quantidade * valorUnitario
        });
    }

    // Atualiza o total geral
    totalGeral += quantidade * valorUnitario;
    atualizarCarrinho();
    atualizarTotal();
    document.getElementById('quantidade').value = 0;
}

function atualizarCarrinho() {
    let carrinhoElement = document.getElementById('lista-produtos');
    carrinhoElement.innerHTML = '';

    carrinho.forEach(item => {
        carrinhoElement.innerHTML += `<section class="carrinho__produtos__produto">
            <span class="texto-azul">${item.quantidade}x</span> ${item.nome} <span class="texto-azul">R$${item.preco}</span>
        </section>`;
    });
}

function atualizarTotal() {
    let campoTotal = document.getElementById('valor-total');
    campoTotal.textContent = `R$ ${totalGeral}`;
}

Com essa abordagem, sempre que você adicionar um produto, o código verifica se ele já está no carrinho e atualiza a quantidade e o preço, em vez de adicionar uma nova entrada.

Espero ter ajudado e bons estudos!

Como posso fazer para onde aparecer os preços dos produtos e o total do carrinho, tenha o ponto separando as casas decimais e a vírgula para os centavos?