ストアフロントの設定

ストアフロントプロジェクトを作成-​ サイト作成ツール ​を使用して、定型文コード、サンプルコンテンツ、設定ファイルを含む新しいストアフロントプロジェクトを作成します。

ストアフロント設定をカスタマイズ – リポジトリ内のconfig.json ファイルを更新して、Adobe Commerce Optimizer インスタンスに接続します。

設定を確認 （10分）

• ストアフロントサイトのプレビュー
• 商品詳細ページと検索機能のテスト

​ サイト作成者ツール ​を開きます

{width="700" modal="regular"}

新しいサイトを作成（コードとコンテンツ）​を選択します。

サイト設定を完了します。

• GitHub Organization/Username: GitHub ユーザー名または組織名を入力してください
• サイト名: ストアフロントにわかりやすい名前を選択します
• Commerce GraphQL エンドポイント （オプション）: Adobe Commerce Optimizer インスタンスのGraphQL エンドポイントを入力します

「サイトを作成」をクリックして、ストアフロントのボイラープレートコードを使用してGitHub リポジトリを作成します。

リポジトリが作成されると、サイト作成者が更新され、Code Sync アプリのインストールを求めるメッセージが表示されます。

「Install AEM Code Sync App」をクリックして、Code Sync インストーラーを新しいタブで開きます。

Code Sync アプリを設定します。

• GitHub組織を選択し、Configure​をクリックします。
• コード同期インターフェイスで、Only select repositories​をクリックします。
• Select repositories メニューをクリックし、作成したストアフロントコードリポジトリを選択します。
• Save​をクリックしてリポジトリを登録します。

サイト作成者が開いているブラウザーウィンドウに戻り、サイトを作成​をクリックします。

サイト作成者は、ストアフロントのボイラープレートコンテンツをDocument Author環境にコピーします。 このプロセスには1～2分かかります。

「サイトの詳細」セクションで、ストアフロントプロジェクトのリンクを確認します。

{width="700" modal="regular"}

これらのリンクを使用して、ストアフロントコード、コンテンツ、設定を管理します。

将来の参照のために、これらのリンクをコピーして保存します：**Copyをクリックします。

config.json ファイルをボイラープレートコードリポジトリで開きます。

https://github.com/<username or org>/<repo name>/config.json

設定のcs （カタログサービス）セクションを探します。

プレースホルダーの値をインスタンスの値に置き換えます。 前提条件を参照してください。

"cs": {
   "AC-View-ID": "{catalogViewId}",
   "AC-Source-Locale": "en-US",
   "AC-Price-Book-ID": "{priceBookId}"
}

設定ファイルを保存します。

設定の変更が反映されるまでに数分かかる場合があります。 データがすぐに表示されない場合は、トラブルシューティングの2～3分前に待ってください。

ライブプレビューURLに移動します。

https://main--{SITE}--{ORG}.aem.live

{ORG}と{SITE}をGitHub組織とサイト名に置き換えます。

成功基準：定型文のコンテンツを含むストアフロントのホームページが表示されます。

{width="700" modal="regular"}

サンプル製品ページに移動します。
https://main--{SITE}--{ORG}.aem.live/products/placeholder/{sku}

サンプルデータから任意のSKUを使用します。例えば、次のようになります。
https://main--{SITE}--{ORG}.aem.live/products/placeholder/aur-flu-tir-std-2017

デフォルトのストアフロントでは、ルートのplaceholder値を使用して製品を表示できます。 ストアフロントのカスタマイズを開始する際には、ストアフロントコードをカスタマイズして、カタログで定義された製品ルートに基づいて、製品詳細ページへのパスを設定できます。

成功基準: ページに次の情報を表示する必要があります：

• 製品名、説明、価格
• 製品画像
• カートに追加機能
• Adobe Commerce Optimizer インスタンスから取得したデータ

{width="700" modal="regular"}

ストアフロントのホームページで、ヘッダーの虫眼鏡アイコンをクリックします。

検索文字列tiresを入力し、Enter​を押します。

成功基準：次が表示されます。

• タイヤ商品の検索結果ページ
• サイドバーのフィルターオプション
• 画像と価格設定が掲載された商品リスト

{width="675" modal="regular"}

任意のタイヤ製品をクリックして、その詳細ページを表示します。

{width="675" modal="regular"}