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

举报
汪子熙 发表于 2022/05/22 11:03:10 2022/05/22
【摘要】 如图:假设我们通过下列 url,打开 SAP Spartacus 一个产品的明细页面,我们想找出是哪个 Angular Component,实现了该明细页面。http://localhost:4200/electronics-spa/en/USD/product/553637/nv10打开 Chrome 开发者工具,查看 Product 明细页面的 HTML 源代码,能找到 cx-page-...

如图:假设我们通过下列 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” 的效果)

最后的效果:

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。