nextjs woocommerce restapi

? API REST EXT.JS WooCommerce

• Reaja o tema WooCommerce, usando a arquitetura desacoplada em Next.js
• Back -end no WordPress
• Front end em react.
• Os dados são buscados através da API REST.

Características

• Página inicial
• Página de produto único com carrossel da galeria.
• Página do carrinho
• Página de compra com integração de gateway de pagamento de listras.
• Pontos de extremidade da API REST.
• Cabeçalho e rodapé no próximo.js buscando itens de menu WordPress.
• WordPress Widgets exibidos no Frontend Next.js.
• Título do site, slogan, texto de direitos autorais, links sociais provenientes do WordPress.
• Yoast SEO Suporte
• Componente da imagem do próximo.js, que tem otimização de imagem no horário da solicitação
• Geração estática incremental (Re) e criação automática de novas páginas estáticas de produtos sem precisar reconstruir o próximo.JS o aplicativo.
• Suporte de estilos Gutenberg
• Página do blog com paginação
• Postagem única
• Páginas
• 404 Página
• Exibir comentários
• Publique um comentário (usando um formulário de comentário)
• Postagem de pré -visualização (em breve)
• Paginação do produto (em breve)
• Carregue mais produtos (em breve)
• Autenticação com implementação apenas de cookies JWT e HTTP. ( Em breve )
• Recurso de login para visualização do WP Post em Next.js (em breve)

Curso de tutorial

Link de demonstração ao vivo

Configurar

Primeiro clone/fork o repo e o CD nele.

git clone https://github.com/imranhsayed/nextjs-woocommerce-restapi.git
cd nextjs-woocommerce-restapi
npm ci
npm run dev

Adicione recursos sem cabeça para o WordPress

• Instale e ative os seguintes plugins do WordPress:

• CMS sem cabeça
• WooCommerce

Configuração?

1. (NECESSÁRIO) Crie um arquivo .env pegando referência a partir de .env-example e atualize seu URL do WordPressSite e URL do Frontend Next.js.

• NEXT_PUBLIC_WORDPRESS_URL=https://example.com
• NEXT_PUBLIC_SITE_URL=http://localhost.com (este será o seu front -end Next.js url)

2. Adicione seu WC_CONSUMER_KEY e WC_CONSUMER_SECRET ao .env seguindo WooCommerce> Configurações> API Avançado> REST

3. No seu painel WordPress, vá para Configurações> Geral> Endereço do Site (URL) (defina -o como URL do front -end, por exemplo, http: // localhost: 3000 durante o desenvolvimento)

4. Crie os menus do cabeçalho e do rodapé no painel do WordPress e defina -os no menu do cabeçalho HCMS e no menu de rodapé do HCMS, respectivamente.

Links úteis

• Listra
• Obtendo chaves da API de faixa

Versão?

Eu uso o git para versões.

Autor?

• Imran Sayed

Licença?

Este projeto está licenciado sob a licença do MIT - consulte o arquivo License.md para obter detalhes