How to add a custom UI on the sap Spartacus product details page

Product details page Product Detail Page, abbreviation PDP.

First find it on the page Component selector：cx-tab-paragraph-container:

Corresponding Angular Component name ：TabParagraphContainerComponent

four button after , stay active div in , yes cx-product-details-tab:

Its Component：ProductDetailsTabComponent

Corresponding CMS Component name ：CMSTabParagraphContainer：

This Component Be placed in slots ID by Tabs Of slots in ：

and detail Component Of CMS and Angular Component The same name ：

Stay with us UI Consistent with the observed ：

stay tab container The implementation of the HTML I saw it in the code cxOutlet Instructions , Its parameter is Component.flexType:

We use it json pipe Print out Component data , obtain flexType by ProductDetailsTabComponent：

So the final solution is , stay Storefront.component.html perhaps app.component.html Add the following code ：

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

Customize UI Effective ：

more Jerry The original article of , All in ：" Wang Zixi ":