1
resposta

[Projeto] Carrinho de Compras

Achei beeem dificil e quebrei a cabeça varias vezes, no final deu tudo certo mas acho que o código ficou desnecessariamente grande e meio bagunçado

let produtosNoCarrinho = [];

function adicionar() {
   let produto = document.getElementById("produto").value;
   let dividindoProduto = produto.split(" - ", 2);
   let valorProduto = dividindoProduto[1];
   valorProduto = replace(valorProduto);
   let nomeProduto = dividindoProduto[0];
   let totalelemento = document.getElementById("valor-total");
   let total = replace(totalelemento.textContent);
   
   let quantidade = parseInt(document.getElementById("quantidade").value);
   if (isNaN(quantidade)) {
      quantidade = 1;
   }

   let produtoExistente = produtosNoCarrinho.find(p => p.nome === nomeProduto);

   if (produtoExistente) {
      produtoExistente.quantidade += quantidade;
   } else {
      let novoProduto = {
         nome: nomeProduto,
         quantidade: quantidade,
         valor: valorProduto
      };
      produtosNoCarrinho.push(novoProduto);
   }

   let listaProdutosElemento = document.getElementById("lista-produtos");
   listaProdutosElemento.innerHTML = "";

   produtosNoCarrinho.forEach(prod => {
      let novoProdutoElemento = document.createElement("section");
      novoProdutoElemento.classList.add("carrinho__produtos__produto");

      let quantidadeElemento = document.createElement("span");
      quantidadeElemento.textContent = `${prod.quantidade}x `;
      textoAzul(quantidadeElemento);
      novoProdutoElemento.appendChild(quantidadeElemento);

      let nomeElemento = document.createElement("span");
      nomeElemento.textContent = `${prod.nome} `;
      novoProdutoElemento.appendChild(nomeElemento);

      let valorElemento = document.createElement("span");
      valorElemento.textContent = `R$${(prod.valor * prod.quantidade)}`;
      textoAzul(valorElemento); 
      novoProdutoElemento.appendChild(valorElemento);

      listaProdutosElemento.appendChild(novoProdutoElemento);
   });

  
   let novoTotal = produtosNoCarrinho.reduce((acc, prod) => acc + (prod.valor * prod.quantidade), 0);
   let totalFormatado = "R$" + novoTotal;
   totalelemento.textContent = totalFormatado;

}

function limpar() {
   let limpandoProdutosCarrinho = document.getElementById("lista-produtos");
   while (limpandoProdutosCarrinho.firstChild) {
      limpandoProdutosCarrinho.removeChild(limpandoProdutosCarrinho.firstChild);
   }

   let limpandoTotal = document.getElementById("valor-total");
   limpandoTotal.innerHTML = "R$0,00";

   let limpandoQuantidade = document.getElementById("quantidade").value = "";

   produtosNoCarrinho = [];
}
a
function replace(variavel) {
   variavel = variavel.replace("R$", "");
   variavel = parseFloat(variavel);
   return variavel;
}

function textoAzul(elemento) {
   elemento.classList.add("texto-azul");
}
1 resposta

Oii, Miguel. Tudo bem?

Muito obrigada por compartilhar seu código com a comunidade Alura. Entendo que o projeto do carrinho de compras pode ser desafiador mesmo, ainda mais com a quantidade de detalhes para gerenciar os produtos no array e atualizar a interface.

Mas no começo é assim mesmo, o importante é que você tá praticando e fixando os conceitos. Mais pra frente você pode revisitar esse código e fazer o que chamamos de refatoração, que é o processo de melhorar a estrutura interna de um código sem alterar seu comportamento externo ou funcionalidade.

Conte com o apoio do Fórum na sua jornada. Abraços e bons estudos!