Neste tutorial, aprenderemos como exibir, atualizar e excluir itens do carrinho de compras em nosso aplicativo de e-commerce de demonstração

Introdução

Estamos construindo um aplicativo de e-commerce do zero usando Vue.js no frontend e Java com Springboot no backend. Você pode conferir o primeiro tutorial de frontend desta série aqui

Estamos construindo um componente de carrinho de compras para exibir e atualizar os itens de carrinho que o usuário adicionou ao carrinho.

Usaremos o Vue.js para criar uma bela interface do usuário para o carrinho de compras.

Demonstração do que vamos implementar

Você pode jogar com o aplicativo de comércio eletrônico aqui

Você pode encontrar o código completo no Github .

Processo interno

Anteriormente, construímos o backend do carrinho de compras usando Java e Springboot. Você pode encontrá-lo aqui

Vamos desenvolver o carrinho de compras para o aplicativo de comércio eletrônico

Pré-requisitos

1. Conhecimento em Vuejs
2. Código do Visual Studio — código aberto (recomendado)
3. Um bom navegador — (Chrome — recomendado)

Antes de pular para a codificação da parte do frontend, temos que discutir a API que usaremos para o frontend. Você pode encontrar o código de back-end aqui

Adicionar ao carrinho (POST):

Neste método, teremos que enviar o id do produto e a quantidade para que o produto fornecido possa ser adicionado ao carrinho do usuário correspondente. Portanto, o corpo da solicitação POST deve se parecer com o seguinte,

Obter todos os itens do carrinho (GET):

Agora, para obter todos os itens do carrinho para um determinado usuário, precisamos ter uma solicitação GET. Em troca, obteremos todos os productdetalhes quantitye o custo total dos itens no carrinho. O cartItemsé a matriz de todos os productspresentes no carrinho e totalCostrepresenta o custo total de todos os itens no carrinho.

Atualizar um item (PUT):

Para atualizar um determinado produto no carrinho, precisamos do cart_item_id, quantitye user_token.

Excluir o item do carrinho (DELETE):

Para excluir um determinado produto do carrinho, precisamos do cart_item_id. Podemos excluir esse item por seu id.

O fluxo deste tutorial

1. Adicionar ao carrinho

2. Exibir itens do carrinho

3. Atualize um item no carrinho

4. Excluir um item do carrinho

Estrutura de pastas

Vá em frente e crie uma pasta chamada Cart na pasta views do nosso projeto Vue e então crie um arquivo vue.js Cartna pasta Cart.

A estrutura de pastas deve ficar assim

Neste Cart.vuecomponente ( ) estaremos exibindo os itens do carrinho que o usuário adicionou ao seu carrinho.

Aqui o usuário também poderá atualizar o número de itens no carrinho ou excluir o item do carrinho. Além disso, exibiremos o preço do carrinho na parte inferior da página, que será atualizado sempre que o usuário modificar o carrinho.

Os usuários também podem clicar em um item específico para visualizar seus detalhes.

Agora vamos para a codificação

Criaremos um Cart.vuearquivo que, como qualquer arquivo Vue.js, possui três componentes

1. Tag <template> (para escrever tags HTML)

2. uma tag <script> (para codificar a lógica/funcionalidades)

3. uma tag <style> (para adicionar CSS à página).

Nas tags de script, precisamos exportar o componente Cart que pode ser renderizado em alguns componentes importando-o.

1. Adicionar ao carrinho

Estaremos usando a API :/cart/add que vimos acima na descrição da API .

Temos um showdetailscomponente que exibe os detalhes do produto que o usuário deseja visualizar ou adicionar ao carrinho.

Portanto, neste componente, temos um botão AddtoCart que chama o método post(addToCart) da nossa API de backend que terá um corpo do post do id do produto e a quantidade desse produto.

2. Exibindo os itens do carrinho

Estaremos usando a API: /cart/ getCartItems que vimos acima na descrição da API .

Para isso, precisaremos de variáveis ​​de dados que vincularemos com atributos HTML

• carts : para armazenar os dados de resposta que serão buscados na chamada da API,
• token : token do usuário para verificar se o usuário está logado ou não,
• len : para armazenar o comprimento dos itens no carrinho
• totalcost : para armazenar o custo total dos itens no carrinho,
• cartItem : um array de objetos onde cada objeto contém os seguintes campos de dados :
• imgUrl : a imagem do produto
• pName : nome do produto,
• pDescrição : descrição do produto,
• pPreço : preço do produto,
• pQuantity : quantidade do produto,
• id : id do item,
• userId : id do usuário

Agora, sempre que o usuário for navegado para /cart, ou seja, o componente Cart é montado/renderizado, definimos o valor do token do armazenamento local.



função listCartItems() : será usada para obter e exibir os itens no carrinho.

Como queremos buscar os itens, o método get do Axios será usado e será passado o token do usuário como parâmetro. Portanto, nossa API de backend encontra o usuário com o token fornecido e, de acordo com o userID, retorna uma matriz de itens em seu carrinho com um código de status de success. Mas se o token fornecido for inválido, ou seja, o usuário não estiver logado, ele retornará uma resposta informando que o token é inválido.

Se o status de resposta da chamada de API que fizemos for success, armazenamos os dados da resposta na variável de dados de carrinhos que criamos anteriormente. A resposta contém uma matriz chamada cartItems que contém cartId, productId, userId e uma matriz de produto que contém os detalhes do produto. Então o comprimento do cartsarray “ ” nos dará o número de itens no carrinho que serão armazenados na variável “ len”.

Agora, iteramos os itens do carrinho usando o loop for e armazenamos os detalhes de cada produto no array “cartItem”.

Exibindo os detalhes de um produto

Sempre que o usuário clicar em um item no carrinho, o usuário será direcionado para o componente showDetails, onde os detalhes desse item serão exibidos.

Função showDetails() : receberá um parâmetro ou seja, o id do produto que será passado como params no método push da instância do roteador ($router) e então o usuário será navegado até o componente showDetails que mostrará os detalhes do produto de acordo com o id recebido. Então, quando clicamos na imagem ou no nome do item, ele mostrará detalhes desse item como abaixo:



Não se preocupe que não adicionamos a parte HTML e você pode estar se perguntando como ela está sendo exibida. A parte HTML que anexei no final é para dar uma visualização do que estamos construindo, então fique atento!

3. Atualizando um item do carrinho



Usaremos a API:/cart/update/{cartItemId} que vimos acima na descrição da API .

updateItem() : Esta função receberá um índice do produto no cartItem e uma nova quantidade

Em primeiro lugar, encontraremos o itemId em nosso array cartItems fazendo um loop por ele e, em seguida, quebraremos o loop e armazenaremos o índice do item encontrado na variável “i”.

Em seguida, atualize a quantidade do produto com a nova quantidade recebida dos parâmetros. Além disso, armazenamos userId e productId nas variáveis, pois precisamos passar o corpo da resposta para nossa chamada de API de back-end. Aqui nesta API de backend também será feita a primeira autenticação do usuário e então o item com o itemId fornecido será encontrado e assim sua quantidade será atualizada.

Como estamos atualizando uma entidade, usamos o método put do Axios e passamos itemId e token como params e itemId, userId, productId, quantidade como o corpo da resposta.

4. Excluindo um item do carrinho



Usaremos a API:/cart/delete/{cartItemId} que vimos acima na descrição da API .

deleteItem(): Esta função receberá um itemId

Chamamos o método delete do Axios que chamará a API de backend para o respectivo mapeamento de URL e será fornecido com o itemId e o token como params. Portanto, essa API de back-end encontrará primeiro o usuário com o token fornecido e, se o usuário for encontrado, o item do carrinho com o itemId fornecido será excluído do banco de dados. Após a exclusão, a API envia o status de resposta como 200 o produto é excluído do carrinho e atualizamos a página.

Agora mais um ponto a ser observado que quando este componente for renderizado/montado os itens do carrinho devem ser exibidos. Por isso, chamamos o método listCartItems() no método “montado”.

mounted() {
   this.token = localStorage.getItem("token");
   this.listCartItems();
}

Agora vamos começar a trabalhar na parte HTML. Portanto, nas tags de modelo, precisamos adicionar nossos atributos HTML. Agora exibimos os itens se e somente se o usuário os adicionou ao carrinho. Então, em geral, sempre que a renderização condicional é feita, usamos a diretiva v-if do Vuejs. O bloco só será renderizado se a expressão da diretiva retornar um valor de verdade.

À medida que armazenamos os dados de resposta que obtemos de nossa API na variável "carts", ela é usada para determinar se os itens devem ou não ser exibidos, ou seja, se o valor "carts" não for nulo, o bloco div com a diretiva v-if será Ser exibido.

Agora, como podemos ter mais de um item no carrinho, precisamos percorrer o array “cartItem” e exibi-los. Para isso, usamos a diretiva v-for que precisa receber uma chave (obrigatória) para identificar exclusivamente um item. Lembre-se do comprimento dos itens do carrinho que armazenamos na variável “len”, ela é usada aqui em loop.

Agora, para cada produto, exibimos sua imagem com a ajuda da diretiva v-bind e, ao clicar, chamamos o método showDetails().

Agora, usando o conceito de vinculação de dados bidirecional de vuejs, exibimos o nome, descrição, preço, quantidade, o preço total desse item.

Além disso, precisamos adicionar botões para o método delete e update.



Quando o botão de exclusão for clicado, deleteItem será chamado e a implementação do que vimos anteriormente.

Como a quantidade pode ser atualizada, criamos um formulário que aceita a quantidade e enviamos usando o botão atualizar. Ligamos o atributo de entrada com a variável “pQuantity” que criamos usando a diretiva v-model.

Isso chamará a função updateItem() onde será passado o índice (lembre-se que ao implementar este método aceitamos um parâmetro para encontrar aquele produto no carrinho) e a quantidade do produto que precisa ser atualizada.

Por fim, exibimos o custo total do carrinho armazenado na variável “totalcost”.

Parabéns!

Agora você exibiu e atualizou com sucesso os produtos adicionados ao carrinho.

Você pode encontrar o código completo neste GitHub Repo