next shopify starter
1.0.0
Demoção ao vivo • Veja mais iniciantes • Siga -me no Twitter
Esta é uma loja de comércio eletrônico totalmente funcional que usa o Next.js + Tailwind CSS no front -end e aproveita a API do Shopify Storefront para interagir com o back -end do Shopify. Você pode ver uma demonstração ao vivo aqui.
Usamos o GraphQL para consultar nossos dados do Shopify e armazenar as informações do CART no LocalSorage para persistir session. Finalmente - usamos a compra do Shopify para permitir que o usuário compre os itens. Você pode ver esse jogo na loja de exemplos. Sim - a loja é funcional e você pode comprar os adesivos. ?
| Desktop | Móvel |
 |  |
| Listagens | Carrinho |
 |  |
Por padrão, a loja está definida para consultar e mostrar todos os produtos em uma coleção. Você pode estender isso para consultar várias coleções ou toda a sua loja.
As consultas GraphQL são todas codificadas para extrair o número máximo de produtos/variantes/imagens que são definidas como 250 pelo Shopify. Eu fiz isso para simplificar as coisas. A paginação teria complicado as consultas e 250 itens são suficientes para a maioria dos casos de uso.
Se você precisar de paginação, precisará acompanhar o campo do cursor e continuar consultando os dados até buscar todos os itens.
Crie um arquivo .env.local no diretório raiz. Você precisa adicionar estas 4 variáveis:
NEXT_PUBLIC_SHOPIFY_STORE_FRONT_ACCESS_TOKEN=
NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN=
NEXT_PUBLIC_SHOPIFY_COLLECTION=
NEXT_PUBLIC_LOCAL_STORAGE_NAME=
A próxima_public_shopify_store_front_access_token e next_public_shopify_store_domain (será algo como domain_name.myshopify.com) são necessários para acessar a API Shopify Storefront (certifique -se de configurá -lo na loja Shopify. Veja Docs para obter mais informações.
Next_Public_Shopify_Collection é o nome da coleção que você deseja atrair e Next_public_local_storage_name é o nome da chave que seus usuários armazenarão suas informações de carrinho. O nome exato não é tão importante, embora eu sugira que você o torne único, por isso é menos provável que se chocasse com outros objetos armazenados. Algo como o YourStorenameShopifyStore, onde o seu nome de nome é o nome da sua loja do Shopify será suficiente.
Mude no diretório do projeto e execute o seguinte comando:
yarn && yarn dev
Você pode atualizar os metadados do seu site no arquivo next.config.js.
env: {
siteTitle: 'Your Company',
siteDescription: 'Your company description.',
siteKeywords: 'your company keywords',
siteUrl: 'https://doggystickers.xyz',
siteImagePreviewUrl: '/images/main.jpg',
twitterHandle: '@your_handle'
}
Você pode atualizar a paleta de cores no arquivo Tailwind.config.js.
colors: {
palette: {
lighter: '',
light: '',
primary: '',
dark: '',
},
},
Atualize o arquivo manifest.json e os ícones na pasta pública/imagens/ícones.
Você pode usar ferramentas gratuitas on -line, como https://realfavicongenerator.net/ para gerar rapidamente todos os tamanhos de ícones diferentes e o arquivo favicon.ico.
Você pode implantar isso usando qualquer número de serviços. Vercel e Netlify são os que eu prefiro e muito fácil de configurar e sincronizar com o seu repositório do GitHub.
A loja foi inspirada na incrível loja Gatsby Swag, além de inúmeros outros desenvolvedores muito mais capazes do que eu, que divulgam seu trabalho incrível de graça.
Eu tenho de origem aberta desse código sob a licença do MIT, na esperança de que, se isso ajudar as pessoas a navegar por lojas de comércio eletrônico Jamstack, como a loja Gatsby Swag fez por mim quando comecei.
Se você achou isso útil e deseja mostrar sua apreciação, pode me comprar um café?
Você também pode comprar alguns adesivos para cachorros da loja! ?
