如何在 SAP Spartacus 产品明细页面添加自定义 UI

产品明细页面 Product Detail Page,简称 PDP.


首先在页面上找到 Component selector:cx-tab-paragraph-container:


如何在 SAP Spartacus 产品明细页面添加自定义 UI


对应的 Angular Component 名称:TabParagraphContainerComponent


四个 button 之后,在 active div 里,是 cx-product-details-tab:


如何在 SAP Spartacus 产品明细页面添加自定义 UI


其 Component:ProductDetailsTabComponent


对应的 CMS Component 名称:CMSTabParagraphContainer:


如何在 SAP Spartacus 产品明细页面添加自定义 UI


这个 Component 被放置在 slots ID 为 Tabs 的 slots 里:


如何在 SAP Spartacus 产品明细页面添加自定义 UI


而 detail Component 的 CMS 和 Angular Component 同名:

如何在 SAP Spartacus 产品明细页面添加自定义 UI


和我们在 UI 上观测到的一致:

如何在 SAP Spartacus 产品明细页面添加自定义 UI


在 tab container 的实现 HTML 代码里看到了 cxOutlet 指令,其参数为 Component.flexType:


如何在 SAP Spartacus 产品明细页面添加自定义 UI

我们用 json pipe 打印出 Component 数据,得到 flexType 为 ProductDetailsTabComponent:

如何在 SAP Spartacus 产品明细页面添加自定义 UI


所以最后的解决方案是,在 Storefront.component.html 或者 app.component.html 里添加如下代码:

如何在 SAP Spartacus 产品明细页面添加自定义 UI

上一篇:【spring boot logback】日志logback 生成日志文件在本项目下,而不在指定的日志文件目录下/指定日志文件到达最大值后不按照配置进行切割


下一篇:Android项目实战(七):Dialog主题Activity实现自定义对话框效果