这是 Jerry 2021 年的第 24 篇文章，也是汪子熙公众号总共第 295 篇原创文章。

最近看到 SAP 天天事 公众号公布的一篇文章：

基于 SAP Commerce Cloud，老娘舅构建的餐饮行业业务中台胜利启用

老娘舅餐饮股份有限公司创立于 1998 年，目前位列中国餐饮百强第 45 位，是中国快餐十大品牌之一。

他们总结行业特色，比照解决方案，通过两年左右的产品选型和行业竞品参考，在对 SAP Commerce 产品治理的灵活性、渠道反对的多样性、订单解决的及时性和零碎运行稳定性等多方面进行充沛评估后，老娘舅最终抉择了电商畛域的当先产品套件 SAP Commerce Cloud 作为全渠道业务中台。

本文就从 SAP Commerce Cloud (电商云) 前台路由门路的自定义配置与开发的一个理论例子，来加深大家对其灵活性的意识。

Jerry 文章里介绍的 SAP Commerce Cloud UI，如无非凡阐明，默认均为基于 SAP Spartacus 的新一代单页面 UI，而非传统的 JSP UI.

在 SAP Commerce Cloud 规范的 UI 里，咱们在产品列表页面抉择某个产品，点击进入明细页面：

从产品列表页面跳转到产品明细页面，是通过 Angular 规范的 Router 组件实现的。

下图产品明细页面的 url：

http://localhost:4202/electro…

很显著，这个产品明细页面的 url，由下列三个片段拼接而成：

动态的字符串 product
动静参数 358639, 即产品 ID
动静参数 DSC-N1，即产品名称

产品 ID 和产品名称保护在 SAP Commerce Cloud Backoffice 里：

SAP Commerce Cloud UI 的页面默认路由即 url 格局，通过 Spartacus 接口 RoutesConfig 来定义：

上图第 35 行的 paths 数组里蕴含的内容，即产品明细页面 (咱们开发团队习惯简称为 PDP – Product Detail Page) 的路由 url 模板。其中 :productCode 是一个占位符，运行时会被 36 行指定的参数映射数组 (paramsMapping) 里指定的 code，即 SAP Commerce Cloud 后盾 Product 模型里的 code 字段的值取代。

之所以引入参数映射的机制，而不间接将 Product 模型字段 code 退出到 url 模板里，是为了让 url 模板语义上更加清晰，达到自描述的成果。因为 code 这个单词比拟通用，到底指 Product code，还是指 Product category code 呢？而在 url 模板里应用表述更加准确的 productCode，再将其映射到 Product 模型的 code 字段，这样防止了可能产生的歧义。

当咱们另外关上一个名称比拟长的产品时，发现此时 url 的显示成果有些不尽如人意——产品名称中的空格，被 encode 解决成了 %20:

http://localhost:4202/electro…

因而本文借这个例子，介绍如何通过简略的二次开发，来更改 SAP Commerce Cloud (电商云) 里产品明细页面 url 的显示格局。

假如咱们须要实现如下需要：

1. 将产品名称中蕴含的空格，替换成连接号 “-” , 并显示在 url 里。
2. 在 url 里显示产品的制造商信息，即 Product 模型的 manufacturer 字段。

具体实现步骤如下：

1. 新建一个 Angular module，应用 Spartacus 提供的工具办法，ConfigModule.withConfig, 定义一条新的路由配置，键为 product，其值会笼罩掉 Spartacus 公布的同名默认路由配置：

第 31 行的 url 模板，蕴含了动态字符串 manufacturer, 其后紧跟 Product 模型上的同名字段，表明该产品的制造商名称，这样就实现了需要 2.

而对于需要 1 即产品名称的空格替换为 ”-“, 最惯例的思路是，在产品数据从 SAP Commerce Cloud 后盾返回前台之后，找一个能够编写自定义逻辑的钩子函数 (hook) 进行实现。

Jerry 之前的文章 Jerry 在 2020 SAP 寰球技术大会的分享：SAP Spartacus 技术介绍的文字版 有这样一张图：

从 Commerce 零碎读取产品主数据，读取的字段列表以 url 参数的模式呈现在 API endpoint 里。这些字段列表能够在 Connector 的动态配置点里进行配置：

Connector 并不会间接同 Commerce 交互，而是把申请转发给 Adapter，具体通信由 Adapter 实现，Connector 只负责调度 Adapter.

Connector 将 Adapter 取回的数据交给 NgRx 的 store 构造对立治理，后者的复杂度被 Facade 层所暗藏，而 Spartacus UI 组件只会同 Facade 层交互，进行数据绑定和页面展现。这体现了关注点拆散的设计准则。因为 Commerce UI 组件和 Commerce 后盾组件的数据模型存在差别，因而须要 Converter (有时也称 Normalizer)，在数据从 Commerce 取回，筹备出现在 UI 之前，先要通过 Converter 转换成适宜 UI 展现的构造。

因而我创立了一个 ProductNameNormalizer，继承自 Converter，实现其 convert 办法，在外面将 Product 模型的 name 字段，用正则表达式将蕴含的所有空格字符，替换成 “-“.

上图第 9 行，我没有将替换后的后果值，存储到 Product 模型的 name 字段里，而是引入了一个新的 nameForUrl 字段，以防止影响其余可能同样基于该 name 字段的二次开发。

这个新引入的仅仅用于展现在浏览器地址栏里的字段，在很多 SAP 产品里都有宽泛的利用，称说也各不相同。然而它们都有着同样的特色：

* 没有后盾长久化存储，纯正用于 UI 显示

• 为了补救后盾模型和 UI 模型字段差别而引入
• 其值通常都是动静计算而成

典型的一个例子是，后盾存储了员工的出生年月，而 UI 显示的字段是年龄，那么 UI 模型里引入一个年龄字段，其值为以后年月减去员工出生年月。

在 SAP CRM 里，这种运行时依据某种规定，动静填充其值，供 UI 显示的字段，叫做 Calculated Field:

在 SAP CRM AET (Application Extension Tool) 里，Key User 能够通过简略的规定编辑器，保护 Calculated Field 的计算逻辑。当然，这些规定保留后，会编译生成对应的 ABAP 代码。

而到了 SAP Cloud for Customer 里，除了同样反对 SAP CRM Calculated Field 的规定编辑性能之外，还提供了两种容许二次开发人员，通过编程来填充用于 UI 长期显示字段值的形式：

1. Transient Field

在 SAP Cloud for Customer BO 定义代码里，应用注解 Transient，将一个字段标注成 Transient 字段：

而后其值通过编写 AfterLoading 这个 hook 来填充。

1. Dedicated Field

在 SAP C4C UI Designer 里将字段类型设置为 Dedicated Field，而后给其调配一个 Transformation，该 Transformation 由二次开发人员用 ABSL (ABAP Scripting Language) 实现，负责计算 Dedicated Field 的值。

回到本文介绍的 SAP Commerce Cloud UI 二次开发的例子。我的 Calculated Field，nameForUrl 的值，间接通过 ProductNameNormalizer 实现的 convert 办法填充。

至此这个需要的开发步骤曾经完结。最初，将寄存了把空格替换成 “-” 的 nameForUrl 字段(下图绿色高亮)，映射到产品明细页面 url 模板 (下图红色高亮) 即可。

最初的成果：

当初的 url：

http://localhost:4204/electro…

是不是比之前的 url，可读性要好一些？

http://localhost:4202/electro…

感激浏览。

更多浏览

• 从产品展现页面谈谈 Hybris 的特有概念和设计构造
• 从产品展现页面谈谈 Hybris 系列之二: DTO, Converter 和 Populator
• Hybris Enterprise Commerce Platform 服务层的设计与实现
• 从一个理论的例子登程，谈谈 SAP Commerce Cloud 电商云的 UI 自定义开发
• SAP Commerce Cloud (电商云) UI 的懒加载性能
• SAP CRM Fiori 利用和 SAP Commerce Cloud (电商云) UI 如何通过调整 CSS 来扭转 UI 显示格调
• SAP 产品一脉相承的 UI 加强思路，在 SAP Commerce Cloud (电商云) UI 加强实现中的体现
• Jerry 在 2020 SAP 寰球技术大会的分享：SAP Spartacus 技术介绍的文字版
• 一小时外在本地搭建 SAP Commerce Cloud(电商云)的前后台运行环境

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