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

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。

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

• 目錄檢視名稱為「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。

您可以在Commerce Optimizer UI的URL中找到租使用者ID。 例如，在以下URL中，租使用者ID為XDevkG9W6UbwgQmPn995r3。

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

將ac-view-id值取代為您先前複製的Celport目錄檢視識別碼。

將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執行個體上使用案例資料中可用的另一個零件類別。

請注意，不會傳回任何結果。 這是因為Celport目錄檢視已設定為只銷售剎車和懸架零件。

嘗試更新您的店面組態檔(config.json)。

1. 變更ac-view-id和ac-price-book值。

例如，您可以將目錄檢視識別碼變更為Kingsbluff目錄檢視，並將價格簿識別碼變更為east_coast_inc。 您可以檢閱​ Kingsbluff零件類別 ​原則來檢視Kingsbluff可用的零件類別。

1. 儲存檔案。

   儲存檔案時，本機店面預覽會自動更新。

2. 使用「搜尋」功能在瀏覽器中預覽變更，以尋找輪胎零件。

   請注意可用的不同零件型別，並注意指定給Kingsbluff目錄檢視的價格。

這些實驗展示了Adobe Commerce Optimizer的彈性，您可以快速切換不同的目錄檢視與價格簿，為不同對象建立自訂購物體驗，而不會複製您的目錄資料。