Historia de la estrella
Sitio de comercio electrónico Next.JS con WooCommerce Backend
URL en vivo: https://nextwooCommerce.dfweb.no
Tabla de contenido (TOC)
- Instalación
- Características
- Asuntos
- Solución de problemas
- HACER
Instalación
- Instale y active los siguientes complementos requeridos, en su directorio de complementos de WordPress:
- WooCommerce Ecommerce para WordPress.
- WP-Graphql expone GraphQL para WordPress.
- WP-Graphql-WooCommerce agrega la funcionalidad de WooCommerce a un esquema WPGraphql.
- El complemento WP-Algolia-Woo-Indexer WordPress codificado por mí. Envía productos de WooCommerce a Algolia. Requerido para la búsqueda para trabajar.
Complemento opcional:
- Wayless-WordPress deshabilita el frontend, por lo que solo se puede acceder al backend. (opcional)
La versión actual se ha probado y se confirma trabajando con las siguientes versiones:
- WordPress versión 6.6.2
- WooCommerce versión 7.4.0
- WP GraphQL versión 1.13.8
- Woographql versión 0.12.0
- WPGRAPHQL CORS Versión 2.1
Para la depuración y las pruebas, instale:
https://addons.mozilla.org/en-us/firefox/addon/apollo-developer-tools/ (Firefox)
https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkbebbapilgoecciglkfbmbnfm (Chrome)
Asegúrese de que WooCommerce ya tenga algunos productos
Clonar o bifurcar el repositorio y modificar .env.example y cambiarlo a .env
Luego establezca las variables de entorno en consecuencia en Vercel o su solución de alojamiento preferido.
Ver https://vercel.com/docs/environment-variables
Modifique los valores de acuerdo con su configuración
Inicie el servidor con npm run dev
Habilitar el método de pago de COD (efectivo a pedido) en WooCommerce
Agregue un producto al carrito
Proceda a pagar (Gå Til Kasse)
Complete sus datos y realice el pedido
Características
- Next.js versión 14.3.11
- React versión 18.3.1
- Mecanografiado
- Pruebas con dramaturgo
- Conéctese a la API y el nombre de la lista de GraphQL de WooCommerce, el precio y la imagen de visualización para productos
- Soporte para productos simples y productos variables
- Manejo y pago del carrito con WooCommerce (efectivo en la entrega solo por ahora)
- Búsqueda de algolia (requiere Algolia-Woo-Indexer)
- Cumple con los estándares de accesibilidad de WCAG cuando sea posible
- Marcador de posición para productos sin imágenes
- Cliente Apollo con GraphQL
- Forma de gancho reaccionar
- Validación de formulario HTML5 nativo
- Animaciones con Framer Motion, Componentes de estilo y Animate.css
- Cargando spinner creado con componentes de estilo
- Muestra el progreso de la carga de la página con NProgress durante la navegación
- Diseño totalmente receptivo
- Listados de categoría y productos
- Mostrar estado de stock
- Bonitas urls con funcionalidad de nextjs integrada
- Vie a la cola 3 para el estilo
- Comentarios de JSDOC
Solución de problemas
Recibo un error de carro indefinido u otros errores de GraphQL
Verifique que esté utilizando la versión 0.12.0 del complemento WP-Graphql-WooCommerce
La página de productos no se carga
Verifique los atributos de los productos. En este momento, la aplicación requiere tamaño y color.
Asuntos
En general, la aplicación funciona según lo previsto, pero no se ha probado ampliamente en un entorno de producción. Se requieren más pruebas y depuración antes de implementarlo en un entorno de producción.
Dicho esto, tenga en cuenta lo siguiente:
- Actualmente, solo los productos simples y los productos variables funcionan sin ningún problema. No se sabe que otros tipos de productos funcionen.
- Actualmente se admite el efectivo en la entrega (COD). Se pueden agregar más métodos de pago más adelante.
Este proyecto se prueba con Browserstack.
HACER
- Agregar total a la página de carrito/pago
- Copiar dirección de facturación a la dirección de envío
- Agregue el tablero de pedidos y requiera inicio de sesión
- Ocultar productos que no están en stock
- Agregar mejor SEO
- Vuelva a agregar su siguiente/imagen cuando funcione mejor
