如何从 SAP Spartacus Product Detail 页面，找到其 Angular 实现 Component 的位置

如图：假设我们通过下列 url，打开 SAP Spartacus 一个产品的明细页面，我们想找出是哪个 Angular Component，实现了该明细页面。

http://localhost:4200/electronics-spa/en/USD/product/553637/nv10

打开 Chrome 开发者工具，查看 Product 明细页面的 HTML 源代码，能找到 cx-page-layout 节点，class 值为 ProductDetailsPageTemplate.

因此，Product 明细页面，不是通过单一的 Angular Component 实现，而是由若干 Angular Components 共同组合而成，这些 Angular Components，从语义上说，都放在 ProductDetailsPageTemplate 这个模板容器之内。

https://localhost:9002/cmscockpit/index.zul 打开 SAP Hybris CMS Cockpit：

搜索：

ProductDetailsPageTemplate 的每一个 Content Slot，可以放置一个或者多个 CMS Component，而每一个 CMS Component，又对应一个 Spartacus Angular Component：

Spartacus 应用启动时，打开 Product Detail 页面之后，能观察到这个 HTTP 请求：

https://api.cg79x9wuu9-eccommerc1-p5-public.model-t.myhybris.cloud/occ/v2/electronics-spa/cms/pages?pageType=ProductPage&code=553637&lang=en&curr=USD

读取的正是 Product detail template 和其包含的 Content Slot 信息：

下图黑色高亮的 FooterNavigationComponent，即是 Product 明细页面 Footer 区域的 CMS Component 名称。

我们只需要根据该名称，在 SAP Spartacus 源代码里进行搜索，即可找到同名的 Angular Component：

为了验证我们找到的 Component 是否正确，我们在其 template 实现文件里随便做一些修改：

果然在 footer 区域看到了此修改，说明我们找到的 Component 是正确的。

当然，如果是 partner 使用 SAP Spartacus library 进行二次开发，没有办法直接修改源代码，可以使用 outlet 的方式，对 Product 明细页面某个 Component 进行增强。

在 SAP Spartacus 启动 Component 的 HTML 页面里，增添如下代码：

  <ng-template cxOutletRef="FooterNavigationComponent" cxOutletPos="before" let-model><div class="before-pdp">Jerry 对 Footer 的增强</div></ng-template>

这段代码的语义是，将绿色区域的自定义 UI 片段，动态插入到 Angular Component FooterNavigationComponent 的 UI 之前( cxOutletPos=“before” 的效果)

最后的效果：

更多Jerry的原创文章，尽在：“汪子熙”:

如何从 SAP Spartacus Product Detail 页面，找到其 Angular 实现 Component 的位置相关推荐

SAP Spartacus unit detail 页面显示后自动 focus 设置的原理
这个自动 focus 设置的效果是:我们从 Spartacus Unit list 页面,随便选择一行,进入明细页面之后: 键盘 focus 会自动停留在 detail 页面(下图右边红色矩形框内)第 ...
SAP Spartacus B2B 列表页面的 (i) icon popover Component 的声明位置
SAP Spartacus B2B 页面的列表页面,一共有 6 个类似 SAP Fiori Language 里的 tile(磁贴): 点击去之后,能看到列表页面有一个绿色 icon 图标,点击之后, ...
SAP Spartacus Product 明细页面 meta description 标签页的数据源
例子: http://localhost:4200/Open-Catalogue/Cameras/DigitalCameras/Digital-SLR/DSLR-A330-%252BDT-18-55- ...
SAP Spartacus shipping address页面请求2 - Put Address
注意,这是一个HTTP PUT请求: /occ/v2/electronics-spa/users/current/carts/00008679/addresses/delivery?addressId ...
SAP Spartacus B2B user列表对应的Angular Component
如下图所示,这个页面点击之后: 显示的Angular UI,在SAP Spartacus里并没有单独的Angular Component来实现: 在userCmsConfig里能发现,SAP Comm ...
如何在 SAP Spartacus 产品明细页面添加自定义 UI
产品明细页面 Product Detail Page,简称 PDP. 首先在页面上找到 Component selector:cx-tab-paragraph-container: 对应的 Angul ...
SAP Spartacus not found页面的显示触发机制 - ErrorPageTemplate
在什么情况下,SAP Spartacus会显示404 not found页面? 请求id为not-found的content page: not-found.handler.ts: semantic路 ...
一种简单地实现 SAP UI5 Master detail 页面的方法
实现效果如下图所示: app view 的实现代码: // @ts-nocheck sap.ui.jsview("jerrylist.view.App", {getControll ...
如何在 SAP Spartacus 里添加自定义页面 - Custom Page
网友提问 Add a custom page to Spartacus I would like to add a custom sub page (http://localhost:4200/ima ...

如何从 SAP Spartacus Product Detail 页面，找到其 Angular 实现 Component 的位置

如何从 SAP Spartacus Product Detail 页面，找到其 Angular 实现 Component 的位置相关推荐

最新文章

热门文章