commercejs nextjs demo store
1.0.0
Uma loja de demonstração de comércio eletrônico de alta fidelidade, construído usando o Commerce.js SDK e Next.js com implantação ao vivo no Netlify.
Observação
Este ReadMe o guiará a estar em funcionamento com um modelo de comércio eletrônico totalmente de pleno direito. Configuramos esse modelo para você implantar diretamente para o Netlify. Como alternativa, você pode implantar manualmente para sua escolha de plataforma de hospedagem.
Para um tutorial detalhado sobre a construção deste aplicativo de comércio eletrônico Jamstack, siga aqui.
yarn global add @chec/cli Agora que você instalou o CHEC CLI globalmente, poderá acessar a lista de chec [COMMANDS] , um dos quais está se registrando para uma conta CHEC. Vamos em frente e configurar essa configuração!
# Open the Chec registration page in your browser
chec registerSiga o restante do Walk-through para configurar seus detalhes do seu comerciante. Como alternativa, você pode ir aqui para se registrar para uma conta CEC.
A implantação de um clique permite que você conecte o Netlify à sua conta do GitHub para clonar o repositório commercejs-nextjs-demo-store e implantá-lo automaticamente. Certifique -se de ir para o Netlify e se inscrever em uma conta antes de clicar no botão de implantação.
Ao clicar no botão acima, você será navegado na página de implantação direta do Netlify com o repositório do projeto passado como parâmetros no URL. Clique no botão Connectar ao GitHub , nomeie seu repositório e digite essa chave pública na entrada da chave pública do CHEC . Observe que, com o objetivo de colocá -lo em funcionamento com uma visualização de implantação ao vivo da loja de demonstrações, fornecemos a chave pública da nossa conta de Demo Merchant. Agora, salve e implante seu site.
Observe que a compilação inicial falhará se você entrar em sua chave pública, em vez da chave de comerciante de demonstração fornecida. A implantação de um clique destina-se a fins de apresentação para aumentar uma implantação rápida. O uso da sua conta do comerciante significaria que você precisaria ter os dados apropriados, como vários ativos e categorias associados aos seus produtos. Se você deseja usar sua conta de comerciante, siga as etapas de configuração manual abaixo.
A configuração manual envolve clonar o repositório em seu ambiente local, semear os dados de amostra fornecidos na sua conta CHEC e implantar para netlify.
Etapa 1. Clone o repositório e instale dependências
# Clone the repository locally, optionally rename the repo, change into the directory
git clone https://github.com/chec/commercejs-nextjs-demo-store.git chec-store
# Change into the directory and install dependencies
cd chec-store && yarnEtapa 2. Configure suas variáveis de ambiente
Substitua a amostra .env.example DOTENV na raiz do projeto para armazenar seu CHEC public_key , bem como o seu secret_key .
# Copy from source file to destination file .env
cp .env.example .env Você pode acessar sua tecla API na sua configuração de painel CHEC e navegar até a guia Desenvolvimento para copiar sua chave pública e chave secreta. Substitua o próximo NEXT_PUBLIC_CHEC_PUBLIC_KEY com o seu próprio e preencha seu CHEC_SECRET_KEY no arquivo .env . A chave secreta é necessária para que o script de sementes tenha a permissão adequada para semear os dados da amostra /seeds na sua conta CEC. Remova a chave secreta assim que os dados forem semeados.
# .env
# Fill in your public key and secret key
NEXT_PUBLIC_CHEC_PUBLIC_KEY =
CHEC_API_URL = https://api.chec.io
# Secret key is used with chec/seeder to access your Chec account to seed it with sample data
CHEC_SECRET_KEY =
NODE_ENV =Este arquivo deve não se comprometer com o controle de origem e também estará oculto nos navegadores de arquivo.
Etapa 3. Semele os dados necessários para alimentar sua loja CHEC e iniciar seu ambiente de desenvolvimento (necessário para a configuração inicial).
# Seed data in /seeds into your Chec account
yarn seed
# Run your development environment on http://localhost:3000
yarn devAgora vá para http: // localhost: 3000 Depois de iniciar seu desenvolvimento, seu site agora deve ser preenchido com os dados de amostra!
Se você estiver substituindo os produtos de amostra ou categorias, poderá personalizar suas próprias categorias imagens em `Public/Images/Collection. Veja mais informações sobre a personalização de dados abaixo.
Etapa 5. Faça as alterações necessárias e empurre o código para um repositório no GitHub ou sua escolha de plataforma.
Etapa 6. Implante seu site
Certifique -se de se inscrever em uma conta Netlify e fazer login nela. Clique no novo site no botão Git e forneça acesso para selecionar seu repositório. Suas configurações de construção são preenchidas automaticamente para o seu netlify.toml no modelo. Para inserir suas variáveis de ambiente, clique em Mostrar Advanced, em seguida, nova variável e preencha a entrada da chave como NEXT_PUBLIC_CHEC_PUBLIC_KEY e a entrada de valor com sua chave pública. Você pode acessar sua chave de API no seu painel CHEC em Configuração e depois navegar até a guia do desenvolvedor para copiar sua chave pública
Agora vá em frente e clique no "site de implantação" para ver seu site ao vivo!
Este comando baixará este exemplo de projeto do GitHub e o inicializará em sua máquina. Você estará livre para editar o código baixado e brincar com o Commerce.js depois.
Etapa 1. Instale a CLI CHEC
npm install -g @chec/cli
# or
yarn add -g @chec/cliEtapa 2. Crie uma loja de demonstração
chec demo-store
Quando solicitado a escolher uma loja de demonstração na lista, escolha "Commercejs-nextjs-demo-store". Este comando também semeará alguns dados de amostra na sua conta CEC. Para obter mais informações, consulte a documentação da CLI CHEC.
Como este projeto é uma loja totalmente completa, mostrando um design e fluxo de usuário personalizados, existem certas advertências que você encontrará se você personalizar seus dados no painel CHEC. Um Gotcha é com os dados das categorias na interface do usuário: as categorias são adicionadas na API CHEC como meta -dados. Se você adicionar novos ou editar os dados das categorias de amostra semeadas, poderá personalizar a imagem de características de categorias substituindo seus ativos de imagem em public/images/collection . Os nomes dos arquivos precisarão permanecer os mesmos. Se você planeja alterar os nomes dos arquivos ou adicionar novas categorias, precisará adicionar novos dados de meta. O aplicativo esperará a configuração de inventário abaixo para criar e renderizar os componentes; portanto, se você quiser personalizar com seu inventário no back -end, certifique -se de:
public/images/collection com suas próprias imagensEsta loja de demonstração usa uma variedade de recursos fornecidos pelo Commerce.js e alimentados pelo painel CHEC.
O carrinho de compras usa a API Commerce.js CART. Os carrinhos são persistidos por até 30 dias, e o Commerce.js se lembra automaticamente carrinhos para os visitantes.
O Commerce.js fornece muitas ferramentas para otimizar as implementações de check -out. A finalização da compra nesta loja de demonstração utiliza:
O Commerce.js fornece funcionalidade embutida para suportar logins de clientes sem qualquer código lateral do servidor. Esta loja de demonstração apresenta uma página de login do cliente existente e fornece detalhes sobre os pedidos anteriores. As informações do cliente também são usadas para pré-preencher o check-out com detalhes conhecidos do cliente.
Esta loja de demonstração está configurada com o "gateway de teste" CHEC, que oferece uma opção de pagamento útil ao testar sua loja. Além disso, o suporte a elementos de listras está incluído se o Stripe estiver configurado no painel CHEC.
Commerce.js <> Stripe Integration Documentation
Você deve ativar a faixa no painel CHEC seguindo as instruções fornecidas. Você pode adicionar suas teclas de sandbox para faixas e usar uma chave de API pública de Sandbox CHEC para testar com listras. Tanto a chave da API pública do CHEC quanto a tecla Stripe "Publishable" estão configuradas no arquivo .env . Veja a etapa dois de "Configuração manual e implantação da Netlify"
Fifra este projeto para personalizar e estender a demonstração como quiser. Aqui estão algumas idéias do que você pode fazer e das instruções que você pode tomar comércio eletrônico.
