產品明細頁面 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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的如何在 SAP Spartacus 产品明细页面添加自定义 UI的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。