産品明細頁面 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 即可生效: