nextjs woocommerce restapi

? Next.js WooCommerce REST API

• Tema React WooCommerce, utilizando arquitectura desacoplada en Next.js
• Backend en WordPress
• Delantero en reaccionar.
• Los datos se obtienen a través de REST API.

Características

• Página de inicio
• Página de productos individuales con carrusel de la galería.
• Página de carro
• Página de pago con integración de la pasarela de pago de stripe.
• CUENTES DE LA API REST.
• Encabezado y pie de página en Next.js obteniendo los elementos del menú de WordPress.
• WordPress Widgets que se muestran en el frontend next.js.
• Título del sitio, lema, texto de derechos de autor, enlaces sociales procedentes de WordPress.
• Yoast SEO Support
• Componente de imagen Next.js, que tiene optimización de imágenes en el momento de la solicitud
• Generación estática incremental (re) y creación automática de nuevas páginas de productos estáticos sin tener que reconstruir Next.js la aplicación.
• Gutenberg Styles Support
• Página de blog con paginación
• Poste
• Páginas
• 404 página
• Mostrar comentarios
• Publique un comentario (usando un formulario de comentarios)
• Vista previa de la publicación (próximamente)
• Paginación de productos (próximamente)
• Cargue más productos (próximamente)
• Autenticación con JWT y HTTP solo implementación de cookies. ( Muy pronto )
• Función de inicio de sesión para WP Post Preview en Next.js (próximamente)

Curso tutorial

Enlace de demostración en vivo

Configuración

Primer clon/bifurcarse el repositorio y el CD en él.

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

Agregar características sin cabeza para WordPress

• Instale y active los siguientes complementos de WordPress:

• CMS sin cabeza
• WooCommerce

Configuración?

1. (Requerido) Cree un archivo .env que tome referencia desde .env-example y actualice su URL de WordPressSite y Frontend Next.js URL.

• NEXT_PUBLIC_WORDPRESS_URL=https://example.com
• NEXT_PUBLIC_SITE_URL=http://localhost.com (esta será su url frontend next.js)

2. Agregue su WC_CONSUMER_KEY y WC_CONSUMER_SECRET al .env siguiendo WooCommerce> Configuración> Avanzado> REST API

3. En su tablero de WordPress, vaya a Configuración> General> Dirección del sitio (URL) (configure esto en Frontend URL, por ejemplo, http: // localhost: 3000 durante el desarrollo)

4. Cree los menús de encabezado y pie de página en el tablero de WordPress y configúrelos en el menú de encabezado HCMS y el menú HCMS, respectivamente.

Enlaces útiles

• Raya
• Obtener teclas API de Stripe

Versión?

Yo uso Git para versiones.

Autor ?

• Imran Sayed

Licencia?

Este proyecto tiene licencia bajo la licencia MIT: consulte el archivo de licencia.md para más detalles