当前位置:网站首页>How to add a custom UI on the sap Spartacus product details page

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

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

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

版权声明
本文为[JerryWang_ Wang Zixi]所创,转载请带上原文链接,感谢
https://chowdera.com/2021/10/20211002145413075e.html

随机推荐