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

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

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

首先在页面上找到 Component selector:cx-tab-paragraph-container:image.png对应的 Angular Component 名称:TabParagraphContainerComponent

四个 button 之后,在 active div 里,是 cx-product-details-tab:image.png其 Component:ProductDetailsTabComponent

对应的 CMS Component 名称:CMSTabParagraphContainer:image.png这个 Component 被放置在 slots ID 为 Tabs 的 slots 里:image.png而 detail Component 的 CMS 和 Angular Component 同名:image.png和我们在 UI 上观测到的一致:image.png在 tab container 的实现 HTML 代码里看到了 cxOutlet 指令,其参数为 Component.flexType:image.png我们用 json pipe 打印出 Component 数据,得到 flexType 为 ProductDetailsTabComponent:image.png所以最后的解决方案是,在 Storefront.component.html 或者 app.component.html 里添加如下代码:image.png自定义 UI 即可生效:image.png

相关文章
|
6月前
|
缓存 负载均衡 前端开发
SAP Spartacus 和 Sticky session 相关的话题
SAP Spartacus 和 Sticky session 相关的话题
38 0
|
6月前
|
存储
SAP Emarsys 和 SAP Spartacus 的集成
SAP Emarsys 和 SAP Spartacus 的集成
51 0
|
6月前
|
API 开发者
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
Google Tag Manager (GTM) 和 Adobe AEPL 在 SAP Spartacus 中的应用
65 0
|
6月前
|
API
SAP 电商云 CMSUserGroupRestriction 在 Spartacus 里的 evaluation 问题
SAP 电商云 CMSUserGroupRestriction 在 Spartacus 里的 evaluation 问题
49 0
|
3月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
26 0
|
3月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
40 0
|
3月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
24 0
|
6月前
|
前端开发 搜索推荐 JavaScript
什么是 SAP Spartacus 的 CMS Page Connector
什么是 SAP Spartacus 的 CMS Page Connector
46 0
|
6月前
|
JavaScript 容器
关于 SAP Spartacus generic-link component 的模板代码
关于 SAP Spartacus generic-link component 的模板代码
42 2
|
6月前
|
前端开发 JavaScript API
SAP Commerce Accelerator Storefront 到 Spartacus 的 page by page migration 策略
SAP Commerce Accelerator Storefront 到 Spartacus 的 page by page migration 策略
31 0