Cabeza arriba: este tutorial cubre una versión anterior de WooGraphQL y ya no está al día. Una versión reescrita está en progreso — nos vincularemos a ella desde aquí una vez que sea publicada.
Cuadro de contenidos
- Configuración de WordPress para su aplicación de eCommerce sin cabeza
- Crear y configurar su aplicación eCommerce para el desarrollo
- Páginas de listado de edificios con WooGraphQL
- Creación de sesión de usuario y navegación
- Creación de la página del producto y Opciones del carro
Bienvenido a la primera parte de nuestra serie tutorial sobre la creación de una aplicación de eCommerce sin cabeza! Esta serie está destinada a desarrolladores interesados en elaborar una aplicación eCommerce robusta respaldada por un WooCommerce tienda utilizando WPGraphQL y WPGraphQL WooCommerce (WooGraphQL). Este capítulo te guiará a través del proceso de configurar tu instalación de WordPress en preparación para este esfuerzo.
Configuración de WordPress para su aplicación de eCommerce sin cabeza
Antes de bucear, hay algunas suposiciones en orden. Vamos a suponer que usted estará siguiendo junto con nuestra guía y girando su entorno de WordPress exactamente como estamos usando las configuraciones de Docker que se encuentran en el /backend directorio del demo repository de GitHub. Si ya tiene una instalación local de WordPress preparada con las dependencias y plugins necesarios, no dude en saltar a la sección titulada Configurar WooGraphQL.
Lo que haremos
- Clone el
wp-graphql-demorepo - Startup Docker Network
- Instalar + activar WooCommerce
- Generando productos.
- Generar página de carrito, checkout y páginas de cuenta.
- Instalar + activar WPGraphQL
- Instalar + activar WPGraphQL WooCommerce
Prerequisitos para el medio ambiente WP incluidos en el repositorio demo
- PHP
- Compositor
- Docker + Docker-Compose
Instalar Dependencias y Inicio Docker
Para comenzar, abrir un terminal a un directorio de su elección, y clonar el repositorio y navegar al /backend directorio
git clone https://github.com/kidunot89/woographql-demo.git && cd woographql-demo/backendDespués de tirar del repositorio deberíamos estar en el /backend directorio. Para este tutorial, no usaremos /frontend directorio para que pueda ser ignorado. Ahora desde el terminal en el /backend directorio, ejecute el siguiente comando:
composer installDespués de instalar las dependencias, utilice Docker Compose para crear y comenzar la red Docker ejecutando:
docker-compose upUna vez que Docker ha comenzado con éxito, puede completar su instalación de WordPress navegando a http://localhost:8080/wp/wp-admin.
Siga las instrucciones proporcionadas para finalizar su instalación y inicie sesión en su nuevo sitio WordPress.
Activar Plugins y Configuración Store
Ahora que nuestro sitio de WordPress está funcionando, vamos a activar los plugins necesarios y configurar nuestra tienda. Desde tu panel de WordPress, navega a la página Plugins y activa los siguientes: WooCommerce, WPGraphQL, y WPGraphQL WooCommerce.
Si esta es una instalación fresca, WooCommerce debería autogenerar a Cart, Shop, y Checkout página en activación.
Con tus plugins activados, es hora de generar algunos productos para tu tienda. Para ello, abra una nueva ventana terminal (que asegure que su red Docker siga funcionando en otra ventana terminal) y vaya a la red /backend directorio de la demo. Desde aquí, ejecute el siguiente comando:
composer generate-products 100Este comando autogenerará 100 productos para su tienda. Si bien la calidad de estos productos no es de primer nivel, son perfectos para probar y desarrollar tu escaparate.
Configurar WooGraphQL
Nuestro paso final en la configuración de WordPress para nuestra aplicación de eCommerce sin cabeza es configurar WooGraphQL. Navega al panel de WordPress y ve a Configuración GraphQL. Desde aquí, seleccione WooGraphQL tab.
Dentro del WooGraphQL configuración, buscar la Enable User Session transferring URLs fijar y comprobar el Cart URL, Checkout URL, y Account URL opciones.
La habilitación de esta opción le dice a WooGraphQL que registre la URL de la caída de sesión que comprobamos al esquema GraphQL, y gira en el punto final de la sesión. Por defecto este punto final está en https://our-site/transfer-session
No te olvides de hacer clic en el botón `Guardar cambios` para finalizar tu configuración!
¡Y ahí lo tienes! Su instalación de WordPress ahora está lista para el desarrollo de su aplicación de eCommerce sin cabeza. En la próxima entrega de esta serie tutorial, nos sumergimos en configurar nuestro front-end con Reacción y Siguiente.js¡Feliz codificación!
Leave a Reply