关于sap:乐高LEGO在线购物店面剖析

8次阅读

共计 3405 个字符，预计需要花费 9 分钟才能阅读完成。

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

下图是 SAP Commerce Cloud(电商云) UI 加载默认的 SampleData 数据集后关上的主页，这是一个电子设备的在线购物店面，基于 SAP Spartacus 开源我的项目构建而成。

本文介绍一个理论客户案例，在 Jerry 之前的文章 对于 SAP 产品 UI 的搜索引擎优化 SEO – Search Engine Optimization 已经提到过，下图这个网站，是乐高胜利应用 SAP Spartacus 开发并上线的在线购物店面(阿联酋地区)：

大家仅凭视觉效果，能分辨出这两个网站，实际上都是基于同一个 UI 框架开发进去的吗？这也再次体现了 SAP Commerce Cloud UI 无头电商，即 Headless Commerce 的架构。前端电商店面，同 SAP Commerce Cloud 后盾外围性能齐全解耦，二者通过 API 交互。这样，购买了 SAP Commerce Cloud 的客户，应用 Commerce Cloud 提供的 OCC API 和开源的 SAP Spartacus 框架，能够通过二次开发的形式，构建出外观可能体现企业品牌魅力的举世无双的电商店面。

Jerry 是开发人员而不是用户体验工程师，因而没有能力从乐高这个店面外观的设计格调角度给大家分享一些干货，只能从 SAP Commerce Cloud UI 二次开发的层面，给大家介绍该店面背地的一些实现细节。

关上 Chrome 开发者工具，依据 Elements 面板的 app-root 和 cx-storefront 元素，立刻能分辨出该店铺界面开发基于 SAP Spartacus(Angular 版本号 8.2.13)，而不是传统的 JSP Accelerator. 对于这两种开发电商店铺技术的区别，在 Jerry 的文章 Jerry 在 2020 SAP 寰球技术大会的分享：SAP Spartacus 技术介绍的文字版 里有介绍。

上图红色区域即 app-root 的子节点内，蕴含了 cx-storefront 及后辈节点。然而咱们在 Chrome 开发者工具 network 里察看，发现服务器返回给浏览器的初始页面里，app-root 节点内是空的，这阐明以后我这次的拜访场景是客户端渲染，即浏览器收到服务器发送的仅仅蕴含空 app-root 节点的网页，而后浏览器端执行 Angular 框架代码，将残缺的页面源代码渲染进去。

而在服务器端渲染场景下，节点 app-root 的内容是在服务器端生成结束后再返回给浏览器。

比照下图服务器端渲染的场景，浏览器从服务器端承受到的网页源代码里，app-root 节点内的内容曾经全副渲染结束：

两种渲染形式各有优缺点和利用场合，在 Jerry 的文章 SAP UI 渲染模式：客户端渲染 VS 服务器端渲染 里有具体介绍。

在 head 节点上面，有一个重要的 meta 元素，用于保护该店铺同 SAP Commerce Cloud 后盾交互的明细，name 为 occ-backend-base-url, 值为 API Endpoint.

因而，当咱们浏览器里关上乐高购物网站时，Chrome 开发者工具里能察看到发向该 API Endpoint 的一个 HTTP 调用。这个 API 调用向 Commerce Cloud 询问，以后页面 (ID 为 homepage)，应该显示哪些内容插槽 (Content Slots) 和组件(Components).

对于 SAP Commerce Cloud UI 页面布局的内容插槽和组件，在 Jerry 之前的文章 谈谈 SAP 产品 UI 开发中的组件概念 里有所介绍。

SAP Commerce Cloud 的内容管理员 (Content Management System Administrator) 在 Backoffice CMS 控制台里，定义 homepage 应该显示哪些 Content Slots，以及这些 Slots 里应该显示哪些组件。

这些内容信息保护并存储在 SAP Commerce Cloud 后盾，通过 API 的形式裸露给 Commerce Cloud 店铺，后者依据这些信息进行 Angular 层面的页面渲染。

下图这个 API 调用的响应，阐明乐高的 homepage，也是重用了 SAP Commerce Cloud 大部分规范的内容插槽即 Section1，Section2A，Section2B，Section2C 等等：

只不过从搁置到这些规范插槽里的组件名称能够看出，乐高做了定制化开发。这些新的组件，命名加上了 Lego 的前缀。

如果想晓得每个内容插槽里到底显示了哪些内容，在 Chrome 开发者工具里查看 cx-page-slot 节点上面的内容即可：

head 区域的其余 meta 元素还包含提供了用于反对搜索引擎优化的元数据信息。比方呈现在搜索引擎后果列表里的形容信息，就保护在 meta description 的 content 字段内。

对于 SAP Commerce Cloud UI 对搜索引擎优化的反对，请参考 Jerry 的文章 对于 SAP 产品 UI 的搜索引擎优化 SEO – Search Engine Optimization.

在乐高店铺注册一个帐号并登录后，在 Chrome 开发者工具里查看 Local Storage，发现仍旧采纳了 SAP Spartacus 默认的基于 OAuth2 的用户认证和会话管理机制，在 Jerry 文章 SAP Commerce Cloud UI 的用户会话治理 里有具体介绍。

在店铺上点击任意一个乐高产品的图片后，进入产品明细页面，抄下该页面的 url：

https://lego.yellowblocks.me/…

Jerry 之前的文章 SAP Commerce Cloud (电商云) 路由门路的自定义配置与开发 已经介绍过 SAP Commerce Cloud UI 页面路由配置逻辑。

尽管乐高店铺应用的是构建之后的生产版本，Angular 代码中的类名和变量名在该版本中被混同化成繁多的字母，然而代码中的 JSON 对象名称和字段仍放弃不变，因而咱们依然能够从中找到 SAP Spartacus 默认的路由配置。

Chrome 开发者工具里关上 main.js 代码块，外面蕴含了 Lego Spartacus 我的项目二次开发我的项目构建后生成的 JavaScript 代码。依据关键字 routing 搜寻源代码，找到 Spartacus 默认的路由配置。

定位到产品明细页面的路由配置：

product/:productCode/:name

其中 product 为动态门路片段，productCode 和 name 相当于占位符，其后面的冒号标识二者为路由参数，运行时会被产品明细页面的产品模型的同名字段填充。

当然本文介绍的只是 SAP Commerce Cloud UI 基于 Spartacus 进行二次开发的冰山一角，心愿大家对 SAP 电商云无头电商这种前后端拆散的设计思路有一个直观的意识。如果想零碎学习 SAP Spartacus 开发，能够从咱们团队公布在 Github 上的帮忙文档开始动手。感激浏览。

https://sap.github.io/spartac…

更多浏览