乐趣区

关于sap:如何在-SAP-Spartacus-产品明细页面添加自定义-UI

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

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

对应的 Angular Component 名称:TabParagraphContainerComponent

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

其 Component:ProductDetailsTabComponent

对应的 CMS Component 名称:CMSTabParagraphContainer:

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

而 detail Component 的 CMS 和 Angular Component 同名:

和咱们在 UI 上观测到的统一:

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

咱们用 json pipe 打印出 Component 数据,失去 flexType 为 ProductDetailsTabComponent:

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

  <ng-template cxOutletRef="ProductDetailsTabComponent" cxOutletPos="after">
    Jerry2
  </ng-template>

自定义 UI 即可失效:

更多 Jerry 的原创文章,尽在:” 汪子熙 ”:

退出移动版