天天看點

如何在 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

自定義 UI 即可生效:

如何在 SAP Spartacus 産品明細頁面添加自定義 UI
如何在 SAP Spartacus 産品明細頁面添加自定義 UI