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

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」と表示される

ローカル開発環境で、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: "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"

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にローカル開発のプレビューが表示されます。

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

ブラウザーで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の柔軟性を示しています。カタログデータを複製することなく、様々なカタログビューと価格表をすばやく切り替えて、様々なオーディエンスに合わせてカスタマイズされたショッピング体験を作成できます。