História da estrela
Site de comércio eletrônico Next.JS com back -end de WooCommerce
URL ao vivo: https://next-wooCommerce.dfweb.no
Índice (TOC)
- Instalação
- Características
- Problemas
- Solução de problemas
- PENDÊNCIA
Instalação
- Instale e ative os seguintes plugins necessários, no seu diretório de plug -in do WordPress:
- WooCommerceCommerce para WordPress.
- WP-GRAPHQL expõe o GraphQL para WordPress.
- O WP-GRAPHQL-WOOCMERCE acrescenta funcionalidade de WooCommerce a um esquema WPGRAPHQL.
- WP-Algolia-Woo-Indexer WordPress Plugin codificado por mim. Envia produtos WooCommerce para a Algolia. Necessário para a pesquisa funcionar.
Plugin opcional:
- Palavras sem cabeça desativa o front-end para que apenas o back-end seja acessível. (opcional)
O lançamento atual foi testado e é confirmado trabalhando com as seguintes versões:
- WordPress versão 6.6.2
- WooCommerce versão 7.4.0
- WP GraphQL Versão 1.13.8
- Woographql versão 0.12.0
- WPGRAPHQL CORS versão 2.1
Para depuração e teste, instale:
https://addons.mozilla.org/en-us/firefox/addon/apollo-developer-tools/ (Firefox)
https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkkkkkbebbapilgoeccciglkfbmbnfm (Chrome)
Verifique se o WooCommerce já tem alguns produtos
Clone ou bifurque o repo e modifique .env.example e renomeie -o para .env
Em seguida, defina as variáveis de ambiente de acordo em Vercel ou sua solução de hospedagem preferida.
Veja https://vercel.com/docs/environment-variables
Modifique os valores de acordo com sua configuração
Inicie o servidor com npm run dev
Ativar método de pagamento de bacalhau (em dinheiro sob demanda) no WooCommerce
Adicione um produto ao carrinho
Prossiga para o checkout (Gå Til Kasse)
Preencha seus detalhes e faça o pedido
Características
- Next.js versão 14.3.11
- React versão 18.3.1
- TypeScript
- Testes com dramaturgo
- Conecte -se à API WooCommerce GraphQL e da lista de nome, preço e imagem de exibição para produtos
- Suporte para produtos simples e produtos variáveis
- Manuseio e check -out de carrinho com WooCommerce (dinheiro na entrega apenas por enquanto)
- Pesquisa de Algolia (requer Algolia-Woo-Indexer)
- Atenda aos padrões de acessibilidade do WCAG sempre que possível
- Espaço reservado para produtos sem imagens
- Cliente apollo com grafql
- React fort fort
- Validação de formulário HTML5 nativo
- Animações com movimento de Framer, componentes de estilo e Animate.css
- Carregando Spinner criado com componentes estilizados
- Mostra a página da página Progresso com o NProgress durante a navegação
- Design totalmente responsivo
- Categoria e listagens de produtos
- Mostrar status de estoque
- URLs bonitos com funcionalidade NextJS incorporada
- Tailwind 3 para estilo
- Comentários do JSDOC
Solução de problemas
Estou recebendo um erro indefinido ou outros erros de grafql
Verifique se você está usando a versão 0.12.0 do plugin WP-GRAPHQL-WOOCOMmerce
A página de produtos não está carregando
Verifique os atributos dos produtos. No momento, o aplicativo requer tamanho e cor.
Problemas
No geral, o aplicativo está funcionando como pretendido, mas não foi testado extensivamente em um ambiente de produção. Mais testes e depuração são necessários antes de implantá -lo em um ambiente de produção.
Com isso dito, lembre -se do seguinte:
- Atualmente, apenas produtos simples e produtos variáveis funcionam sem problemas. Outros tipos de produtos não são conhecidos por funcionar.
- Atualmente, o dinheiro da entrega (COD) é suportado. Mais métodos de pagamento podem ser adicionados posteriormente.
Este projeto é testado com o Browserstack.
PENDÊNCIA
- Adicionar total à página de carrinho/checkout
- Copiar endereço de cobrança para endereço de entrega
- Adicione o painel do pedido e requer login
- Ocultar produtos não em estoque
- Adicione melhor SEO
- Re-adiante a próxima/imagem quando estiver funcionando melhor
