店面和目录管理员的端到端用例

Adobe Commerce Optimizer UI — 设置目录视图和策略以管理Carvelo用例的复杂目录操作设置。

Commerce Storefront — 使用加载到Adobe Commerce Optimizer实例和Commerce Storefront配置文件fstab.yaml和config.json中的示例目录数据渲染店面。

为Celport创建一个名为​ Celport部件类别 ​的新策略，以便仅销售制动和悬架部件。

为Celport店面创建新的目录视图。

此目录视图使用您新创建的策略​ Celport部件类别 ​和现有的​ East Coast Inc品牌，以确保Celport在与East Coast Inc签署的协议中只能销售Bolt和Cruz品牌。Celport目录视图使用east_coast_inc价格手册来支持与品牌许可协议相符的产品定价计划。

更新商务店面配置以使用来自您创建的Celport目录视图的数据。

在左边栏中，展开​ 存储设置 ​部分，然后单击​ Policies。

单击​ Create Policy。

此时将显示一个新页面，用于添加策略详细信息。

添加所需的详细信息：

名称 = Celport部件类别

单击​ Add Filter。

将显示一个对话框以添加过滤器详细信息。

添加筛选器详细信息：

• 属性 = part_category
• 运算符 = IN
• 值Source = 静态
• 值 = 制动器
• 值 = 暂停

要了解有关STATIC和TRIGGER值源之间差异的更多信息，请参阅值源类型。

在​ Filter details ​对话框中，单击​ Save。

要启用刚刚创建的筛选器，请单击操作点(…)，然后选择​ 启用。

单击​ Save。

通过单击后退箭头返回到策略列表。

您的新​ Celport部件类别 ​策略将显示在列表中。

在左边栏中，展开​ 存储设置 ​部分，然后单击​ Catalog views。

请注意现有的目录视图： Arkbridge、Kingsbluff ​和​ Global。

单击​ Add catalog view。

填写目录视图详细信息：

• 名称 = Celport
• 目录源 = en-US
• 策略 （使用下拉列表） = East Coast Inc品牌；Celport部件类别；品牌；型号

单击​ Add ​以创建目录视图。

目录视图页面将更新以显示新的目录视图。

获取Celport目录视图ID。

单击​ 目录视图 ​页上Celport目录视图的信息图标。

复制并保存目录视图ID。 当您更新店面配置以向新的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目录视图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实例上的用例数据中提供的另一个部件类别。

请注意，不会返回任何结果。 这是因为Celport目录视图已配置为仅销售制动和悬架部件。

尝试更新店面配置文件(config.json)。

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

例如，您可以将目录视图ID更改为Kingsbluff目录视图，将价格手册ID更改为east_coast_inc。 您可以通过查看​ Kingsbluff部件类别 ​策略来查看Kingsbluff可用的部件类别。

1. 保存文件。

   保存文件时，本地店面预览会自动更新。

2. 使用“搜索”功能在浏览器中预览更改以查找轮胎零件。

   请注意可用的不同部件类型，并注意分配给Kingsbluff目录视图的价格。

这些实验展示了Adobe Commerce Optimizer的灵活性 — 您可以快速地在不同的目录视图和价格手册之间切换，为不同的受众创建自定义购物体验，而无需复制您的目录数据。