店面和目錄管理員端對端使用案例

Adobe Commerce Optimizer UI — 設定目錄檢視和原則，以管理Carvelo使用案例的複雜目錄作業設定。

Commerce店面 — 使用載入到您Adobe Commerce Optimizer執行個體和Commerce店面組態檔fstab.yaml和config.json的範例目錄資料來轉譯店面。

為Celport建立名為​ Celport零件類別 ​的新原則，以只銷售剎車與懸架零件。

為Celport店面建立新的目錄檢視。

此目錄檢視使用您新建立的原則​ Celport零件類別 ​和現有的​East Coast Inc品牌，以確保Celport在與East Coast Inc的合約中只能銷售Bolt和Cruz品牌。Celport目錄檢視使用east_coast_inc價格手冊來支援符合品牌授權合約的產品定價排程。

更新Commerce Storefront設定，以使用您建立的Celport目錄檢視中的資料。

在左側邊欄中，展開​ 存放區設定 ​區段，然後按一下​Policies。

按一下​Create Policy。

將顯示新頁面以新增原則詳細資訊。

新增必要的詳細資料：

名稱 = Celport元件類別

按一下​Add Filter。

顯示對話方塊以新增篩選器詳細資訊。

新增篩選器詳細資料：

• 屬性 = part_category
• 運運算元 = IN
• 值Source = 靜態
• 值 = 剎車
• 值 = 暫停

若要深入瞭解STATIC和TRIGGER值來源之間的差異，請參閱值來源型別。

在​ Filter details ​對話方塊中，按一下​Save。

若要啟用您剛建立的篩選器，請按一下動作點(…) 並選取​啟用。

按一下​Save。

按一下上一頁箭頭，返回原則清單。

您的新​ Celport元件類別 ​原則會出現在清單中。

在左側邊欄中，展開​ 存放區設定 ​區段，然後按一下​Catalog views。

注意現有的目錄檢視： Arkbridge、Kingsbluff​和​所有檢視。

按一下​Add catalog view。

填寫目錄檢視詳細資料：

• 名稱 = Celport
• 目錄來源 = en-US
• 原則 （使用下拉式清單） = East Coast Inc品牌；Celport零件類別；品牌；模型

按一下​ Add ​以建立目錄檢視。

目錄檢視頁面會更新以顯示新的目錄檢視。

取得Celport目錄檢視識別碼。

按一下​ 目錄檢視 ​頁面上Celport目錄檢視的資訊圖示。

複製並儲存目錄檢視識別碼。 當您更新店面設定以將資料傳送到新Celport目錄時，需要此ID。

驗證此步驟是否已正確完成：

• Catalog view name is "Celport"
• Catalog view shows 4 associated policies
• Catalog view ID is displayed and can be copied
• Catalog source shows "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

   The browser opens to the local development preview at http://localhost:3000.

   If the command fails or the browser does not open, review the instructions for local development in the Storefront setup topic.

In the browser, search for brakes, and press Enter.

The storefront updates to display the product list page showing the brake parts.

Click on a brake part image to view the product details with price information and note the product price information.

Search for tires, which is another part category available in the use case data on your Adobe Commerce Optimizer instance.

Notice that no results are returned. This is because the Celport catalog view has been configured to sell only brake and suspension parts.

Experiment with updating your storefront configuration file (config.json).

1. Change the ac-view-id and ac-price-book values.

For example, you can change the catalog view ID to the Kingsbluff catalog view, and the price book ID to east_coast_inc. You can see the parts categories available for Kingsbluff by reviewing the Kingsbluff part categories policy.

1. Save the file.

   When you save the file, the local storefront preview updates automatically.

2. Preview the changes in the browser by using the Search feature to find tire parts.

   Notice the different part types available and notice the prices assigned to the Kingsbluff catalog view.

These experiments demonstrate the flexibility of Adobe Commerce Optimizer—you can quickly switch between different catalog views and price books to create customized shopping experiences for different audiences without duplicating your catalog data.