nextjs shopify
1.0.0
Demo Live At: Headless.Builders
Aprenda a começar com este Builder + Next.js + Shopify Exemplo com este guia de vídeo passo a passo aqui:
Pré-requisitos
Este guia assumirá que você tem o seguinte software instalado:
Você já deve ter uma conta do Shopify e a loja criada antes de começar também.
Introdução
Depois de seguir este guia, você terá
Antes de começarmos, vá até o construtor.io e crie uma conta.
Vá para a página Configurações da sua organização e crie uma chave privada, copie a chave para a próxima etapa.
Em seguida, criaremos uma cópia do projeto inicial e criaremos um novo espaço para o conteúdo de viver.
No exemplo abaixo, substitua <private-key> pela chave que você copiou na etapa anterior e altere <space-name> para algo que seja significativo para você-não se preocupe, você pode alterá-lo mais tarde!
git clone https://github.com/BuilderIO/nextjs-shopify.git
cd nextjs-shopify
unzip builder
npm install --global "@builder.io/cli"
builder create --key "<private-key>" --name "<space-name>" --debug
Nota: Se você estiver interessado apenas em usar este iniciante para uma página de destino com o Shopify, use este comando:
unzip builder-landing-page-only
builder create --key "<private-key>" --name "<space-name>" --input builder-landing-page-only --debug
Se esse foi um sucesso, você deve ser recebido com uma mensagem que inclui uma chave de API pública para o seu espaço recém -formado.
NOTA: Este comando também publicará algum conteúdo do Starter Builder.io CMS do diretório ./builder para o seu novo espaço quando for criado.
____ _ _ _ _ _ _
| __ ) _ _ (_) | | __ | | ___ _ __ (_) ___ ___ | | (_)
| _ | | | | | | | | / _ ` | / _ | ' __| | | / _ / __| | | | |
| |_) | | |_| | | | | | | (_| | | __/ | | _ | | | (_) | | (__ | | | |
|____/ __,_| |_| |_| __,_| ___| |_| (_) |_| ___/ ___| |_| |_|
|████████████████████████████████████████| shopify-product | 0/0
|████████████████████████████████████████| product-page: writing generic-template.json | 1/1
|████████████████████████████████████████| shopify-collection | 0/0
|████████████████████████████████████████| collection-page: writing generic-collection.json | 1/1
|████████████████████████████████████████| page: writing homepage.json | 2/2
Your new space "next.js shopify starter" public API Key: 012345abcdef0123456789abcdef0123Copie a chave da API pública ("012345ABCDEF0123456789ABCDEF0123" no exemplo acima) para a próxima etapa.
Este projeto inicial usa arquivos dotenv para configurar variáveis de ambiente. Abra os arquivos .env.Development e .env.production em seu editor de texto favorito e defina o valor do BUILDER_PUBLIC_KEY para a chave pública que você acabou de copiar. Você pode ignorar as outras variáveis por enquanto, definiremos -as mais tarde.
+ BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
- BUILDER_PUBLIC_KEY=
SHOPIFY_STOREFRONT_API_TOKEN=
SHOPIFY_STORE_DOMAIN=Crie um aplicativo personalizado para sua loja Shopify. Se você ainda não possui uma loja do Shopify, pode criar uma loja de desenvolvimento.
Ao criar o aplicativo privado, você precisará definir uma série de permissões para que o construtor possa recuperar seu inventário do Shopify. Para esta Storefront API Press on Storefront na guia Configuração e escolha todas as seguintes permissões:
Em seguida, na guia API Credentials , clique em install :
E copie o token de acesso gerado.
Acesse seu espaço recém -criado selecionando -o na lista de espaços em sua organização.
Você deve ser recebido por um modal solicitando vários acesso à sua loja (na etapa de visualização) e o domínio da sua loja, isso permitirá que o construtor.io se comunique com sua API da sua loja:
Preencha as teclas necessárias e pressione "Connect Your Shopify Custom App"!
Abra .env.Development e .env.production novamente, mas desta vez definiu as outras duas teclas do Shopify.
BUILDER_PUBLIC_KEY=012345abcdef0123456789abcdef0123
+ SHOPIFY_STOREFRONT_API_TOKEN=c11b4053408085753bd76a45806f80dd
- SHOPIFY_STOREFRONT_API_TOKEN=
+ SHOPIFY_STORE_DOMAIN=dylanbuilder.myshopify.com
- SHOPIFY_STORE_DOMAIN=A parte difícil acabou, tudo o que você precisa fazer é iniciar o projeto agora.
npm install
npm run dev Isso iniciará um servidor em http://localhost:3000 .
Agora que temos tudo configurado, comece a criar e publicar páginas no construtor.io, para uma demonstração sobre a construção de algo semelhante à página inicial da demonstração, siga as etapas deste pequeno vídeo
Você pode implantar esse código em qualquer lugar que quiser - você pode encontrar muitas opções de implantação para o próximo.js aqui. As opções a seguir suportam instalações de um clique e são super fáceis de começar com:
