Se você tem se mantido atualizado com o ecossistema de comércio sem cabeça, deve ter ouvido algumas conversas na comunidade sobre o Shopify Storefront API . A API permite que os proprietários de lojas usem sua loja do Shopify como um serviço de back-end para alimentar qualquer aplicativo de front-end de sua escolha.
Isso significa que você pode ter uma loja do Shopify com todos os seus produtos e, em seguida, construir o seu site de comércio eletrônico personalizado com qualquer ferramenta de front-end de sua escolha (como React, Vue, Angular, Next.js, Nuxt e assim por diante). Isso permite que você venda os produtos em sua loja Shopify por meio de outros canais, como aplicativos móveis, jogos online e aplicativos da web.
Quando vimos este anúncio, minha equipe da Netlify decidiu dar uma volta e construir coisas com ele. O resultado foram cinco modelos iniciais diferentes-Astro, Nuxt, Gridsome, Eleventy e Angular-todos desenvolvidos com uma loja de back-end com base no Shopify. Vamos construir outro com SvelteKit !
Definido up Shopify
A primeira coisa que provavelmente devemos fazer é configurar uma loja Shopify . Tudo isso não será possível sem ele. Veja como você pode configurar um rapidamente para você:
Crie uma conta de parceiro do Shopify se você não tiver um Faça login em sua conta de parceiro e crie uma loja de desenvolvimento Shopify ( para testar suas implementações) Gere suas credenciais de API para fazer solicitações autenticadas em sua vitrine API Crie produtos e variantes de produtos em sua loja. Podem ser produtos fictícios ou reais Crie um aplicativo privado no painel de administração do Shopify . Isso representará seu aplicativo cliente, onde você fará solicitações.
Se você fez tudo isso, faça uma pausa e tome um copo d’água. Então volte e junte-se a mim. Vamos construir isso!
Configure o SvelteKit
Para começar com o SvelteKit, você pode querer dar uma olhada rápida em Documentação do SvelteKit para ter uma ideia de como funciona. Caso contrário, fique por aqui e eu o orientarei exatamente o que você precisa para colocar este site no ar!
Instale e execute o SvelteKit com os comandos abaixo:
npm init svelte @ next sveltekit-shopify-demo cd sveltekit-shopify-demo npm install npm run dev—open
Esses comandos farão algumas coisas por você:
Crie um novo projeto SvelteKit para você Instale os pacotes necessários Abra o projeto em seu navegador em localhost: 3000 assim:
Ok, parece que estamos prontos para começar a editar este projeto e torná-lo parecido com o site que queremos construir. Ah, e a propósito, este é o projeto que estamos construindo, se você quiser dar uma espiada:
Tudo bem, vamos construir!
Estilo
Por conveniência, usarei um arquivo de estilo global neste projeto. Abra seu arquivo app.css e atualize-o com este snippet CSS para estilo . É isso para estilizar. Tudo o que precisamos fazer agora é referenciar as classes certas nos arquivos do projeto e este aplicativo deve funcionar exatamente como o esperado.
Buscar produtos no Shopify
O que é um site de comércio eletrônico sem produtos, direito? Eu sei. Se você criou sua conta do Shopify e adicionou produtos a ela, deverá ser capaz de ver a página de lista de produtos no painel de administração do Shopify.
Aqui está o meu. Agradeço ao meu colega Tara por criar esta loja e enchê-la de produtos para que eu possa usá-la e fingir que fiz todo o trabalho.
Agora o que queremos fazer é fazer uma chamada de API de nosso aplicativo SvelteKit para buscar todos esses produtos de nossa loja Shopify e exibi-los em nosso aplicativo. Antes de fazermos isso, vamos falar sobre autenticação.
Autenticação
Não seria bom saber que os dados em sua loja estão protegidos e só você pode acessá-los? Isto é. Cada loja Shopify tem credenciais que você pode usar para acessá-las de outros aplicativos-neste caso, de nosso aplicativo SvelteKit.
Se você ainda não gerou credenciais para sua loja, vá em frente e Svelte store . Se quiser mais informações sobre isso, eu o ajudarei-leia o link info.
Crie um arquivo store.js na raiz da pasta do seu projeto e atualize-o com este trecho:
//store.js import {writable} from’svelte/store’; importar {postToShopify} de’../src/routes/api/utils/postToShopify’; export const getProducts=async ()=> {try {const shopifyResponse=await postToShopify ({query: `{products (sortKey: TITLE, first: 100) {edge {node {id handle description title totalInventory productType variantes (first: 5) {bordas {nó {id título quantidadeAvailable price}}} priceRange {maxVariantPrice {quantidade currencyCode} minVariantPrice {quantidade currencyCode}} imagens (primeiro: 1) {bordas {nó {src altText }}}}}}} `}); return shopifyResponse; } catch (erro) {console.log (erro); }};
Ok, o que está acontecendo? Vamos examinar isso. Primeiro, definimos uma consulta getProducts que solicita os primeiros 100 produtos que temos em nossa loja Shopify. Em seguida, passamos a consulta para nossa função de utilitário PostToShopify que obtém a consulta, adiciona nossas chaves de API para autenticar a solicitação e chama o endpoint do Shopify.
Mas você provavelmente percebeu que a função postToShopify não existe ainda, então vamos em frente e criá-lo na pasta projects src/api/utils. Se essa pasta não existir, você pode criá-la ou colocar a função onde quiser (apenas certifique-se de referenciá-la corretamente). O meu está neste diretório: src/routes/api/utils/postToShopify.js.
Atualize o arquivo com o snippet abaixo:
export const postToShopify=async ({query, variables})=> {try {const result=await fetch (import.meta.env.VITE_SHOPIFY_API_ENDPOINT, {method:’POST’, headers: {‘Content-Type’:’application/json’,’X-Shopify-Storefront-Access-Token’: import.meta.env.VITE_SHOPIFY_STOREFRONT_API_TOKEN}, corpo: JSON.stringify ({consulta, variáveis})}). then ((res)=> res.json ()); if (result.errors) {console.log ({erros: result.errors}); } else if (! resultado ||! resultado.data) {console.log ({resultado}); return’Nenhum resultado encontrado.’; } return result.data; } catch (erro) {console.log (erro); }};
N.B., estou usando as variáveis de ambiente que definimos anteriormente para autenticar as solicitações que estamos fazendo ao Shopify. Certifique-se de prefixar suas variáveis de ambiente com import.meta.env.
Feito isso, agora podemos testar nossa implementação para verificar se estamos obtendo produtos de nossa loja Shopify com sucesso. Acesse src/routes/index.svelte do seu projeto e atualize-o com este snippet:
//src/routes/index.svelte
{#each $ products as product}
{product.node.title}
{/each}
O que estamos fazendo aqui é:
Obtendo os dados dos produtos de nossa loja Passando os produtos para a página de índice como uma propriedade Iterando sobre todo o produto dados e exibindo o nome de cada produto
Vamos verificar o navegador e ver se é esse o caso:
E, de fato, estamos obtendo os produtos de nossa loja corretamente.
Parabéns, superamos a primeira tarefa. Mas é claro, estamos fazendo isso apenas para testar nossa implementação. Vamos criar dois componentes (ProductCard.svelte e ProductList.svelte) para nos ajudar a organizar e exibir os produtos da maneira que desejamos.
Crie componentes para organizar e exibir os produtos
Crie um pasta de componentes na pasta src de seus projetos e adicione os dois arquivos que mencionei acima. Vou configurá-lo assim:
//src/components/ProductCard.svelte
Aqui, estamos esperando um produto prop que será passado para este componente de onde quer que ele seja renderizado. Quando obtemos esse suporte, extraímos dele os diferentes detalhes do produto de que precisamos e, em seguida, usamos esses detalhes para construir nosso cartão de produto, como você pode ver no snippet acima.
Vamos fazer o mesmo com nosso produto componente de listagem. Crie um arquivo ProductList.svelte na pasta src/components e configure-o da seguinte forma:
//src/components/ProductList.svelte
Aqui, recebemos uma proposta de produtos de nossa página de índice (é onde renderizaremos este componente) e iterar sobre os produtos para renderizar um cartão de produto para cada produto. Com isso, podemos ir para a página de índice src/routes/index.svelte e renderizar nosso componente productList. Atualize-o com este snippet:
//src/routes/index.svelte
Aqui, nós estamos fazendo o seguinte:
Obtendo os dados do produto de nossa loja Filtrando a lista de produtos com base na consulta da página (usaremos a consulta da página para filtrar a lista de produtos posteriormente em um componente de cabeçalho) Transmitindo o produto filtrado lista para a página como um acessório Renderizando nosso componente ProductList e passando os dados do produto para ele como um acessório
É isso! Quando verificarmos novamente o navegador, devemos obter uma página de lista de produtos com melhor aparência:
Crie uma página de detalhes do produto
Portanto, configuramos nosso produto página de listagem, ótimo! o que acontece se um usuário clicar em Exibir item na captura de tela acima? No momento, nada. Na verdade, algo vai acontecer: o navegador navegará para esta rota/produtos/[título-do-produto] e resultará em um 404 porque essa página ainda não existe.
Para criar páginas de produtos individuais, vamos atualizar nosso arquivo store.js e adicionar outra consulta que pegará nosso identificador de produto e usará para buscar aquele produto específico em nossa loja Shopify.
Isso significaria que sempre que um usuário visitar nossa página individual de produto, ou seja,/produtos/gruyere envelhecido, o identificador de produto envelhecido-gruyere estará disponível na página como page.params.handle. Podemos então usar esse identificador para consultar o Shopify para esse produto. Atualize store.js com esta consulta:
//store.js import {writable} from”svelte/store”; importar {postToShopify} de”./src/routes/api/utils/postToShopify”; exportar produtos constantes=gravável ([]); export const productDetails=gravável ([]); export const getProducts=async ()=> {//obter consulta de produtos};//Obter detalhes do produto export const getProductDetails=async (handle)=> {try {const shopifyResponse=await postToShopify ({query: `query getProduct ($ handle: String!) {ProductByHandle (handle: $ handle) {id handle description title variantes totalInventory (primeiro: 5) imagens de {arestas {nó {id título quantidadeAvailableV2 {quantidadeCódigo da moeda}}}} preçoRange {maxVariantPrice {valor Código da moeda} minVariantPrice {quantia Código da moeda}} imagens (primeiro: 1) {bordas {nó {src altText}}}}} `, variáveis: {handle: handle,},}); productDetails.set (shopifyResponse.productByHandle); return shopifyResponse.productByHandle; } catch (erro) {console.log (erro); }};
Aqui, estamos definindo uma nova consulta que buscará um produto específico com base no identificador do produto, que passamos para a consulta como uma variável. Quando chamamos getProductDetails () de nossa página dinâmica e passamos o identificador do produto para ela, devemos obter os dados dos produtos de volta.
Tudo bem, vamos criar a página dinâmica que representará nossas páginas de produtos individuais. Na pasta de rotas, crie um novo arquivo routes/products/[handle].svelte e configure-o assim:
//src/routes/products/[handle].svelte
Neste ponto, você deve estar se perguntando por que temos duas tags
{product.description}
E agora, se clicarmos no botão Exibir item em a página de lista de produtos, devemos obter a página de detalhes do produto individual como esta:
! [página de detalhes do produto e demo] (https://res.cloudinary.com/kennyy/video/upload/v1628962503/product_detail_page_vnozfw.gif)
Parece que estamos quase terminando. Vamos seguir em frente e implantar este site!
Implantar no Netlify
Agora que temos uma página de lista de produtos e podemos ver nossas páginas de produtos individuais, podemos prosseguir e implantar isso site.
Para implantar um aplicativo SvelteKit, você precisa adaptá-lo ao destino de implantação de sua escolha. A documentação do SvelteKit fornece alguns adaptadores que você pode usar rapidamente para implantar seu aplicativo. Decidi implantar no Netlify usando o adaptador Netlify fornecido pelo SvelteKit.
A primeira coisa que precisamos fazer é instalar o adaptador Netlify em nosso projeto SvelteKit:
npm i-D @ sveltejs/adapter-netlify @ next
Em seguida, edite seu svelte.config arquivo.js e importe o adaptador Netlify que acabamos de instalar:
import adapter from’@ sveltejs/adapter-netlify’; exportar {kit: {adaptador: adaptador (), destino:’#svelte’}};
Temos o adaptador instalado e configurado em nosso projeto SvelteKit. A próxima coisa que queremos fazer é criar um arquivo netlify.toml e configurá-lo assim:
[build] command=”npm run build”publish=”build/”functions=”/functions/”# Svelte requer o nó v12 [build.environment] NODE_VERSION=”12.20″
O que estamos fazendo aqui é dizer ao Netlify que:
O comando para executar para construir este site é npm run build O diretório onde o site construído será disponível é/build O diretório para encontrar nossa função personalizada do Netlify é/functions (não estamos usando nenhuma função do Netlify neste projeto). Queremos que ele construa o site com o Node v12.20
Por fim, envie o projeto para o Github e vá para o painel do Netlify e implante seu site a partir do repositório GitHub de onde você o enviou. Se precisar de ajuda, aqui está um guia de um minuto sobre como implantar no Netlify a partir do GitHub para orientá-lo.. A demonstração também está hospedada no Netlify se você quiser explorar o site.
Recursos e próximas etapas
Portanto, concluímos a construção de um site de comércio eletrônico SvelteKit alimentado por um back-end do Shopify. No próximo tutorial, vamos conectá-lo a ainda mais recursos do Shopify à medida que adicionarmos funcionalidades de carrinho a este site. Até então.
