新一代平台已停用

扩展 "产品详细信息" 面板

在线编辑

您可以自定义 Sterling Store Engagement 中任何视图显示的产品详细信息面板。

定制折叠项

您可以在 " 产品详细信息 " 面板中添加新的折叠项或替换现有现成折叠项。

为了覆盖 " 客户服务 " 视图的 " 产品详细信息 " 面板中的开箱即用的折叠项，必须更新的配置文件为 customer-view-details.config.ts ，对于其他视图为 fulfillment-view-details.config.ts。

使用以下过程来定制 " 产品详细信息 " 面板:

  1. 在 store-extensions-src 下创建以下文件夹结构（如果还没有）： store-extensions-src/app/app-common/product-details-modal
  2. 将 app-common-extension.module.ts 从 WORKSPACE/store-frontend/src/app/app-common 复制到 WORKSPACE/store-frontend/store-extensions-src/app/app-common。
    注: 如果 app-common-extension.module.ts 已存在，请勿复制该文件。 此文件中声明了定制组件和提供程序。
  3. 要自定义客户服务视图中产品详细信息面板的手风琴项目，请将 customer-view-details.config.ts 文件从 WORKSPACE/store-frontend/src/app/app-common/product-details-modal 复制到 WORKSPACE/store-frontend/store-extensions-src/app/app-common/product-details-modal。
  4. 要自定义 " 订单执行 "、" 库存管理 "或 " 配置 "视图中 " 产品详细信息 "面板的手风琴项，请将 fulfillment-view-details.config.ts 文件从 WORKSPACE/store-frontend/src/app/app-common/product-details-modal 复制到 WORKSPACE/store-frontend/store-extensions-src/app/app-common/product-details-modal。

定制主要产品详细信息窗格

您可以在 " 产品详细信息 " 面板上定制主产品详细信息窗格。 要在 " 客户服务 " 视图中覆盖开箱即用的主要产品详细信息，必须定制的组件为 customer-view-primary-detail.ts ，而其他视图的组件为 fulfillment-view-primary-detail.ts。

下表列出了 fulfillment-view-details.config.ts 和 customer-view-details.config.ts 文件中的属性。
表 1. 配置文件中的属性
属性 类型 描述
primaryDetail 对象 用于定义页面的主要产品详细信息部分。 此属性可以采用以下值:
  • tid。 用于测试。
  • component。 组件引用。
accordionItems 数组<object> 用于将折叠窗格定义为单个对象。 此属性可以采用以下值:
  • id。 项的唯一标识，可用于根据条件展开折叠窗格，或使用 switch case 处理父容器中的数据发射器逻辑
  • tid。 用于测试。
  • component。 组件引用。
  • displayBundleKey。 折叠窗格的标题。
  • lazyLoad。 可选。 指示是初始装入折叠项组件，还是在展开组件时装入折叠项组件。
将动态装入这些组件，并将以下输入传递到这些组件:
主要产品详细信息组件的输入
  • primaryData。 来自 getCompleteItemList API 的响应。
  • parentComponentId。 组件标识和配置中的 tid 。
  • activatedRoute 此组件的 ActivatedRoute 引用
折叠项组件的输入
  • config。 add-product-page.config.ts 文件中为此面板提及的配置。
  • primaryData。 与针对主要详细信息组件提及的相同输入。
  • activatedRoute。 此组件的 activatedRoute 参考。