Spartacus二次开发
文章平均质量分 51
SAP Spartacus 是一个基于 Angular 的SAP Commerce Cloud 前端实现框架
汪子熙
Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今。Jerry 是 SAP 社区导师,SAP 中国技术大使。在长达16年的 SAP 产品开发生涯里,Jerry 曾经先后参与 SAP Business ByDesign,SAP CRM,SAP Cloud for Customer,SAP S/4HANA,SAP Commerce Cloud(电商云)等标准产品的研发工作。
Jerry 工作中使用 ABAP, Java, JavaScript 和 TypeScript 进行开发, 对包括 SAP UI5 在内的多款 SAP 自研框架有深入的研究。
展开
-
SAP Spartacus checkout 流程的扩展(extend)实现介绍
Spartacus中的 checkout 特性是CMS驱动的,这意味着 checkout 流中的每个页面都基于CMS页面、slots 和 Component。因此,开发可以更改每个页面的内容、添加新组件、将 checkout 转换为单步骤签出,或者在店面应用程序中只需要少量配置就可以创建非常复杂的多步骤 checkout 工作流。在 checkout 过程中,通常有从一个步骤到另一个步骤的链接,这就是将每个 checkout 页面注册为店面配置中的 的原因。checkout 的默认路由配置如下:上述代码原创 2022-07-06 22:46:54 · 242 阅读 · 0 评论 -
SAP Spartacus 自定义 theme 实现思路
StackOverflow 讨论一个例子。/* You can add global styles to this file, and also import other style files */$styleVersion: 3.2;// change theme-colors here$primary: #38a8ae !default;$secondary: #148181 !default;$success: #5dac06 !default;$danger: #e51f34原创 2022-04-06 11:09:18 · 250 阅读 · 0 评论 -
SAP 电商云 Spartacus UI 如何自定义 SeoMetaService
在 app.module.ts 里: { provide: SeoMetaService, useExisting: CustomSeoMetaService },使用 useExisting 以避免额外的实例创建。然后实现 CustomSeoMetaService:@Injectable({ providedIn: 'root'})export class CustomSeoMetaService extends SeoMetaService {..原创 2021-12-10 09:11:55 · 445 阅读 · 0 评论 -
如何在 SAP Spartacus 产品明细页面添加自定义 UI
产品明细页面 Product Detail Page,简称 PDP.首先在页面上找到 Component selector:cx-tab-paragraph-container:对应的 Angular Component 名称:TabParagraphContainerComponent四个 button 之后,在 active div 里,是 cx-product-details-tab:其 Component:ProductDetailsTabComponent对应的 CMS Compon原创 2021-09-27 17:26:34 · 267 阅读 · 0 评论 -
以 library 方式启动的 SAP Spartacus Storefront,如何手动实现 User 模块的延迟加载
首先了解 SAP Spartacus Storefront 是如何导入 feature module 的。本文写作版本:Spartacus-core:3.4.1AppModule->SpartacusModule:SpartacusModule-> SpartacusFeaturesModule:所以,在 SpartacusFeaturesModule 里,导入所有需要的 feature module:在一个正常工作的 Storefront 里,查看 Account/User 对应的原创 2021-08-23 10:57:19 · 257 阅读 · 0 评论 -
SAP Spartacus Register 页面为空白的解决方案
症状如下图:到一个正常工作的 Spartacus 页面,找到注册用户的 selector 为 cx-register:该 Component 位于 RegisterComponentModule:在我的 AppModule 里导入 RegisterComponentModule 后,问题解决。更多Jerry的原创文章,尽在:“汪子熙”:...原创 2021-08-22 14:33:57 · 377 阅读 · 0 评论 -
使用组件化开发思路替换 SAP Spartacus 的 Logo
简单来说,组件是应用程序的任何部分,可以在逻辑上分组并被视为单一元素,理想情况下可以作为应用程序其余部分的构建块重用。这个组件中可能有其他组件,也可能在其他组件中使用,但每个单独的“组件”都是一个独立的东西。例如,您可能有一个在每个页面上都有 logo 的网站。因此,您可以创建一个“标题组件”,然后您可以为每个页面重用该标题组件,而不是从头开始编写代码。这个标题组件可能包含一个“搜索栏组件”和一个“导航栏”组件,它们是它们自己的独立元素,它们在标题中使用,但也可以在站点的其他地方重用。看个具体的例子:我原创 2021-08-11 20:41:45 · 303 阅读 · 0 评论 -
如何从 SAP Spartacus Product Detail 页面,找到其 Angular 实现 Component 的位置
如图:假设我们通过下列 url,打开 SAP Spartacus 一个产品的明细页面,我们想找出是哪个 Angular Component,实现了该明细页面。http://localhost:4200/electronics-spa/en/USD/product/553637/nv10打开 Chrome 开发者工具,查看 Product 明细页面的 HTML 源代码,能找到 cx-page-layout 节点,class 值为 ProductDetailsPageTemplate.因此,Produ原创 2021-05-18 12:05:03 · 363 阅读 · 2 评论 -
如何在SAP Spartacus category 页面里拿到当前的category信息
需求https://stackoverflow.com/questions/59950572/how-to-access-the-current-categorydata-in-a-category-page实现原理AFAIK, currently we do not have anything similar to CurrentProductService for current category.当前 SAP Spartacus 标准实现里,缺乏类似 CurrentProductServi原创 2021-04-01 14:49:29 · 317 阅读 · 0 评论 -
SAP Spartacus的ComponentFactory和ComponentFactoryResolver - 动态添加outlet
新建一个Component:import { Component, ComponentFactory, ComponentFactoryResolver, OnInit } from '@angular/core';import { OutletPosition, OutletService } from '@spartacus/storefront';import { MycomComponent } from './mycom/mycom.component';@Component({ se原创 2020-09-07 17:23:38 · 1184 阅读 · 0 评论 -
使用了SAP Spartacus的一个在线网站:乐高Storefront
网址:https://lego.yellowblocks.me/en-ae/从网站源代码的meta标签,name=occ-backend-base-url和content的值,就能知道这是一个典型的通过SAP Spartacus架设的Storefront:并且,从Chrome 开发者工具 network标签页里看到,HTTP请求包含了渲染好的页面源代码,说明这是一个启用了服务器端渲染(Server Side Rendering, SSR)的SAP电商云Storefront:关于SSR,参考我的文章原创 2021-03-08 12:00:13 · 400 阅读 · 0 评论 -
SAP Spartacus LayoutConfig的配置为何运行时不生效
看个具体的例子:运行时我期望在header区域能看到7个Logo,然而没能按照我期望的工作。看一个配置能够正常工作的例子:再看不能正常工作的例子:配置信息header前面少了一层层级结构:LayoutSlots:在app.module.ts的配置信息里,重新增添上layoutSlots的层级结构,问题消失:完整的配置代码:ConfigModule.withConfig({ layoutSlots: { header: { lg: {原创 2021-03-01 14:40:03 · 404 阅读 · 0 评论 -
SAP Spartacus在某些屏幕尺寸下无法正常工作的原因分析
有个使用SAP Spartacus的客户遇到一个问题:We are getting one issue in our Spartacus application (currently we are on 2.1 version).When we are trying to load checkout-login page with 100% zoom in the browser, it is loading not-found page instead of checkout-login page原创 2021-02-22 11:19:46 · 362 阅读 · 0 评论 -
如何将SAP Spartacus的默认home页面替换成login页面 - ProtectedRoutesService
现状We tried from CMS - we changed the starting-page of site to login page, made homepage as not-default and this brought the login page. However, it’s not refreshing or redirecting to HomePage after successful login.解决方案Is your homepage accessible onl原创 2021-02-22 11:10:11 · 356 阅读 · 0 评论 -
关于自定义的登录机制在SAP Spartacus服务器端渲染(SSR)实施过程中遇到的问题
问题背景某客户使用了第三方的Authentication service来实现Spartacus用户的登录机制:In our project we have integration with MDCIM team who handles login and authorization.This part of code redirects the User to MDCIM URL and once authorization is completed by the User in MDCIM, t原创 2021-02-09 11:46:39 · 402 阅读 · 0 评论 -
SAP Spartacus的自定义静态页面
# Created by Wang, Jerry, last modified on Dec 20, 2014![clipboard1](https://user-images.githubusercontent.com/5669954/59577727-7a9de200-90f7-11e9-90f7-d6cca5ac7b46.png)![clipboard2](https://user-...原创 2019-06-24 17:24:11 · 284 阅读 · 0 评论 -
SAP Spartacus的自定义路由
![clipboard1](https://user-images.githubusercontent.com/5669954/50410582-ea13d280-0834-11e9-9ae3-ec318e226b8b.png)![clipboard2](https://user-images.githubusercontent.com/5669954/50410583-ea13d280-...原创 2019-06-15 18:44:20 · 482 阅读 · 0 评论 -
SAP Spartacus如何使用自定义的Cart Service
![clipboard1](https://user-images.githubusercontent.com/5669954/46937103-f4765b00-d092-11e8-8bf3-2ab5397482c6.png)![clipboard2](https://user-images.githubusercontent.com/5669954/46937104-f4765b00-...原创 2019-06-15 19:05:32 · 720 阅读 · 0 评论 -
如何通过简单的配置,实现SAP Spartacus的guest checkout需求
# Created by Wang, Jerry, last modified on Jun 09, 2016![clipboard1](https://user-images.githubusercontent.com/5669954/36340281-b7db4146-1414-11e8-9332-d240848ce7a5.png)![clipboard2](https://u...原创 2019-06-17 10:54:18 · 443 阅读 · 0 评论 -
如何让SAP Spartacus的非英语页面正常显示
# Created by Wang, Jerry, last modified on Jun 08, 2016![clipboard1](https://user-images.githubusercontent.com/5669954/36244472-414a4d38-1261-11e8-9af4-4ab0da4d7fa1.png)![clipboard2](https://use...原创 2019-06-17 10:54:18 · 362 阅读 · 0 评论 -
如何定制化SAP Spartacus的页面路由Route
# Created by Wang, Jerry, last modified on Jul 01, 2016![clipboard1](https://user-images.githubusercontent.com/5669954/36292210-e9f369f2-130a-11e8-923f-0d067b6360df.png)![clipboard2](https://use...原创 2019-06-17 10:54:18 · 433 阅读 · 0 评论 -
如何定制化SAP Spartacus的页面布局
# Created by Wang, Jerry, last modified on Jun 08, 2016![clipboard1](https://user-images.githubusercontent.com/5669954/36244674-32a7c53e-1262-11e8-9a1f-72b2d85929f2.png)![clipboard2](https://u...原创 2019-06-17 10:54:18 · 502 阅读 · 1 评论 -
如何定制化SAP Spartacus的购物车图标
# Created by Wang, Jerry, last modified on Jun 09, 2016![clipboard1](https://user-images.githubusercontent.com/5669954/36292256-49d8dd8e-130b-11e8-87ce-e60ede9d8ab7.png)![clipboard2](https://use...原创 2019-06-17 10:54:18 · 848 阅读 · 0 评论 -
使用 outlet 在SAP Spartacus 的页面添加自定义 HTML 元素的一个例子
# Created by Wang, Jerry, last modified on Jun 08, 2016![clipboard1](https://user-images.githubusercontent.com/5669954/36244565-c014934e-1261-11e8-8832-42ec1231a16d.png)![clipboard2](https://u...原创 2019-06-17 10:54:18 · 276 阅读 · 0 评论 -
SAP Spartacus 的基于outlet 的页面扩展
# Created by Wang, Jerry, last modified on Jul 01, 2016![clipboard1](https://user-images.githubusercontent.com/5669954/36292167-a13d0b1e-130a-11e8-9bc8-42abc49c3804.png)![clipboard2](https://use...原创 2019-06-17 10:54:18 · 330 阅读 · 0 评论 -
通过 SAP Spartacus 的 Component 映射机制,更改默认购物车 Cart 页面
# Created by Wang, Jerry, last modified on Jun 08, 2016![clipboard1](https://user-images.githubusercontent.com/5669954/36244402-09f63f90-1261-11e8-935b-ef1363659054.png)![clipboard2](https://u...原创 2019-06-17 10:54:18 · 306 阅读 · 0 评论 -
如何自定义SAP Spartacus店铺的购物车图表css风格
如下图所示:打开项目文件夹下的文件style.scss:将如下代码粘贴进去:/* You can add global styles to this file, and also import other style files */$styleVersion: 2.1;@import '~@spartacus/styles/index';:root { --cx-color-primary: blue; --cx-color-secondary: green;}$s原创 2020-09-01 15:06:10 · 959 阅读 · 0 评论 -
使用StackBlitz和SAP Spartacus快速创建电商店铺页面
StackBlitz是一个WebIDE,可以在浏览器里使用SAP Spartacus创建电商网站。简要步骤如下:在package.json里手动添加Spartacus依赖,下图是添加前StackBlitz创建Angular应用后默认生成的Angular依赖:下图是完整依赖,源代码附在后面供大家参考:{ "name": "mystore", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve"原创 2020-09-01 11:27:50 · 716 阅读 · 0 评论 -
如何自定义SAP Spartacus 产品明细的url pattern
在Spartacus源代码的storefrontlib/src/cms-structure/routing/default-routing-config.ts文件里,能看到Spartacus产品页面的默认url为:product加上产品code加上产品名称:一个例子:url如下:http://localhost:4200/electronics-spa/en/USD/product/932577/Digital%20Camera%20Tripod我们可以在应用程序里复写这个配置,代码如下:原创 2020-09-10 16:48:13 · 821 阅读 · 0 评论 -
SAP Spartacus注入自定义的CurrentProductService
import { Component, OnInit } from '@angular/core';import { ActiveCartService, Product } from '@spartacus/core';import { CurrentProductService } from '@spartacus/storefront';import { Observable } from 'rxjs';@Component({ selector: 'app-mycom', temp原创 2020-09-17 22:31:16 · 1050 阅读 · 0 评论 -
SAP Spartacus 自定义 Component 的使用 - SimpleResponsiveBannerComponent
(1) 使用命令行创建一个新的Angular Component:banner Component的实现:通过构造函数参数注入cms Component data.而Component的html实现,只是简单的显示一行字符串:This is a custom banner component(2) 在Custom Module实现里,使用第一个步骤创建的CustomBannerComponent替换原始的cmsComponent:最后运行时的效果如下:要获取更多Jerry的原创文章,请原创 2020-09-01 16:53:38 · 1035 阅读 · 0 评论 -
使用SAP Spartacus快速创建一个电商店铺网站
可以采用StackBlitz WebIDE在线创建:也可以采用Angular cli创建,命令行如下:ng new mystore --style=scss然后使用Spartacus schematics自动添加依赖:打开app.module.ts, 替换B2cStorefrontModule.withConfig方法内的配置为实际的Commerce Cloud后台:import { BrowserModule } from '@angular/platform-browser';i原创 2020-09-01 11:21:58 · 676 阅读 · 0 评论 -
如何在 SAP Spartacus 自定义 UI 里使用标准 UI 的上下文数据 - let 关键字的用法
语法:let-<变量名>自定义UI:<ng-template cxOutletRef="header" cxOutletPos="before"> Jerry Custom Header</ng-template><ng-template cxOutletRef="SimpleResponsiveBannerComponent" cxOutletPos="before" let-jerrymodel> <p>bef原创 2020-09-04 16:39:49 · 1040 阅读 · 0 评论 -
使用outlet在SAP Spartacus中添加自定义UI
Just a simple piece of code to inject your custom UI element to SAP Spartacus via outlet:其中header定义在storefront.component.html里:最后的效果:默认情况下把标准的header区域替换了:如果加上属性值cxOutletPos=“after”, 则不覆盖header,而是放到标准header的后面:效果如下:要获取更多Jerry的原创文章,请关注公众号"汪子熙":.原创 2020-09-04 16:48:13 · 1115 阅读 · 0 评论 -
如何通过outlet在SAP Spartacus的产品明细页面插入自定义UI
创建一个新的module:ng g m myOutlets再基于该module创建一个Component,注意module的命名规范:在生成的MyOutletsModule里,导入OutletRefModule:在新建的module的Component html里,输入如下html代码:<ng-template cxOutletRef="ProductDetailsPageTemplate" cxOutletPos="before"> <p>Jerry Plac原创 2020-09-04 17:45:34 · 1065 阅读 · 0 评论 -
如何找到SAP Spartacus UI可以扩展的outlet
文件位置:C:\Code\SPA\spartacus\projects\storefrontlib\src\layout\main\storefront.component.html原创 2020-09-04 16:51:10 · 1030 阅读 · 0 评论 -
在SAP Spartacus产品明细页面用outlet显示自定义数据
首先创建一个新的Angular module和Component:这个新的module,因为要使用Outlet功能,所以需要从@Spartacus/storefront里导入OutletRefModule,以及导出我们自己实现的MyOutletsComponent以便让外界消费。MyOutletsComponent的实现:在构造函数里注入currentProductService, 调用getProduct方法异步读取当前product属性,存储在属性product$里:在这个Componen原创 2020-09-07 16:29:39 · 637 阅读 · 0 评论 -
如何在SAP Spartacus自定义Component里消费数据
直接在自定义Component里使用data来访问Component数据:<p>begin of my image!</p><img [src]=" 'https://spartacus-dev0.eastus.cloudapp.azure.com:9002' + (data.data$ | async).media.desktop.url " /><p>end of my image!</p>前提是需要将data注入到自定义原创 2020-09-07 16:34:36 · 685 阅读 · 0 评论 -
SAP Spartacus 的 Banner Component 请求
我在我的自定义Component里将observable数据用console.log打印出来:这些banner的typecode都为SimpleResponsiveBannerComponent:原创 2020-09-07 16:37:30 · 716 阅读 · 0 评论 -
SAP Spartacus里使用Observable访问Component数据
在自定义Component的constructor里,无法直接访问通过构造函数参数注入的data数据:正确的访问方式:ngOnInit(): void { this.data.data$.subscribe((data) => { console.log(data); console.log(data) }); }Component的数据例子如下:如果把private data的数据类型改成CmsComponentData, 就可以在d原创 2020-09-07 16:42:45 · 722 阅读 · 0 评论