yournextstore
1.0.0
Demo.yournExtStore.com?
Apoiamos oficialmente a versão atual do LTS - 20 no momento da redação. Os YNs devem trabalhar nas versões 18, 20 e 22. Se você estiver usando uma dessas versões e encontrar um problema, denuncie -o!
Siga as instruções para o seu sistema operacional encontrado aqui: nodejs.org/en/download
Apoiamos oficialmente a versão 9 do PNPM, mas faremos o possível para mantê -lo compatível com NPM e fios.
A maneira mais fácil de instalar o PNPM é via node.js Corepack. Dentro da pasta com YNs, execute estes comandos:
corepack enable
corepack installComo alternativa, siga as instruções para o seu sistema operacional encontrado aqui: pnpm.io/installation
O YNS é fortemente integrado ao Stripe, então você precisa de uma conta Stripe para usar sua próxima loja. Siga as instruções da Stripe para criar uma conta.
É importante lembrar que o Stripe funciona em dois modos diferentes: modo de teste e modo de produção . Para fins de desenvolvimento e teste local, você deve usar o modo de teste . Dessa forma, a Stripe nunca cobrará dinheiro real e você pode usar credenciais especiais de teste, como números de cartão de crédito e números de BLIK para concluir os pagamentos. Para obter informações mais detalhadas, consulte a documentação do Stripe em docs.stripe.com/testing.
Quando estiver pronto para vender seus produtos para clientes reais, você deve alternar o modo de teste para o modo de produção em Stripe e gerar novas credenciais.
Dica
Esta etapa exigirá verificação adicional da Stripe, por isso sugerimos que você inicie o processo imediatamente.
Para que os YNs funcionem, você precisará definir algumas variáveis ambientais. Para desenvolvimento e teste local, você pode criar um arquivo .env vazio e copiar o conteúdo de .env.example nele.
Para definir variáveis ENV na produção, você precisará consultar a documentação do provedor de hospedagem escolhido.
ENABLE_EXPERIMENTAL_COREPACK - apenas vercel: definido como 1 para ativar o CorepackNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY - chave publicável da Stripe.STRIPE_SECRET_KEY - chave secreta da Stripe.STRIPE_CURRENCY - Isso é usado para determinar a moeda da sua loja. Atualmente, apenas uma moeda é permitida e deve ser um código ISO de três letras (por exemplo, usd ).NEXT_PUBLIC_URL - Opcional no vercel O endereço da sua loja sem a barra de arremesso, ou seja, https://demo.yournextstore.com . Ao construir pela primeira vez, você deve configurá -lo para qualquer URL válido, ou seja, http://localhost:3000 .NEXT_PUBLIC_UMAMI_WEBSITE_ID - ID do site Umami para análiseNEXT_PUBLIC_NEWSLETTER_ENDPOINT - Visualizar : O terminal para o formulário de boletim informativo no futuro. Ele deve aceitar solicitações de postagem com um json { email: string } e retornar JSON { status: number } .STRIPE_WEBHOOK_SECRET - Visualizar : Stripe Webhook segredo para lidar com eventos da Stripe. Leia mais abaixo.ENABLE_STRIPE_TAX - visualização : defina como qualquer valor (ou seja, 1 ) para ativar o imposto de faixa no YNS. Leia mais abaixo.NEXT_PUBLIC_LANGUAGE - O local da loja (ou seja, en-US ) Depois de seguir as etapas acima, execute pnpm install para instalar as dependências necessárias e, em seguida, execute pnpm dev para iniciar o servidor de desenvolvimento em sua máquina. Sua próxima loja estará disponível no localHost: 3000
Sua próxima loja recebe todos os produtos, preços, descrições e categorias da Stripe. Então, se você já conhece o Stripe, você se sentirá em casa!
Você precisa adicionar produtos ao painel Stripe para mostrar no YNS. Após o login, clique em mais na barra lateral esquerda e selecione o catálogo de produtos . Você também pode usar o link direto:
Em seguida, clique em Adicionar produto e preencher todas as informações necessárias:
Além disso, sua próxima loja usa metadados do produto para fornecer mais informações de contexto sobre os produtos. Você pode especificar os seguintes metadados campos:
| Campo | Obrigatório | Descrição |
|---|---|---|
slug | Sim | A lesma do produto é usada para URLs. Precisa ser único, exceto para variantes. |
category | Não | A categoria de produto usada para agrupar produtos. |
order | Não | A ordem do produto usada para classificar produtos. Números mais baixos são exibidos primeiro. |
variant | Não | A variante do produto Slug. Leia abaixo para obter detalhes. |
Agora você deve ver todos os produtos adicionados em sua próxima loja.
Sua próxima loja suporta variantes de produto simples. Para criar um produto com variantes, você deve adicionar vários produtos para faixas com o mesmo campo de metadados slug . O YNS usa o campo de metadados variant para distinguir entre diferentes variantes do mesmo produto. Por exemplo, se você tiver uma camiseta em vários tamanhos, poderá criar três produtos com a slug de t-shirt e valores variant de small , medium e large .
As variantes são exibidas na página do produto. As variantes podem ter preços, descrições e imagens diferentes. É importante observar que a category deve ser a mesma para todas as variantes do mesmo produto para a melhor experiência de navegação.
Observação
No futuro, planejamos adicionar a possibilidade de editar produtos e variantes dentro de um painel administrativo embutido. Se você tiver alguma idéia ou sugestão, informe -nos!
Sua próxima loja usa o Stripe Webhooks para lidar com eventos da Stripe. Atualmente, o terminal é usado para revalidar automaticamente a página do carrinho e criar transação tributária (se ativada). Para configurar os webhooks, siga os documentos da Stripe. As etapas exatas dependem se você ativou o Stripe Workbench em sua conta Stripe: docs.stripe.com/webhooks#add-a-webhook-ndpoint.
O terminal para o webhook é https://{YOUR_DOMAIN}/api/stripe-webhook . O único evento necessário é payment_intent.succeeded . Quando o webhook estiver configurado em Stripe, defina a variável de ambiente STRIPE_WEBHOOK_SECRET para a chave secreta criada por Stripe.
Observação
No futuro, planejamos adicionar mais eventos ao webhook para melhorar a experiência do usuário.
Sua próxima loja vem com uma prévia do suporte tributário de listras. Para ativá -lo, defina a variável de ambiente ENABLE_STRIPE_TAX como qualquer valor (isto é, 1 ).
Para que esse recurso funcione, você deve definir suas configurações de impostos no painel de stripe: Dashboard.stripe.com/register/tax. Quando ativado e configurado, os impostos serão calculados automaticamente e adicionados ao preço total do produto com base em:
Aviso
Esse recurso ainda está no estágio inicial e pode haver casos de borda que não são suportados. Estamos trabalhando ativamente, por isso, se você encontrar algum problema ou tiver alguma sugestão, informe -nos!
Para implantar no Vercel, clique no botão a seguir, configure o repositório do GitHub e as variáveis de ambiente e clique em Implantar . Certifique -se de definir a variável ENABLE_EXPERIMENTAL_COREPACK como 1 .
Descrição em breve.
Para implantar no Docker, siga estas etapas:
pnpm run docker:build .pnpm run docker:run . Os YNs evoluem todos os dias e buscamos ativamente feedback sobre o que melhorar. Se você tiver alguma dúvida ou problemas, não hesite em entrar em contato conosco em nosso servidor Discord.
structuredClone para passar dados dos componentes do servidor para o cliente. Por que? Somente certos tipos de dados podem ser passados diretamente do servidor para o cliente. Os dados do Stripe SDK geralmente contêm instâncias de classe. Para contornar isso, usamos structuredClone para eliminá -los e passar apenas objetos antigos para o cliente.
