ストアフロントの設定

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

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

設定を確認してください （10 分）

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

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

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

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

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

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

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

リポジトリが作成されると、サイト作成者が更新され、コード同期アプリをインストールするように求められます。

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

コード同期アプリを設定します。

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

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

Site Creator は、ストアフロントのボイラープレートコンテンツをドキュメントオーサー環境にコピーします。 このプロセスには 1～2 分かかります。

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

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

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

今後の参照用に、これらのリンクをコピーして保存します。**Copy をクリックします。

先ほど保存したリンクを使用して Configuration Manager を開きます。

https://da.live/sheet#/<username or org>/<repo name>/config.json

設定で cs （カタログサービス）」セクションを見つけます。

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

"cs": {
   "AC-View-ID": "{catalogViewId}",
   "AC-Environment-ID": "{tenantId}",
   "AC-Source-Locale": "en_US"
}

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

ライブプレビュー 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"}

Sidekickのインストール ​ - Web サイトから直接コンテンツを編集、プレビュー、公開するためのブラウザー拡張機能

ローカル開発環境の設定 ​ - ストアフロントコードとコンテンツをカスタマイズするローカル環境を作成します