Heads up: Dieses Tutorial deckt eine frühere WooGraphQL-Version ab und ist nicht mehr auf dem neuesten Stand. Eine neu geschriebene Version ist in Arbeit – wir werden von hier aus darauf verlinken, sobald sie veröffentlicht wurde.
Inhaltsverzeichnis
- Einrichten von WordPress für Ihre Headless eCommerce-Anwendung
- Erstellen und Einrichten Ihrer eCommerce-App für die Entwicklung
- Erstellen von Shop Listing Pages mit WooGraphQL
- Erstellen von Benutzer-Login und Navigation
- Erstellen der Produktseite und Warenkorboptionen
Willkommen zum ersten Teil unserer Tutorial-Serie zum Erstellen einer Headless-E-Commerce-Anwendung! Diese Serie richtet sich an Entwickler, die daran interessiert sind, eine robuste E-Commerce-Anwendung zu erstellen, die von einem WooCommerce Speicher mit WPGraphQL und WPGraphQL WooCommerce (WooGraphQL)Dieses Kapitel führt Sie durch den Prozess der Einrichtung Ihrer WordPress-Installation in Vorbereitung auf dieses Unterfangen.
Einrichten von WordPress für Ihre Headless eCommerce-Anwendung
Bevor wir eintauchen, sind einige Annahmen in Ordnung. Wir gehen davon aus, dass Sie unserem Leitfaden folgen und Ihre WordPress-Umgebung genau so gestalten, wie wir es sind, indem Sie die Docker-Konfigurationen in der /backend Verzeichnis der Demo-Repository von GitHub. Wenn Sie bereits eine lokale WordPress-Installation mit den notwendigen Abhängigkeiten und Plugins vorbereitet haben, können Sie den Abschnitt mit dem Titel überspringen Konfiguration von WooGraphQL.
Was wir tun werden
- Klonierung
wp-graphql-demoRepo - Startup Docker Network
- Installieren + Aktivieren WooCommerce
- Erzeugung von Produkten.
- Generieren von Warenkorbseite, Checkout und Kontoseiten.
- Installieren + Aktivieren WPGraphQL
- Installieren + Aktivieren WPGraphQL WooCommerce
Voraussetzungen für WP Environment im Demo-Repository enthalten
- PHP
- Komponist
- Docker + Docker-Zusammensetzung
Installieren Sie Abhängigkeiten und starten Sie Docker
Öffnen Sie zu Beginn ein Terminal in einem Verzeichnis Ihrer Wahl, klonen Sie das Repository und navigieren Sie zum /backend Verzeichnis
git clone https://github.com/kidunot89/woographql-demo.git && cd woographql-demo/backendNach dem Ziehen des Repositorys sollten wir in der /backend Verzeichnis. Für dieses Tutorial werden wir nicht verwenden /frontend Verzeichnis, damit es ignoriert werden kann. Jetzt vom Terminal im /backend Verzeichnis, führen Sie den folgenden Befehl aus:
composer installNachdem die Abhängigkeiten installiert wurden, verwenden Sie Docker Compose, um das Docker-Netzwerk zu erstellen und zu starten, indem Sie Folgendes ausführen:
docker-compose upSobald Docker erfolgreich gestartet ist, können Sie Ihre WordPress-Installation abschließen, indem Sie zu http://localhost:8080/wp/wp-admin.
Befolgen Sie die Anweisungen, um Ihre Installation abzuschließen und sich bei Ihrer neuen WordPress-Website anzumelden.
Plugins und Setup Store aktivieren
Jetzt, da unsere WordPress-Website in Betrieb ist, aktivieren wir die notwendigen Plugins und richten unseren Shop ein. Navigieren Sie von Ihrem WordPress Dashboard zur Plugins-Seite und aktivieren Sie Folgendes: WooCommerce, WPGraphQL, und WPGraphQL WooCommerce.
Wenn es sich um eine neue Installation handelt, sollte WooCommerce automatisch eine Cart, Shop, und Checkout Seite bei Aktivierung.
Wenn Ihre Plugins aktiviert sind, ist es an der Zeit, einige Produkte für Ihren Shop zu generieren. Öffnen Sie dazu ein neues Terminalfenster (sicherstellen, dass Ihr Docker-Netzwerk noch in einem anderen Terminalfenster läuft) und navigieren Sie zum /backend Verzeichnis der Demo. Führen Sie von hier aus den folgenden Befehl aus:
composer generate-products 100Mit diesem Befehl werden 100 Produkte für Ihren Shop automatisch generiert. Obwohl die Qualität dieser Produkte nicht auf der obersten Ebene liegt, sind sie perfekt zum Testen und Entwickeln Ihrer Storefront.
Konfiguration von WooGraphQL
Unser letzter Schritt beim Einrichten von WordPress für unsere Headless-E-Commerce-Anwendung ist die Konfiguration von WooGraphQL. Navigieren Sie zum WordPress Dashboard und gehen Sie zu GraphQL > Einstellungen. Von hier aus wählen Sie die WooGraphQL Tab.
Innerhalb des WooGraphQL Einstellungen, suchen Sie nach dem Enable User Session transferring URLs Einstellung und Kontrolle der Cart URL, Checkout URL, und Account URL Optionen.
Wenn Sie diese Option aktivieren, wird WooGraphQL aufgefordert, die Session Drop URL zu registrieren, die wir im GraphQL-Schema überprüft haben, und der Session Drop Endpunkt wird aktiviert. Standardmäßig ist dieser Endpunkt am https://our-site/transfer-session
Vergessen Sie nicht, auf die Schaltfläche “Änderungen speichern” zu klicken, um Ihre Einstellungen abzuschließen!
Und da hast du es! Ihre WordPress-Installation ist jetzt bereit für die Entwicklung Ihrer Headless-E-Commerce-Anwendung. In der nächsten Folge dieser Tutorial-Serie werden wir in die Einrichtung unseres Frontends mit Reaktion und Next.jsHappy Coding!
Leave a Reply