Uma das partes mais importantes de toda solução de comércio eletrônico é a funcionalidade do carrinho. É crucial que os usuários possam adicionar e remover itens de seus carrinhos de maneira conveniente.
Em um post anterior, mostrei a você como construir um site de comércio eletrônico rápido usando SvelteKit e a Shopify Storefront API . Mas não tocamos em como gerenciar o carrinho nessa postagem. Isso é o que faremos aqui-mostraremos como adicionar e remover produtos de um carrinho por meio da API do carrinho de vitrine da Shopify.
Aqui está uma atualização rápida: o site de que estamos falando atualmente é implantado aqui no Netlify e hospedado em GitHub . Dê uma olhada e brinque com ele um pouco, se quiser. Quando terminar, volte, vamos direto ao assunto.
Adicionando itens ao carrinho
Olhando em nosso site implantado, podemos ver na página de detalhes do produto, na qual podemos clicar um botão para adicionar o produto ao carrinho. Este parece ser um candidato muito bom para funções sem servidor, mas o Svelte também oferece rotas de API e vamos usá-lo para este projeto.
Com as rotas de API do Svelte, podemos configurar um add-to-cart ponto de extremidade para o qual podemos postar os detalhes de nosso produto sempre que um usuário clicar no botão Adicionar ao carrinho. O endpoint receberá os dados e fará uma solicitação POST ao Shopify para criar um carrinho com o produto ou adicionar o produto a um carrinho (se houver).
Na pasta src/routes, crie um nova pasta chamada api. Nele, podemos criar nosso primeiro endpoint chamado add-to-cart.js e configurá-lo da seguinte forma:
//src/routes/api/add-to-cart import {createCartWithItem} from’./utils/createCartWithItem’; import {addItemToCart} de’./utils/addItemToCart’; exportar função assíncrona post (solicitação) {let {cartId, itemId, quantidade}=JSON.parse (request.body); quantidade=parseInt (quantidade); if (cartId) {console.log (‘Adicionando item ao carrinho existente…’); const shopifyResponse=await addItemToCart ({cartId, itemId, quantidade}); return {statusCode: 200, body: JSON.stringify (shopifyResponse.cartLinesAdd.cart)}; } else {console.log (‘Criando novo carrinho com item…’); const createCartResponse=await createCartWithItem ({itemId, quantidade}); return {statusCode: 200, body: JSON.stringify (createCartResponse.cartCreate.cart)}; }}
A lógica aqui é direta. Quando o botão Adicionar ao carrinho é clicado, obtemos os detalhes necessários (cartId, itemId e quantidade) da página do produto e os postamos neste terminal. Então, no endpoint acima, recebemos os dados e verificamos se um cartId válido está presente no corpo da solicitação.
Se estiver, vamos em frente e adicionamos o produto ao carrinho. Caso contrário, criaremos um carrinho com os dados do produto que recebemos
Usei funções utilitárias aqui ( createCartWithItem e addItemToCart ) para acelerar as coisas. Sinta-se à vontade para consultá-los para entender melhor o que fizemos lá.
Agora que configuramos um ponto de extremidade para receber os dados do nosso produto e adicioná-lo ao carrinho, podemos voltar para a página do produto e definir uma função addToCart para postar dados neste endpoint:
//src/routes/products/[handle].svelte
Tudo o que fizemos aqui foi adicionar a função addToCart () a este arquivo. Já sabemos o que a função deve fazer e é precisamente para isso que a configuramos: coletar o itemId, o cartId e a quantidade selecionada do produto e postá-lo em nosso endpoint adicionar ao carrinho.
Se cartId for nulo-como espero que seja quando um usuário clicar nesse botão pela primeira vez-um novo carrinho será criado e salvo em localStorage. Então, vamos testar:
! [Adicionar ao carrinho] (https://res.cloudinary.com/kennyy/video/upload/v1628966905/addtocart_yg0ov8.gif)
Annnnnnnnnnnd, sim! Estamos adicionando itens ao carrinho com sucesso, yay! Mas ainda não é tão óbvio. Registrar a resposta no console não é exatamente útil para o usuário, então vamos criar um componente Header para tornar óbvio quando um item foi adicionado ao carrinho:
//src/components/Header.svelte
Este é o
Agora só precisamos atualizar nosso arquivo src/routes/__ layout.svelte para importar e usar o novo Componente do cabeçalho:
//src/routes/__ layout.svelte
Testando isso no navegador, devemos obter a experiência desejada:
! [add to cart working demo] (https://res.cloudinary.com/kennyy/video/upload/v1628971519/add_to_cart_demo_kv41g5.gif)
Fazendo uma página de carrinho
Neste ponto, provavelmente precisamos para ver o carrinho quando adicionamos itens a ele, certo? Vamos criar uma página cart.svelte na pasta src/routes e configurá-la da seguinte forma:
//src/routes/cart.svelte
{#if cartItems.length> 0}
Seu carrinho está vazio, encha-o!
{/if}
Nesta página do carrinho, quando os componentes são montados, obtemos nossos dados do carrinho de localStorage e os salvamos na variável do carrinho que declaramos. Então, no conteúdo da página, mostraremos condicionalmente os itens no carrinho, se houver. Caso contrário, apenas dizemos aos usuários para adicionar itens ao carrinho.
E com isso, configuramos com sucesso a nossa página do carrinho. Se você notou que usamos novos componentes aqui, bom olho! Você pode acessá-los aqui: Componente CartTable e componente CartTotal .
Estou me esforçando para manter este post dentro de um comprimento razoável, então não vou me aprofundar em funções e componentes utilitários. Forneci links para o repositório do projeto e também para os arquivos diretos que acessamos nesses snippets para que seja fácil para você pesquisá-los rapidamente, se desejar.
Vamos verificar novamente no navegador para nossa implementação da página do carrinho:
! [página do carrinho] (https://res.cloudinary.com/kennyy/video/upload/v1628973488/cart_page_so8n2p.gif)
Removendo itens do carrinho
Parece que nosso carrinho está funcionando corretamente e a única coisa que resta é remover os itens do carrinho.
Isso seria o contrário do que fizemos para adicionar itens ao carrinho.. Quando um usuário clica no botão Remover Item, faremos uma solicitação de postagem para nosso endpoint/remove-from-cart e atualizaremos o carrinho em localStorage com a nova resposta. Vamos criar o endpoint na pasta api:
//src/routes/api/remove-from-cart import {removeItemFromCart} de’./utils/removeItemFromCart’; exportar função assíncrona post (solicitação) {const {cartId, lineId}=JSON.parse (request.body); tente {const shopifyResponse=await removeItemFromCart ({cartId, lineId}); return {statusCode: 200, body: JSON.stringify (shopifyResponse.cartLinesRemove.cart)}; } catch (error) {console.log (‘Ocorreu um erro ao remover-item-do-carrinho’); console.log (erro); }}
Assim como as outras funções de utilitário que usamos até agora, você pode encontre a função removeItemFromCart () aqui para seu uso. Parece que estamos prontos para remover itens do carrinho, exceto que não o conectamos ao nosso botão Remover Item. Para fazer isso, precisamos acionar essa solicitação de postagem quando o botão for clicado em nosso componente CartTable:
//src/components/CartTable.svelte
E agora, se clicarmos no botão Remover item, devemos ver que o item é removido do carrinho:
! [remover item do carrinho] (https://res.cloudinary.com/kennyy/video/upload/v1628978644/remove_from_cart_gycv7k.gif)
E com isso, chegamos ao final de nossa aventura mini Shopify e SvelteKit. Espero que você tenha gostado do processo tanto quanto eu gostei de criá-lo.
Se você tiver algum problema, sinta-se à vontade para abri-lo ou, melhor ainda, envie um PR no repositório do projeto . A demonstração também está hospedada aqui no Netlify se você quiser explorar o site.
