Testa su: questo tutorial copre un precedente rilascio WooGraphQL e non è più aggiornato. Una versione riscritta è in corso — ci collegheremo da qui una volta pubblicato.
Tabella dei contenuti
- Impostazione di WordPress per il tuo Headless eCommerce Applicazione
- Creare e configurare la tua App eCommerce per lo sviluppo
- Pagine delle inserzioni di Building Shop con WooGraphQL
- Creazione di Login utente e navigazione
- Creazione della pagina del prodotto e delle opzioni del carrello
Benvenuti nella prima parte della nostra serie di tutorial sulla creazione di un’applicazione eCommerce senza testa! Questa serie è destinata agli sviluppatori interessati a realizzare una robusta applicazione eCommerce sostenuta da una WooCommerce negozio utilizzando WPGraphQL e WPGraphQL WooCommerce (WoooGraphQL). Questo capitolo vi accompagnerà attraverso il processo di creazione della vostra installazione di WordPress in preparazione per questo sforzo.
Impostazione di WordPress per il tuo Headless eCommerce Applicazione
Prima di immergerci, alcune ipotesi sono in ordine. Presumeremo che seguirete insieme alla nostra guida e filando il vostro ambiente WordPress esattamente come siamo utilizzando le configurazioni Docker trovate nel /backend directory della demo repository da GitHub. Se hai già un’installazione locale WordPress preparato con le dipendenze e plugin necessari, non esitare a saltare avanti alla sezione intitolata Configurare WooGraphQL.
Quello che faremo
- Da solo
wp-graphql-demoRischio - Startup Docker Network
- Installare + attivare WooCommerce
- Generando prodotti.
- Generando pagina carrello, checkout e pagine account.
- Installare + attivare WPGraphQL
- Installare + attivare WPGraphQL WooCommerce
Prerequisiti per WP Environment inclusi nel deposito demo
- PHP
- Compositore
- Docker + Docker-Compose
Installare dipendenze e avviare Docker
Per cominciare, aprire un terminale a una directory di vostra scelta, e clonare il repository e navigare al /backend directory
git clone https://github.com/kidunot89/woographql-demo.git && cd woographql-demo/backendDopo aver tirato il repository dovremmo essere nel /backend directory. Per questo tutorial, non useremo /frontend directory in modo che possa essere ignorato. Ora dal terminal nel /backend directory, eseguire il seguente comando:
composer installDopo l’installazione delle dipendenze, utilizzare Docker Compose per creare e avviare la rete Docker eseguendo:
docker-compose upUna volta che Docker ha iniziato con successo, è possibile completare l’installazione di WordPress navigando a http://localhost:8080/wp/wp-admin.
Seguire le istruzioni fornite per finalizzare l’installazione e accedere al nuovo sito WordPress.
Attiva Plugin e Setup Store
Ora che il nostro sito WordPress è in funzione e in esecuzione, attivare i plugin necessari e impostare il nostro negozio. Dal tuo Dashboard WordPress, naviga alla pagina Plugins e attiva i seguenti: WooCommerce♪ WPGraphQLe WPGraphQL WooCommerce.
Se questa è una nuova installazione, WooCommerce dovrebbe auto-generare un Cart♪ Shope Checkout pagina all’attivazione.
Con i plugin attivati, è il momento di generare alcuni prodotti per il vostro negozio. Per fare questo, aprire una nuova finestra del terminale (assicurare che la rete Docker sia ancora in esecuzione in un’altra finestra del terminale) e passare alla /backend directory della demo. Da qui eseguire il seguente comando:
composer generate-products 100Questo comando auto-genera 100 prodotti per il tuo negozio. Mentre la qualità di questi prodotti non è superiore, sono perfetti per testare e sviluppare il vostro negozio.
Configurare WooGraphQL
Il nostro ultimo passo nella creazione di WordPress per la nostra applicazione eCommerce senza testa è quello di configurare WooGraphQL. Passare al WordPress Dashboard e andare a GraphQL > Impostazioni. Da qui, selezionare il WooGraphQL scheda.
All’interno WooGraphQL impostazioni, cercare il Enable User Session transferring URLs impostazione e controllo Cart URL♪ Checkout URLe Account URL opzioni.
Attivare questa opzione dice a WooGraphQL di registrare l’URL di caduta della sessione che abbiamo controllato allo schema GraphQL, e si accende il punto finale di caduta della sessione. Per impostazione predefinita questo endpoint è a https://our-site/transfer-session
Non dimenticare di fare clic sul pulsante `Salva modifiche` per finalizzare le impostazioni!
E tu ce l’hai! La vostra installazione di WordPress è ora pronta per lo sviluppo della vostra applicazione eCommerce senza testa. Nella prossima puntata di questa serie di tutorial, ci immergeremo nell’impostazione del nostro front-end con Reazione e Il prossimo.. Felice codifica!
Leave a Reply