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

JerryWang_ Wang Zixi 2021-10-14 06:07:24

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 ":

Please bring the original link to reprint ,thank
Similar articles

2021-10-14

2021-10-14

2021-10-14

2021-10-14

2021-10-14

2021-10-14

2021-10-14

2021-10-14

2021-10-14

2021-10-14

2021-10-14

2021-10-14

2021-10-14