産品明細頁面 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 裡添加如下代碼:
自定義 UI 即可生效: