Construindo um Carrinho de Compras com Vue.js

Introdução

Neste projeto, você aprenderá como construir uma funcionalidade de carrinho de compras usando Vue.js 2.x. O carrinho de compras é um recurso essencial em sites de comércio eletrônico, permitindo que os usuários gerenciem seus produtos selecionados antes de fazer uma compra.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como modificar o método addToCart para adicionar produtos ao carrinho de compras
• Como aprimorar o método removeGoods para remover produtos do carrinho de compras
• Como testar a funcionalidade geral do carrinho de compras

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Gerenciar o estado de um carrinho de compras em uma aplicação Vue.js
• Lidar com a adição e remoção de produtos no carrinho de compras
• Atualizar a interface do usuário com base nas alterações no carrinho de compras

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga as etapas abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura do diretório é a seguinte:

├── css
│   └── index.css
├── images
│   ├── 1.png
│   └── 2.png
├── js
│   ├── goods.js
│   └── vue.js
└── index.html

Onde:

• css/index.css é o arquivo de estilo.
• images é a pasta de imagens.
• js/goods.js é o arquivo de dados.
• js/vue.js é o arquivo Vue 2.x.
• index.html é o layout e a lógica da página.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Os problemas atuais que surgem são apresentados abaixo:

• Ao clicar no botão "Add to cart" na "Product List" N vezes, o produto aparecerá N vezes na lista do carrinho de compras com uma quantidade inicial de 1.
• Ao clicar no botão de mais ("+") ao lado do produto no carrinho de compras, o produto será repetido na lista do carrinho de compras com uma quantidade inicial de 1.
• Ao clicar no botão de menos ("-") ao lado do produto no carrinho de compras, o produto não é removido do carrinho.

Modificar o Método addToCart

Nesta etapa, você aprenderá como modificar o método addToCart para adicionar produtos ao carrinho de compras.

1. Abra o arquivo index.html.
2. Localize o método addToCart na instância do Vue.
3. Modifique o método addToCart para atender aos seguintes requisitos:
   • Se o produto não existir no carrinho de compras, adicione o produto ao final do carrinho e inicialize a quantidade para 1.
   • Se o produto já existir no carrinho de compras, simplesmente aumente a quantidade em 1.

O método addToCart modificado deve ser semelhante a este:

addToCart(goods) {
  // TODO: Modifique a função atual para realizar os requisitos de adição de produto ao carrinho de compras

  let exit = 0;
  this.cartList.forEach(item => {
    if (goods.id == item.id) {
      item.num++
      exit = 1
    }
  });
  if (!exit) {
    goods.num = 1;
    this.cartList.push(goods);
    this.cartList = JSON.parse(JSON.stringify(this.cartList));
  }
},

4. Salve o arquivo index.html.

Melhorar o Método removeGoods

Nesta etapa, você aprenderá como melhorar o método removeGoods para remover produtos do carrinho de compras.

1. Abra o arquivo index.html.
2. Localize o método removeGoods na instância do Vue.
3. Melhore o método removeGoods para atender aos seguintes requisitos:
   • Ao clicar no botão de menos ("-") ao lado do produto no carrinho de compras, diminua a quantidade em 1.
   • Se a quantidade resultante for 0, remova o produto do carrinho de compras.

O método removeGoods deve ser semelhante a este:

removeGoods(goods) {
  // TODO
  this.cartList.forEach((item, index, arr) => {
    if (goods.id == item.id) {
      item.num--
    }
    if (item.num == 0) {
      arr.splice(index, 1)
    }
  });
}

4. Salve o arquivo index.html.

Testar a Funcionalidade do Carrinho de Compras

1. Atualize a página no seu navegador.

2. Verifique se o botão "Adicionar ao carrinho" funciona corretamente:

   • Se o produto não existir no carrinho de compras, ele deve ser adicionado com uma quantidade de 1.
   • Se o produto já existir no carrinho de compras, a quantidade deve ser aumentada em 1.

3. Verifique se os botões "+" e "-" no carrinho de compras funcionam corretamente:

   • Clicar no botão "+" deve aumentar a quantidade do produto em 1.
   • Clicar no botão "-" deve diminuir a quantidade do produto em 1.
   • Se a quantidade atingir 0, o produto deve ser removido do carrinho de compras.

O efeito final da implementação é o seguinte:

Parabéns! Você concluiu com sucesso o projeto do carrinho de compras.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.