En haut : ce tutoriel couvre une version WooGraphQL antérieure et n’est plus à jour. Une version réécrite est en cours — nous y lierons une fois qu’elle sera publiée.
Sommaire
- Configuration WordPress pour votre application eCommerce sans tête
- Création et mise en place de votre application eCommerce pour le développement
- Pages d’annonce de boutique de construction avec WooGraphQL
- Création de connexion utilisateur et navigation
- Création de la page Produit et des options de panier
Bienvenue dans la première partie de notre série de tutoriels sur la création d’une application eCommerce sans tête! Cette série est destinée aux développeurs intéressés à concevoir une application eCommerce robuste soutenue par un WooCommerce stockage utilisant WPGraphQL et WPGraphQL WooCommerce (WooGraphQL). Ce chapitre vous guidera dans le processus de mise en place de votre installation WordPress en préparation de cette entreprise.
Configuration WordPress pour votre application eCommerce sans tête
Avant de plonger, quelques hypothèses sont en ordre. Nous allons présumer que vous suivrez avec notre guide et tourner vers votre environnement WordPress exactement comme nous sommes en utilisant les configurations Docker trouvés dans le /backend répertoire du dépôt de démonstration de GitHub. Si vous avez déjà une installation WordPress locale préparée avec les dépendances et les plugins nécessaires, n’hésitez pas à passer devant la section intitulée Configurer WooGraphQL.
Ce que nous ferons
- Clone la
wp-graphql-demorepo - Réseau Startup Docker
- Installer + activer WooCommerce
- Production de produits.
- Générer des pages de panier, de caisse et de compte.
- Installer + activer WPGraphQL
- Installer + activer WPGraphQL WooCommerce
Prérequis pour WP Environnement inclus dans le dépôt de démonstration
- PHP
- Compositeur
- Composez Docker + Docker
Installer les dépendances et démarrer Docker
Pour commencer, ouvrez un terminal à un répertoire de votre choix, clonez le dépôt et naviguez jusqu’au /backend répertoire
git clone https://github.com/kidunot89/woographql-demo.git && cd woographql-demo/backendAprès avoir tiré le dépôt, nous devrions être dans le /backend répertoire. Pour ce tutoriel, nous n’utiliserons pas /frontend répertoire afin qu’il puisse être ignoré. Maintenant du terminal dans le /backend répertoire, exécutez la commande suivante :
composer installAprès l’installation des dépendances, utilisez Docker Compose pour créer et démarrer le réseau Docker en exécutant :
docker-compose upUne fois que Docker a commencé avec succès, vous pouvez compléter votre installation WordPress en naviguant à http://localhost:8080/wp/wp-admin.
Suivez les instructions fournies pour finaliser votre installation et connectez-vous à votre nouveau site WordPress.
Activer les plugins et le magasin de configuration
Maintenant que notre site WordPress est en marche, nous allons activer les plugins nécessaires et configurer notre boutique. De votre tableau de bord WordPress, accédez à la page Plugins et activez ce qui suit : WooCommerce, WPGraphQLet WPGraphQL WooCommerce.
Si c’est une installation fraîche, WooCommerce devrait générer automatiquement une Cart, Shopet Checkout page sur l’activation.
Avec vos plugins activés, il est temps de générer certains produits pour votre magasin. Pour ce faire, ouvrez une nouvelle fenêtre de terminal (assurer que votre réseau Docker fonctionne toujours dans une autre fenêtre de terminal) et naviguez vers la /backend répertoire de la démo. D’ici, exécutez la commande suivante :
composer generate-products 100Cette commande générera automatiquement 100 produits pour votre magasin. Bien que la qualité de ces produits ne soit pas de premier ordre, ils sont parfaits pour tester et développer votre vitrine.
Configurer WooGraphQL
Notre dernière étape dans la configuration de WordPress pour notre application eCommerce sans tête est de configurer WooGraphQL. Naviguez sur le tableau de bord WordPress et allez dans GraphQL > Paramètres. À partir d’ici, sélectionnez le WooGraphQL onglet.
Dans le WooGraphQL paramètres, recherchez la Enable User Session transferring URLs définir et vérifier Cart URL, Checkout URLet Account URL options.
L’activation de cette option indique à WooGraphQL d’enregistrer l’URL de dépôt de session que nous avons cochée sur le schéma GraphQL, et active le paramètre de dépôt de session. Par défaut, ce paramètre est à https://our-site/transfer-session
N’oubliez pas de cliquer sur le bouton `Enregistrer les modifications` pour finaliser vos paramètres!
Et voilà ! Votre installation WordPress est maintenant prête pour le développement de votre application eCommerce sans tête. Dans le prochain épisode de cette série de tutoriels, nous plongerons dans la configuration de notre front-end avec Réagir et SuivantJoyeux codage !
Leave a Reply