ストアフロントとカタログ管理者のエンドツーエンドの使用例

Adobe Commerce Optimizer UI - カタログビューとポリシーを設定して、Carvelo ユースケースの複雑なカタログ運用設定を管理します。

Commerce Storefront - Adobe Commerce Optimizer インスタンスに読み込まれたサンプルカタログデータと、Commerce Storefront 設定ファイル（fstab.yaml、config.json）を使用してストアフロントをレンダリングします。

Celport がブレーキパーツとサスペンションパーツのみを販売するために、Celport パートカテゴリ と呼ばれる新しいポリシーを作成します。

Celport ストアフロントの新しいカタログビューを作成します。

このカタログビューでは、新しく作成したポリシー Celport part categories と既存の East Coast Inc Brands を使用して、Celport が East Coast Inc.との契約の一環として Bolt と Cruz のブランドのみを販売できるようにします。Celport カタログビューでは、east_coast_inc 価格台帳を使用して、ブランドライセンス契約に沿った製品価格スケジュールをサポートしています。

作成した Celport カタログ表示のデータを使用するように、コマースストアフロント設定を更新します。

左側のレールで、「ストアの設定 セクションを展開し、「Policies」をクリックします。

「Create Policy」をクリックします。

新しいページが表示され、ポリシーの詳細が追加されます。

必要な詳細を追加します。

名前 = Celport パーツ カテゴリ

「Add Filter」をクリックします。

フィルターの詳細を追加するためのダイアログが表示されます。

フィルターの詳細を追加します。

• 属性 = part_category
• 演算子 = IN
• 値Source = STATIC
• 値 = brakes
• Value = suspension

STATIC 値ソースとトリガー値ソースの違いについて詳しくは、 値ソースのタイプを参照してください。

Filter details ダイアログで、「Save」をクリックします。

作成したフィルターを有効にするには、アクションドット（…）をクリックし、「有効」を選択します。

「Save」をクリックします。

戻る矢印をクリックして、ポリシーのリストに戻ります。

新しい Celport パーツ カテゴリ ポリシーがリストに表示されます。

左側のレールで、「ストアの設定 セクションを展開し、「Catalog views 定」をクリックします。

既存のカタログビュー Arkbridge、Kingsbluff および Global に注目してください。

「Add catalog view」をクリックします。

カタログ表示の詳細を入力します。

• 名前 = Celport
• カタログソース = en-US
• ポリシー （ドロップダウンを使用） = East Coast Inc Brands; Celport 部品カテゴリ; ブランド; モデル

「Add」をクリックして、カタログビューを作成します。

「カタログビュー」ページが更新され、新しいカタログビューが表示されます。

Celport カタログビュー ID を取得します。

カタログビュー ページで、Celport カタログビューの情報アイコンをクリックします。

カタログビュー ID をコピーして保存します。 この ID は、新しい Celport カタログにデータを配信するようにストアフロント設定を更新する際に必要になります。

この手順が正しく完了したことを確認するには：

• カタログ ビュー名は"Celport"です
• カタログ表示には、4 つの関連ポリシーが表示されます
• カタログビュー ID が表示され、コピーできます
• カタログソースが「en-US」と表示される

ローカル開発環境で、ストアフロントボイラープレートの設定ファイルを使用して GitHub リポジトリのクローンを作成したフォルダーを開きます。

フォルダーのルートディレクトリで、config.json ファイルを開きます。

{
 "public": {
   "default": {
   "commerce-core-endpoint": "https://www.aemshop.net/graphql",
   "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/Fwus6kdpvYCmeEdcCX7PZg/graphql",
   "headers": {
      "cs": {
         "ac-view-id": "9ced53d7-35a6-40c5-830e-8288c00985ad",
         "ac-price-book-id": "west_coast_inc",
         "ac-source-locale": "en-US"
        }
      },
      "analytics": {
         "base-currency-code": "USD",
         "environment": "Production",
         "store-id": 1,
         "store-name": "ACO Demo",
         "store-url": "https://www.aemshop.net",
         "store-view-id": 1,
         "store-view-name": "Default Store View",
         "website-id": 1,
         "website-name": "Main Website"
       }
    }
   }
}

commerce-endpoint の値で、URL のテナント ID を Adobe Commerce Optimizer インスタンスの URL に置き換えます。

テナント ID は、Commerce Optimizer UI の URL 内にあります。 例えば、次の URL では、テナント ID は XDevkG9W6UbwgQmPn995r3 です。

https://experience.adobe.com/#/@commerceprojectbeacon/in:XDevkG9W6UbwgQmPn995r3/commerce-optimizer-studio/catalog

ac-view-id の値を、以前にコピーした Celport カタログビュー ID に置き換えます。

ac-price-book-id の値を "east_coast_inc" に置き換えます。

これらの変更を行うと、config.json ファイルは次のようになり、ACO-tenant-id と celport-catalog-view-id のプレースホルダーが値に置き換えられます。

{
  "public": {
     "default": {
     "commerce-core-endpoint": "https://www.aemshop.net/graphql",
     "commerce-endpoint": "https://na1-sandbox.api.commerce.adobe.com/{{ACO-tenant-id}}/graphql",
     "headers": {
         "cs": {
             "ac-view-id": "{{celport-catalog-view-id}}",
             "ac-price-book-id": "east_coast_inc",
             "ac-source-locale": "en-US"
           }
         },
         "analytics": {
             "base-currency-code": "USD",
             "environment": "Production",
             "store-id": 1,
             "store-name": "ACO Demo",
             "store-url": "https://www.aemshop.net",
             "store-view-id": 1,
             "store-view-name": "Default Store View",
             "website-id": 1,
             "website-name": "Main Website"
          }
      }
  }
}

ファイルを保存します。

変更を保存すると、ブレーキとサスペンション パーツのみを販売するように設定されている Carvelo カタログ ビューを使用するように、カタログ設定が更新されます。

ストアフロントを起動して、ストアフロントの設定で作成した Celport 固有のカタログエクスペリエンスを表示します。

1. IDE のターミナルウィンドウから、ローカルストアフロントのプレビューを開始します。

   code language-shell
   npm start

   ブラウザーが開き、http://localhost:3000 にローカル開発のプレビューが表示されます。

   コマンドの実行に失敗した場合や、ブラウザが開かない場合は、「Storefront のセットアップ」の ローカル開発手順を参照してください。

ブラウザーで brakes を検索し、Enter キーを押します。

ストアフロントが更新され、ブレーキパーツを示す製品リストページが表示されます。

ブレーキ部品の画像をクリックすると、製品情報と共に製品の詳細が表示され、製品価格情報がメモされます。

tires を検索します。これは、Adobe Commerce Optimizer インスタンス上のユースケースデータで使用できるもう 1 つのパーツカテゴリです。

結果が返されないことに注意してください。 これは、Celport カタログ ビューが、ブレーキとサスペンションのパーツのみを販売するように設定されているためです。

ストアフロント設定ファイル（config.json）を試して更新します。

1. ac-view-id と ac-price-book の値を変更します。

例えば、カタログビュー ID を Kingsbluff カタログビューに変更し、価格台帳 ID を east_coast_inc に変更できます。 「キングスブラフ」パーツ カテゴリのポリシーを確認すると、キングスブラフで使用できるパーツ カテゴリを確認 きます

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

   ファイルを保存すると、ローカルストアフロントのプレビューが自動的に更新されます。

2. 検索機能を使用してタイヤ部品を検索することで、ブラウザで変更内容をプレビューします。

   使用可能なパーツ タイプが異なることに注目してください。また、Kingsbluff カタログ ビューに割り当てられている価格にも注目してください。

これらの実験は、Adobe Commerce Optimizerの柔軟性を示しています。異なるカタログビューと価格台帳をすばやく切り替えて、カタログデータを複製することなく、異なるオーディエンス向けにカスタマイズされたショッピングエクスペリエンスを作成できます。