Carrinho de Compras Vue.js com Arrastar e Soltar

Introdução

Neste projeto, você aprenderá como implementar um carrinho de compras online com funcionalidade de arrastar e soltar (drag and drop). Este projeto visa ajudá-lo a entender e aplicar os conceitos de Vue.js e as APIs de arrastar e soltar fornecidas pelos navegadores web.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar o projeto e se familiarizar com os arquivos e a estrutura fornecidos.
• Como implementar a funcionalidade de arrastar e soltar para o carrinho de compras online, permitindo que os usuários adicionem produtos ao carrinho.
• Como exibir as informações do carrinho de compras, incluindo o número de produtos, os detalhes dos produtos e o preço total.
• Como testar o carrinho de compras online e garantir que a funcionalidade funcione conforme o esperado.

🏆 Conquistas

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

• Usar Vue.js para construir uma aplicação web.
• Implementar a funcionalidade de arrastar e soltar usando as APIs embutidas do navegador web.
• Exibir dados dinâmicos e atualizar a interface do usuário com base nas interações do usuário.
• Escrever código limpo e de fácil manutenção, organizando sua aplicação em componentes.

Configurar a Estrutura do Projeto

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

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

├── images
│   ├── book.jpeg
│   ├── box.jpeg
│   ├── paper.jpeg
│   ├── trolley.jpeg
│   └── tv.jpg
├── index.css
├── index.html
├── js
│   ├── http-vue-loader.js
│   └── vue.min.js
└── trolley.vue

Dentre eles:

• A pasta images fornece as imagens dos produtos necessárias para a página.
• index.css é o arquivo de estilo.
• index.html é a página principal.
• js/vue.min.js e js/http-vue-loader.js são arquivos relacionados à biblioteca Vue.
• trolley.vue é o arquivo de componente que precisa ser completado.

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.

Implementar a Funcionalidade de Arrastar e Soltar

Nesta etapa, você implementará a funcionalidade de arrastar e soltar para o carrinho de compras online.

1. Abra o arquivo trolley.vue.
2. Na função data(), você pode ver o array goods, que contém as informações dos produtos. Esses dados serão usados para exibir os produtos na seção "Lista de Produtos".
3. Adicione o seguinte código na seção methods:

methods: {
  dragstart(e, good) {
    e.dataTransfer.setData("name", good.name);
    e.dataTransfer.setData("price", good.price);
  },
  dragover(e) {
    e.preventDefault();
  },
  drop(e) {
    const { bought } = this;
    const name = e.dataTransfer.getData("name");
    const price = e.dataTransfer.getData("price");
    bought.push({ name, price: Number(price) });
  }
}

Explicação:

• O método dragstart é chamado quando o usuário começa a arrastar um produto. Ele define o nome e o preço do produto no objeto dataTransfer, que pode ser acessado posteriormente no método drop.
• O método dragover é chamado quando o item arrastado está sobre o carrinho de compras. Ele impede o comportamento padrão do navegador, o que é necessário para que o evento drop funcione.
• O método drop é chamado quando o usuário solta o item arrastado no carrinho de compras. Ele recupera o nome e o preço do produto do objeto dataTransfer e adiciona o produto ao array bought.

4. Na seção computed, adicione o seguinte código:

computed: {
  totalPrice() {
    const { bought } = this;
    var sum = 0;
    for (key in bought) {
      sum += bought[key].price;
    }
    return sum;
  },
  goodsDetail() {
    const { bought } = this;
    const names = [];
    const goods = [];
    for (key in bought) {
      names.push(bought[key].name);
    }
    function getRepeatNum() {
      return names.reduce(function (prev, next) {
        prev[next] = prev[next] + 1 || 1;
        return prev;
      }, {});
    }
    for (key in getRepeatNum()) {
      goods.push(`${key}*${getRepeatNum()[key]}`);
    }
    return goods.join(" ");
  }
},

Explicação:

• A propriedade computada totalPrice calcula o preço total dos produtos no carrinho de compras.
• A propriedade computada goodsDetail gera os detalhes dos produtos no carrinho de compras, exibindo o nome e a quantidade do produto.

Vinculando Eventos de Arrastar e Soltar ao HTML

Nesta etapa, precisamos vincular o evento de arrastar e soltar à tag div.

1. Na seção template do arquivo trolley.vue, localize o elemento <div class="good-list">.
2. No elemento <div class="good-list">, altere para o seguinte código:

<div class="good-list">
  <div
    v-for="good in goods"
    :key="good.name"
    class="good"
    draggable="true"
    @dragstart="dragstart($event, good)"
  >
    <img :src="good.cover" draggable="false" />
    <span>{{ good.name }}</span>
    <span>$ {{ good.price }}</span>
  </div>
</div>

3. Localize o elemento <div class="trolley" id="trolley">.
4. Altere o elemento <div class="trolley" id="trolley"> para o seguinte código:

<div id="trolley" class="trolley" @dragover="dragover" @drop="drop">
  <span id="bought" class="bought" v-if="bought.length !== 0"
    >{{ bought.length }}</span
  >
  <img src="./images/trolley.jpeg" />
</div>

Testar o Carrinho de Compras Online

1. Salve o arquivo trolley.vue.
2. Atualize a página para ver o estado inicial do carrinho de compras online.
3. Tente arrastar e soltar as imagens dos produtos no carrinho de compras.
4. Observe as mudanças no carrinho de compras, incluindo o número de produtos, os detalhes dos produtos e o preço total.
5. Certifique-se de que a funcionalidade funciona conforme o esperado.

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

Parabéns! Você implementou com sucesso o carrinho de compras online usando o projeto base fornecido e a funcionalidade de arrastar e soltar.

Resumo

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