Tutorial de Carrinho de Compras em JavaScript para Iniciantes

Índice

1. Introdução
2. Como criar um carrinho de compras usando JavaScript puro
3. Adicionar itens ao carrinho
4. Atualizar o total do carrinho
5. Remover itens do carrinho
6. Função de compra para finalizar a transação
7. Conclusão

Como criar um carrinho de compras usando JavaScript puro 😎

Neste artigo, vamos aprender como criar um carrinho de compras utilizando apenas o JavaScript puro. Vamos criar um carrinho de compras funcional que permitirá que os usuários adicionem itens, atualizem a quantidade, removam itens e finalizem a compra.

1. Introdução

Olá a todos! Bem-vindos ao meu vídeo sobre como criar um carrinho de compras usando apenas JavaScript puro. Neste vídeo, vamos criar um carrinho de compras interativo que permitirá que os usuários adicionem itens ao carrinho, atualizem a quantidade e removam itens do carrinho. Também teremos um botão para finalizar a compra, que removerá todos os itens do carrinho.

2. Adicionar itens ao carrinho

Vamos começar criando a função responsável por adicionar os itens ao carrinho. Para isso, vamos selecionar os botões "Adicionar ao Carrinho" utilizando o método getElementsByClassName e adicionar um evento de clique para cada um desses botões. Dentro do evento de clique, vamos obter as informações do item, como o nome, o preço e a imagem, e adicionar essas informações ao carrinho.

function adicionarAoCarrinho() {
  const botoesAdicionar = document.getElementsByClassName('botao-adicionar');

  for (let i = 0; i < botoesAdicionar.length; i++) {
    const botao = botoesAdicionar[i];

    botao.addEventListener('click', function(event) {
      const item = event.target.parentNode;
      const nome = item.getElementsByClassName('nome-item')[0].innerText;
      const preco = parseFloat(item.getElementsByClassName('preco-item')[0].innerText.slice(1));
      const imagem = item.getElementsByTagName('img')[0].src;

      adicionarItemAoCarrinho(nome, preco, imagem);
    });
  }
}

Agora, vamos criar a função adicionarItemAoCarrinho que irá adicionar o item ao carrinho. Nessa função, iremos criar uma nova linha para o item, exibindo o nome, o preço, a quantidade e um botão para remover o item do carrinho.

function adicionarItemAoCarrinho(nome, preco, imagem) {
  const item = {
    nome: nome,
    preco: preco,
    quantidade: 1,
    imagem: imagem
  };

  const carrinho = document.getElementById('carrinho');
  const linhaItem = document.createElement('div');
  linhaItem.classList.add('linha-item');

  const conteudoLinha = `
    <img src="${item.imagem}" alt="${item.nome}" class="imagem-item">
    <span class="nome-item">${item.nome}</span>
    <span class="preco-item">R$${item.preco.toFixed(2)}</span>
    <input type="number" value="${item.quantidade}" class="quantidade-item">
    <button class="botao-remover">Remover</button>
  `;

  linhaItem.innerHTML = conteudoLinha;
  carrinho.appendChild(linhaItem);

  atualizarTotalCarrinho();
  configurarRemoverItem();
  configurarAtualizarQuantidade();
}

3. Atualizar o total do carrinho

Vamos criar a função atualizarTotalCarrinho que será responsável por atualizar o total do carrinho sempre que um item for adicionado, a quantidade for alterada ou um item for removido.

function atualizarTotalCarrinho() {
  const linhaItens = document.getElementsByClassName('linha-item');
  let total = 0;

  for (let i = 0; i < linhaItens.length; i++) {
    const linha = linhaItens[i];
    const preco = parseFloat(linha.getElementsByClassName('preco-item')[0].innerText.slice(2));
    const quantidade = parseInt(linha.getElementsByClassName('quantidade-item')[0].value);

    total += preco * quantidade;
  }

  const totalCarrinho = document.getElementById('total-carrinho');
  totalCarrinho.innerText = `Total: R$${total.toFixed(2)}`;
}

4. Remover itens do carrinho

Agora, vamos criar a função configurarRemoverItem que será responsável por configurar o evento de clique para os botões de remover item no carrinho. Quando um botão de remover for clicado, iremos remover a linha correspondente do item do carrinho.

function configurarRemoverItem() {
  const botoesRemover = document.getElementsByClassName('botao-remover');

  for (let i = 0; i < botoesRemover.length; i++) {
    const botao = botoesRemover[i];

    botao.addEventListener('click', function(event) {
      const botaoRemover = event.target;
      const linhaItem = botaoRemover.parentNode;

      linhaItem.remove();
      atualizarTotalCarrinho();
    });
  }
}

5. Função de compra para finalizar a transação

Por último, vamos criar a função finalizarCompra que será chamada quando o botão de compra for clicado. Essa função irá exibir uma mensagem de agradecimento ao usuário e remover todos os itens do carrinho.

function finalizarCompra() {
  const carrinho = document.getElementById('carrinho');

  while (carrinho.firstChild) {
    carrinho.removeChild(carrinho.firstChild);
  }

  atualizarTotalCarrinho();
  alert('Obrigado por sua compra! Volte sempre!');
}

6. Conclusão

Parabéns! Agora você sabe como criar um carrinho de compras utilizando JavaScript puro. Neste artigo, aprendemos como adicionar itens ao carrinho, atualizar o total do carrinho, remover itens do carrinho e finalizar a compra. Espero que esse conhecimento seja útil para você em seus projetos futuros. Obrigado por ler e continue codando! 😄

Destaques

• Criação de um carrinho de compras funcional usando JavaScript puro
• As principais funcionalidades incluem adicionar itens, atualizar a quantidade, remover itens e finalizar a compra
• Utilização de eventos de clique e mudança para capturar as ações dos usuários
• Manipulação do DOM para adicionar e remover elementos do carrinho
• Atualização dinâmica do total do carrinho conforme os itens são adicionados ou removidos
• Exibição de mensagens de alerta para feedback do usuário

Perguntas Frequentes (FAQ)

Q: Posso adicionar itens com quantidade zero ao carrinho? R: Não, a quantidade mínima é 1. O código foi projetado dessa forma para garantir que os usuários tenham pelo menos um item no carrinho.

Q: Os itens removidos do carrinho podem ser recuperados? R: Não, uma vez removidos, os itens são permanentemente excluídos do carrinho. Certifique-se de revisar o carrinho antes de finalizar a compra.

Q: Posso adicionar itens ao carrinho mesmo se eles já estiverem no carrinho? R: Não, o código verifica se os itens já estão no carrinho antes de adicioná-los novamente. Isso evita duplicatas desnecessárias.