ITPub博客

如图：假设我们通过下列 url，打开 SAP Spartacus 一个产品的明细页面，我们想找出是哪个 Angular Component，实现了该明细页面。 http://localhost:4200/electronics-spa/en/USD/product/553637/nv10 打开 Chrome 开发者工具，查看 Product 明细页面的 HTML 源代码，能找到 cx-pa

先看 cxOutletRef 指令的效果：ng-template 里定义了如下图标 1 区域所示的自定义 UI，通过 cxOutletRef, 将其插入到图标 2 所示的 ProductDetailsPageTemplate里： 源代码： <ng-template cxOutletRef="ProductDetailsPageTemplate" cxOutletP

官方帮助文档：https://help.sap.com/viewer/1be46286b36a4aa48205be5a96240672/v2011/en-US/2be55790d99e4a1dad4caa7a1fc1738f.html The components of the build manifest enable you to configure a number of build

该构造函数位于文件 popover.directive.ts 里： 第 11 行 cxPopOver Directive 施加到 button 元素上之后，运行时，cxPopOver Directive 的构造函数触发。其参数，既有应用程序定义的类型，比如 PositioningService, 也有框架使用的类型，比如 ElementRef，ViewContainerRef 等等。

SAP Spartacus B2B 页面类似 SAP Fiori Launchpad，共有 6 个 tile(磁贴)，点击某个磁贴，能跳转到对应的列表页面。 路由映射就是指点击某个 url 之后(例如上图所示的例子），应该激活哪一个 Angular Component. 例如上图 User tile，通过 a 标签实现，点击之后，会跳转到其 href 属性指向的 url：http://lo

在之前的 SAP Spartacus 标准开发中，每次我从 Github 上 clone 了最新的代码后，必须手动修改 environment.ts 里的配置值，将 CX_BASE_URL 和 b2b 修改成实际值： 后来我研究了一下 package.json 里定义的脚本：发现使用了 env-cmd 这个工具： env-cmd —no-override -e dev,b2c,

这个自动 focus 设置的效果是：我们从 Spartacus Unit list 页面，随便选择一行，进入明细页面之后： 键盘 focus 会自动停留在 detail 页面(下图右边红色矩形框内)第一个 focusable 的元素上： 敲回车试试： 发现 (i) icon 是 unit 明细页面第一个 focusable 的元素。 这个功能的实现原理：在 unit 明细页面，

这个弹出窗口的技术实现，通过SAP Spartacus 自定义的popover Component实现而成： 注意，当我刚接触Angular时，误以为下图标号为1的a标签，和标号为2的自定义标签cx-org-toggle-status, 会按照其在unit-details.component.html里出现的先后顺序，出现在最终的页面里。 实际上，我这种理解是错误的。 SAP Spa

Popover Component的 appendToBody如果设置成true： 则其 DOM 元素会出现在 body 节点的 末尾: 当我点击屏幕任意空白位置时，这个Popover 对话框会自动消失。 准确的说，是从 DOM tree中移除，而不是设置成invisible. Popover 自定义指令的实现源代码里，会通过@HostListener来监控宿主元素的 docu

这是Jerry 2021年的第 21 篇文章，也是汪子熙公众号总共第 292 篇原创文章。 最近一段时间, Jerry 陆续把自己在 SAP Commerce Cloud (电商云) 新一代前台页面开发的日常工作中遇到的一些问题和心得，写成了文章： 从一个实际的例子出发，谈谈SAP Commerce Cloud电商云的UI自定义开发 SAP Commerce Cloud (电商云) UI

本文首先快速回顾几种 SAP 产品中的 UI 增强思路，然后具体介绍该思路是如何在 SAP Commerce Cloud(电商云) UI 增强中贯彻实施的。 Jerry 之前的文章：Jerry 在 2020 SAP 全球技术大会的分享：SAP Spartacus 技术介绍的文字版，曾经提到，SAP 电商云的新一代标准 UI，由众多 Angular Component 组成，这些 Componen

最近工作中处理了 SAP Commerce Cloud (电商云) UI 的一个懒加载 (Lazy Load) 功能的问题，这里把自己学到的东西做个记录。 UI 懒加载，有时又称惰性加载，延迟加载，是和贪婪加载 (Eager Load) 截然相反的一种 UI 组件加载策略。 假设一个应用的 UI 由 A，B，C 若干视图组成，采用贪婪加载，则所有视图的实现代码，在 build 阶段会被合并到一

昨天 Jerry 读到了 SAP天天事 公众号上发布的一篇文章：多家知名企业选择 SAP Commerce Cloud 为客户提供卓越购物体验。SAP 日前宣布，锦江国际旗下的全球酒店供应链平台锦江联采、摩托车制造商新大洲本田和娱乐零售商 Virgin Megastore 已选择采用 SAP Commerce Cloud（电商云）解决方案，为客户提供卓越的电商体验。既然选择了 SAP Commer

Recently I am studying Hybrid Commerce and try to learn how the home page of Hybris storefront is implemented.I try the approach introduced in my blog Technical data for Hybris Commerce UI – how

打开Hybris安装文件夹下的recipes，随便打开一个recipe的build.gradle文件，发现使用了installer-platform-plugin和installer-addon-plugin这两个plugin. Groovy setup任务的逻辑，也就是使用这两个plugin里的实现，根据config实例化platform对象，然后调用其setup方法和executeAntTar

(1) Setup = Invoked by default if no task is specified with install command. It installs recipe & copies files. (2) Initialize = Initializes the recipes application. (3) Start = Start the applicat

最近工作重点转移到了SAP Commerce上来，正好有机会把该产品里由Java实现的订单处理框架和我之前长期工作过的，ABAP实现的SAP CRM One Order框架做个比较：基于Spring的Bean替换机制 vs ABAP函数+配置表，两种方式都实现了强大的可扩展性。SAP Commerce的订单处理框架把订单处理业务按照步骤拆分成一个个细粒度的处理单元，封装到一个个Spring Bea

Header：上图蓝色和浅绿色文字。A header is a single line defining a mapping of the following value lines to the type system. A header applies to all processed value lines until the next header or until the end of

Extension modules are structural elements of an extension. 类似ABAP开发包的概念。An extension may include several extension modules serving as structural elements. Each of them offers a certain set of function

# 问题productLayout2Page.jsp和product detail page的绑定关系在Hybris WCMS cockpit什么地方能够找到点击了product list里的product image，会跳转到detail page：target jsp的url在这个方法里计算出来：算出来的结果：也就是这个文件：问题productLayout2Page.jsp和product d