WooGraphQLのヘッドレスショップの構築:第1章5

私たちが何をしているか

• クローン wp-graphql-demo リポ
• スタートアップドッカーネットワーク
• インストール + アクティブ WooCommerceについて
• 製品を生成します。
• カートページ、チェックアウト、アカウントページの生成
• インストール + アクティブ WPグラフQL
• インストール + アクティブ WPGraphQLウーコマース

デモリポジトリに含まれているWP環境の前提条件

• ログイン
• コンポーザー
• ドッカー+ドッカーコンポーズ

依存関係と開始ドッカーをインストールする

開始するには、ターミナルを選択したディレクトリに開き、リポジトリをクローンし、 /backend ディレクトリ

git clone https://github.com/kidunot89/woographql-demo.git && cd woographql-demo/backend

リポジトリをプルした後、 /backend ディレクトリ。 このチュートリアルでは使用できません /frontend ディレクトリなので無視できます。 ターミナルから /backend ディレクトリは、次のコマンドを実行します。

composer install

依存関係がインストールされた後、Docker Compose を使用して、Docker ネットワークの作成と起動を行います。

docker-compose up

Dockerが正常に起動したら、WordPressのインストールをナビゲートして完了することができます http://localhost:8080/wp/wp-adminお問い合わせ

インストールを確定し、新しいWordPressサイトにログインするための指示に従ってください。

プラグインとセットアップストアの有効化

WordPressサイトが稼働中であることから、必要なプラグインをアクティブにし、ストアをセットアップしましょう。 WordPressダッシュボードから、プラグインページに移動し、次の操作を実行します。 WooCommerceについて, WPグラフQLと WPGraphQLウーコマースお問い合わせ

これが新しいインストールの場合、WooCommerceは自動生成する必要があります Cart, Shopと Checkout アクティベーションページ

プラグインをアクティブにすると、ストアの商品が生成されます。 これを行うには、新しいターミナルウィンドウを開きます(Dockerネットワークが別のターミナルウィンドウでまだ実行されていることを保証します)。 /backend デモのディレクトリ。 ここから、次のコマンドを実行します。

composer generate-products 100

このコマンドは、店舗の100製品を自動生成します。 これらの製品の品質は、トップティアではありませんが、それらはあなたの店主をテストし、開発するのに最適です。

WooGraphQL の設定

ヘッドレスeコマースアプリケーション用のWordPressを設定するための最終ステップは、WooGraphQLの設定です。 WordPressダッシュボードに移動して、GraphQL > 設定に移動します。 ここから、選択します WooGraphQL タブ。

内側に WooGraphQL 設定、外観 Enable User Session transferring URLs 設定とチェック Cart URL, Checkout URLと Account URL オプション。

このオプションを有効にすると、WooGraphQL にチェックしたセッションドロップ URL を GraphQL スキーマに登録し、セッションドロップエンドポイントをオンにします。 デフォルトでは、このエンドポイントは https://our-site/transfer-session

設定を確定するために「変更を保存」ボタンをクリックしてください!

お問い合わせ あなたのWordPressのインストールは、あなたのヘッドレスeコマースアプリケーションの開発のために準備されています。 このチュートリアルシリーズの次のインストールでは、フロントエンドの設定に飛びます リアクション そして、 次へ.js. ハッピーコーディング!

次の章に続けてください