ストアフロントとカタログ管理者のエンドツーエンドのユースケース

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

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

Celportの新しいポリシー​ Celport part categories ​を作成して、ブレーキとサスペンションの部品のみを販売します。

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

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

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

左側のパネルで、ストア設定 セクションを展開し、Policies​をクリックします。

Create Policy​をクリックします。

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

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

名前 = セルポート パーツ カテゴリ

Add Filter​をクリックします。

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

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

• 属性 = part_category
• 演算子 = IN
• 値Source = 静的
• 値 = ブレーキ
• 値 = 停止

静的な値ソースとトリガーな値ソースの違いについて詳しくは、値ソースの種類を参照してください。

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

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

Save​をクリックします。

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

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

左側のパネルで、ストア設定 セクションを展開し、Catalog views​をクリックします。

既存のカタログビューに注意してください：Arkbridge、Kingsbluff、すべてのビュー。

Add catalog view​をクリックします。

カタログビューの詳細を入力：

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

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

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

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

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

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

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

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

In your local development environment, open the folder where you cloned the GitHub repository with your storefront boilerplate configuration files.

In the root directory of the folder, open the config.json file.

{
 "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"
       }
    }
   }
}

Notice that the catalog view header includes the following values:

• commerce-endpoint: "https://na1-sandbox.api.commerce.adobe.com/Fwus6kdpvYCmeEdcCX7PZg/graphql"
• ac-view-id:"9ced53d7-35a6-40c5-830e-8288c00985ad"
• ac-price-book-id: "west_coast_inc"
• ac-source-locale: "en-US"

In the commerce-endpoint value, replace the tenant ID in the URL with the URL for your Adobe Commerce Optimizer instance.

You can find the tenant ID in the URL for the Commerce Optimizer UI. For example, in the following URL, the tenant ID is XDevkG9W6UbwgQmPn995r3.

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

Replace the ac-view-id value with Celport catalog view ID that you copied previously.

Replace the ac-price-book-id value with "east_coast_inc".

After you make these changes, your config.json file should look similar to the following, with the ACO-tenant-id and celport-catalog-view-id placeholders replaced with your values:

{
  "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"
          }
      }
  }
}

Save the file.

When you save the changes, you update the catalog configuration to use the Carvelo catalog view which has been configured to sell only brake and suspension parts.

Launch the storefront to view the Celport-specific catalog experience created by your storefront configuration.

1. From the terminal window in your IDE, start your local storefront preview.

   code language-shell
   npm start

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

   コマンドが失敗するか、ブラウザーが開かない場合は、ストアフロントの設定トピックのローカル開発の手順を確認してください。

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

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

ブレーキ部品画像をクリックして、価格情報を含む製品の詳細を表示し、製品価格情報を記録します。

tiresを検索します。これは、Adobe Commerce Optimizer インスタンスのユースケースデータで使用可能な別の部分カテゴリです。

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

ストアフロント設定ファイル （config.json）の更新を試してください。

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

例えば、カタログビューIDをKingsbluff カタログビューに、価格表IDをeast_coast_incに変更できます。 Kingsbluffで使用可能な部品カテゴリは、Kingsbluff部品カテゴリ ポリシーを確認することで確認できます。

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

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

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

   使用可能な様々な部品タイプと、Kingsbluff カタログビューに割り当てられた価格に注目してください。

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