ストアフロントの設定

ノードバージョンマネージャー（NVM）をインストールします。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash

Node.js と NPM をインストールします。 詳しくは、Node.js を参照してください。

nvm install 22

npm install -g npm

インストールを確認します。

npm -v

GitHub アカウントにログインします。

aem-boilerplate-commerce GitHub リポジトリに移動します。

このテンプレートを使用 を選択してから、ドロップダウンメニューから 新しいリポジトリを作成 を選択します。

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

リポジトリ設定ページが表示されます。

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

設定フォームに次の詳細を入力します。

• リポジトリテンプレート - hlxsites/aem-boilerplate-commerce （デフォルト）。
• 所有者 – 組織またはアカウント（必須）。
• リポジトリ名 – 新しいリポジトリの一意の名前（必須）。
• 説明 - リポジトリの簡単な説明（オプション）。
• パブリックまたはプライベート - Adobeでは、パブリック（デフォルト）をお勧めします。

「リポジトリを作成」を選択します。

数分後、新しいリポジトリが開きます。

GitHub ユーザーインターフェイスに表示されたプルリクエスト通知を無視します。

ローカルマシンにリポジトリのクローンを作成します。

git clone https://github.com/{ORG}/{SITE}.git

リポジトリのクローン作成時にエラーが発生した場合は、GitHub ドキュメントの クローニングエラーのトラブルシューティングを参照してください。

ターミナルまたは IDE でリポジトリを開きます。

default-fstab.yaml ファイルを fstab.yaml にコピーして、設定ファイルを作成します。

cp default-fstab.yaml fstab.yaml

ストアフロント設定ファイルのマウントポイントを更新して、コンテンツの URL を指定します。

1. fstab.yaml 設定ファイルを開きます。

   code language-yaml
   mountpoints: /: url: https://content.da.live/{org}/{site}/ type: markup folders: /products/: /products/default

2. {ORG} および {SITE} の文字列を、ボイラープレートコードに対して作成した GitHub リポジトリーの値に置き換えます。

   例えば、更新されたコードは次のようになります。

   code language-yaml
   mountpoints: /: url: https://content.da.live/owner-name/aco-storefront/ type: markup

3. ファイルを保存します。

新しいディレクトリ tools/sidekick を作成します。

mkdir tools/sidekick

ルートディレクトリの demo-sidekick.json ファイルを tools/sidekick ディレクトリにコピーし、名前を config.json に変更します。

cp demo-sidekick.json tools/sidekick/config.json

サイトに合わせてSidekick設定をカスタマイズします。

ディレク tools/sidekick/ リから config.json ファイルを編集します。

{
  "project": "My Project",
  "editUrlLabel": "Document Authoring",
  "editUrlPattern": "https://da.live/edit#/{{org}}/{{site}}{{pathname}}"
}

url キーの値を GitHub リポジトリの値で更新します。

• {{ORG}} の文字列を、リポジトリの組織またはユーザー名に置き換えます。

• {{SITE}} の文字列をリポジトリ名に置き換えます。

• pathname 変数は、システムによって入力されます。

{
  "project": "My Project",
  "editUrlLabel": "Document Authoring",
  "editUrlPattern": "https://da.live/edit#/aco-storefront/early-adopter{{pathname}}"
}

ファイルを保存します。

エディターまたは IDE から、更新したファイルをコミットして保存します。

git add .

更新した 2 つのファイルをコミットしていることを確認します。

git status
On branch main
Your branch is up to date with 'origin/main'.

Changes to be committed:
 (use "git restore --staged <file>..." to unstage)
     new file:   fstab1.yaml
     modified:   tools/sidekick/config.json

変更をコミットします。

git commit -m "Update storefront boilerplate for Adobe Commerce Optimizer"

変更を適用します。

git push

「AEM コード同期アプリ」設定ページを開きます。

設定 を選択し、作成したリポジトリを含む 組織 または アカウント を使用して認証します。

フォームから「リポジトリのみを選択」を選択し、作成したリポジトリを選択します。

「インストール」を選択して、AEM コード同期アプリをリポジトリに追加します。

アプリケーションが正常にインストールされたことを示すメッセージが表示されます。

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

リポジトリを設定します。

• 「Use Existing Repository」を選択します。
• ストアフロントのボイラープレートプロジェクトの Organization/Username を入力します。
• Repository Name を入力します。

「サイトを作成」を選択して、コンテンツを読み込み、プレビューし、ドキュメントオーサー環境に公開します。

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

サイトを作成したら、「Edit content」セクションと「View Site」セクションのリンクを使用して、デモストアフロントを参照できます。

コンテンツとサイトへの主なリンクは、次の形式に従っています。

• ルートコンテンツフォルダー - https://da.live/#/{ORG}/{SITE}
• サイトのプレビュー— https://main--{SITE}--{ORG}.aem.page/
• サイトの実稼働：— https:/main--{SITE}--{ORG}.ae.live/

ルートコンテンツフォルダーリンクを開いてコンテンツを表示します。

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

「https://main--{SITE}--{ORG}.aem.live」に移動してサイトを表示します。

{ORG} および {SITE} を、ボイラープレートリポジトリの組織と名前に置き換えます。

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

ページが 404 を返す場合は、次の点を確認します。

• fstab.yaml ファイル内のマウントポイントは、正しいコンテンツ URL を指しています:https://content.da.live/{ORG}/{SITE}/
• GitHub リポジトリに接続するようにコード同期アプリを設定しました。
• デモコンテンツクローンツールを使用して、コンテンツをドキュメントオーサー環境に公開しました。

Commerce Optimizerのデフォルトインスタンスから取得したサンプルカタログデータを表示します。

1. ストアフロントのヘッダーで、虫眼鏡をクリックして tires を検索します。

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

2. Enter キーを押して、検索結果ページを表示します。

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

   検索結果ページのコンポーネントは、search コンテンツドキュメントで定義されます。 検索結果データは、config.json のストアフロント設定に基づいて入力されます。

3. ページでタイヤ製品を選択して、製品の詳細ページを表示します。

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

   製品詳細ページのコンポーネントは、default フォルダー内の product コンテンツドキュメントで定義されています。

IDE でメインブランチをチェックアウトし、リモートブランチの最後のコミットにリセットします。

git checkout main
git reset --hard origin/main

必要な依存関係をインストールします。

npm install

ローカル開発サーバーを起動します。

npm start

ボイラープレートのストアフロントの最初のページが、ブラウザーの http://localhost:3000 に表示されるはずです。

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

IDE でストアフロント設定を更新して、Adobeによってプロビジョニングされた Adobe Commerce Optimizer インスタンスに接続します。

1. config.json ファイルを開きます。

2. Adobe Commerce Optimizer インスタンスのエンドポイントを使用して、次の値を更新します。

   • commerce-endpoint – 既存の値をエンドポイント URL に置き換えます。

     code language-json
     "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/{tenantId}/graphql"

   • ac-environment-id – 既存の値を、エンドポイント URL のテナント ID に置き換えます。

     code language-json
     "ac-environment-id": "{tenantId}"

3. ファイルを保存します。

   ローカルプレビューが正しく動作している場合、更新はローカルのストアフロントに適用されます。

設定変更の結果をサイトで確認します。

1. ブラウザーで http://localhost:3000 に移動し、ページを更新します。

2. ストアフロントのヘッダーで、虫眼鏡をクリックして tires を検索します。

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

3. Enter キーを押して、検索結果ページを表示します。

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

   ストアフロント設定ファイルのヘッダー値はデフォルトインスタンスに基づいているので、検索で結果が返されません。 設定が、プロビジョニングされた Adobe Commerce Optimizer インスタンスを指すようになったので、これらの値は無効です。