SAP 电商云 Spartacus UI 的 urlParameter 配置原理
有个同事问我如下的问题: 本地启动 Spartacus 时,打开 localhost:4200, 默认会重定向到 base site,并且 url 自动变更成:http://localhost:4200/electronics-spa/en/USD/ 如何做到不显示 localhost:4200 后面的 electronics-spa/en/USD/ 呢? 在文件 projects\st
SAP 电商云 Spartacus UI 的 feature module 设计原理
我们以一个具体的例子来说明该原理。 我们查看某 integration library 目录下的 public_api.ts: 关注 module: 这个 lib 包含的 module 为 EpdVisualizationModule 以及对应的配置:EpdVisualizationConfig 注意第八行 import 的 VisualPickingTabModule,这个才是包
SAP Commerce Cloud 产品明细页面设计概述
url:http://localhost:4299/electronics-spa/en/USD/jerryproduct/300938/Photosmart%20E317%20Digital%20Camera template:ProductDetailsPageTemplate 17个 content slot: 我关心的是这个 slot:TabsSlot CMSTabParagrap
SAP Commerce Cloud SmartEdit 学习笔记
官方文档 SmartEdit 是一个可插拔的 JavaScript 框架,附带一个 UI,使开发人员能够管理现有的网页。 SmartEdit 生态系统由共同提供 SmartEdit 产品的 modules 和 extensions 组成。 SmartEdit 是 SmartEdit 模块中一个前端驱动的可扩展应用程序。 CMS REST 调用的 SAP Commerce Cloud 实现是
SAP Commerce Cloud 里的 Media 概念简述
SAP Commerce 中的媒体项目不是物理文件,而是对该文件的引用。 SAP Commerce 中的媒体项是一个容器对象,其中包含对文件的引用。 也就是说,SAP Commerce 中的媒体项不是文件本身,而是对文件的引用。 实际文件可以存储在 SAP Commerce 中,也可以位于远程服务器或系统上。 媒体项目具有标识符并分配给 catalog version. 标识符用于逻辑引用,例
使用自定义 HTTP Interceptor 记录 SAP Spartacus 发送的 OCC API 以及响应
最后的效果: 请求的方法类型和 url 都被记录了下来,同响应一起。 设置断点来观察自定义 HTTP interceptor 运行时原理: 我们自定义的 intercept 也是通过依赖注入的方式被注入到 httpInterceptor 的调度器里。 首先把 method 和 urlWithParams 从 request 里提取出来: 返回的 Observable
在 SAP 电商云 Spartacus UI 里使用自定义配置控制 UI 调试的开关
在 page-slot.module.ts 里,定义一个配置对象 ConfigUIDebug. 这个配置对象定义在 cms-component-data.ts 的 ConfigUIDebug 对象里,包含一个 boolean 类型字段:switchOn 通过: providers: [provideDefaultConfigFactory(jerryConfigFactory)],
关于 SAP 电商云 Spartacus UI 路由 routes 配置的数据源问题
准则 content page routes 来自后台,而 product,category 的配置位于 Spartacus 层。 无论如何,都允许在 Spartacus 层修改。 例如 product route 配置,位于 default-routing-config.ts: 以 myCompany 为例: http://localhost:4299/powertools-spa
SAP 电商云 Spartacus 产品明细页面的 pageContext 如何获取的?
调试入口:this.routingService.getNextPageContext() 这个 page context 直接从 store 里读取的,靠调试 selector 是拿不到的。 我们以前学习过,当 Angular router 框架成功将浏览器地址栏的 url,匹配到开发人员用 RouterModule.forChild 传入的 routes 数组时,会抛出 RoutesR
SAP 电商云 Spartacus 产品明细页面的 OCC API 是如何被触发的
当访问如下 url 时,http://localhost:4200/powertools-spa/en/USD/jerryproduct/3755211/PSR%2010.8%20LI 我们能看到如下的 OCC API 调用: https://<host>:9002/occ/v2/powertools-spa/cms/pages?pageType=ProductPage&c
SAP 电商云 Accelerator 和 Spartacus UI 的工作机制差异
SAP Commerce Cloud Accelerator UI 基于 JSP,属于服务器端渲染技术,Commerce 服务器将渲染好的 HTML 页面发送给客户端。 当用户在当前页面点击某些元素,要跳转到新的 UI 时,这些新的 UI 和当前页面是由不同的 page 实现的。因此这些跳转操作,会触发浏览器向服务器发起新的页面请求(page request). 客户端收到服务器发
SAP 电商云 Spartacus UI SSR 单元测试里的 callFake
callFake 的接口定义可以在 jasmine.js 里找到: SpyStrategy.callFake, 返回 Spy 对象。 spy1 即 originalEngine,二者指向同一个对象实例: 只要 spy1 即 originalEngine 这个函数被调用,则返回 callFake 指定的 mock 版本的实现:return originalEngineInstanc
SAP 电商云 Spartacus UI 页面布局的设计原理
Spartacus 每个 UI 划分成不同的区域 section,每个区域由若干个 slots 组成。每个 slot 可以包含一个或多个 CMS Component. 我曾经写过一篇 文章 详细介绍过。 以 homepage为例,其实现的 HTML 位置:projects\storefrontlib\src\layout\main\storefront.component.html 看这个
SAP Spartacus Accessibility E2E 端到端测试
原文 Spartacus 中的可访问性有自己的一套端到端测试,这些测试位于 projects/storefrontapp-e2e-cypress/cypress/integration/accessibility/tabbing-order.e2e-spec.ts。 其中包括需要用户登录的测试(例如,对于我的帐户页面和购物车),以及不需要用户登录的测试(例如对于主页和登录页面) )。 目
如何在 SAP Commerce Cloud Portal 构建和部署 SAP Spartacus Storefront
Commerce Cloud portal: CCV2 部署包含构建和部署两个子步骤。 首先登录 cloud portal,创建一个新 build: 点击 create 按钮: 输入构建的名称和托管要构建的代码库的 git 分支。名称只是一个标签,但是,我们按照惯例使用名称是为了更容易了解构建包含的内容。约定如下: spartacus-[hybris_patch_version]
如何获取 SAP Commerce Cloud Spartacus UI 购物车 Cart 的加载状态
在 Storefront AppModule 构造函数里注入 ActiveCartService: private cartService: ActiveCartService, 调用其 API: const loading$ = this.cartService.getLoading(); loading$.subscribe((data) => console.l
SAP Commerce Cloud Product Review 的添加逻辑
点了 Write Review 按钮之后,调用 ProductReviewService 的 add 方法: 该方法 dispatch 一个新的 action: override the ProductReviewService to dispatch a custom action to an effect they would create with the logic t
如何给 SAP Spartacus Storefront 创建新的页面
Creating New Pages and Components Spartacus 是一个单页面的应用程序,但它仍然使用页面的概念来区分应用程序内的不同视图。 Spartacus 页面来自 CMS,由插槽和组件构成。 页面包含插槽,插槽包含组件。 为了组织公共插槽和组件,Spartacus 支持页面模板。 页面模板包含布局以及可全局使用的组件,例如页眉和页脚部分。 Spartacus 从
一步步将 SAP Commerce Mock 应用部署到 SAP BTP Kyma Runtime
The Kyma mock application contains lightweight substitutes for SAP applications to ease the development and testing of extension and integration scenarios based on Varkes. 什么是 Kyma Mock 应用?它们是 S
第三方外部 Saas提供商如何跟使用 SAP 系统的客户进行对接接口集成
最近收到一位朋友的咨询: 作为第三方外部 Saas提供商,想要跟使用 SAP 系统的客户进行对接接口集成,需要了解哪些 SAP 的版本?和常见对接技术语言,方式,协议,注意事项? 首先这个问题范畴确实比较大。随着近些年来 SAP 向云端转型,收购了很多公司的云产品,SAP 的产品线不再像本世纪初那样主要由 基于 ABAP 技术栈的产品组成。 我们可以首先把 SAP 产品按部署方式,分为基