JerryWang汪子熙的博客_Spartacus二次开发

SAP 电商云登录界面如何增添新的字段

登录界面的Componentselector：cxupdateprofile!(https://s4.51cto.com/images/blog/202204/26085337_62674291599d746488.png?xossprocess=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y

控件

typescript

表单

原创 2022-04-26 08:53:55 78 阅读私藏项目实操分享

SAP Spartacus的自定义静态页面

新建一个StaticRouteModule：import { CommonModule } from '@angular/common';import { NgModule } from '@angular/core';import { RouterModule, Routes } from '@angular/router';import { CmsPageGuard } from '@spar

html

原创 2022-04-21 09:33:07 50 阅读

如何让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...

占位符

大括号

其他

原创 2022-04-15 13:56:54 41 阅读

如何通过简单的配置，实现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...

外链

配置项

上传

其他

原创 2022-04-15 13:56:51 52 阅读

如何定制化SAP Spartacus的页面路由Route

# Created Wang, Jerry, last modified on Jul 01, 2016![clip

自定义

typescript

字段

原创 2022-04-15 13:52:33 38 阅读

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...

提示信息

html

其他

原创 2022-04-15 13:43:45 72 阅读

通过 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...

css

html

github

其他

原创 2022-04-15 13:43:44 53 阅读

如何定制化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...

css

其他

原创 2022-04-15 13:43:43 30 阅读

使用 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...

硬编码

控件

html

其他

原创 2022-04-15 13:40:13 33 阅读

如何定制化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...

其他

原创 2022-04-15 13:40:12 62 阅读

SAP Spartacus如何使用自定义的Cart Service

新建一个CartService，将AcmtiveCartService设置成父类：import { Injectable } from '@angular/core';import { ActiveCartService } from '@spartacus/core';@Injectable()export class CustomerCartService extends ActiveCart

自定义

父类

原创 2022-04-15 10:40:57 61 阅读

如何通过outlet在SAP Spartacus的产品明细页面插入自定义UI

创建一个新的module：ng g m myOutlets再基于该module创建一个Component，注意module的命名规范：在生成的MyOutletsModule里，导入OutletRefModule：在新建的module的Component html里，输入如下html代码：<ng-template cxOutletRef="ProductDetailsPageTemplate" cxOutletPos="before"> Jerry Plac

html

命名规范

公众号

其他

原创 2022-04-12 17:21:58 47 阅读

如何找到SAP Spartacus UI可以扩展的outlet

文件位置：C:\Code\SPA\spartacus\projects\storefrontlib\src\layout\main\storefront.component.html

html

sed

ide

其他

原创 2022-04-12 17:21:57 47 阅读

使用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的原创文章，请关注公众号"汪子熙":.

html

ide

自定义

typescript

其他

原创 2022-04-12 17:21:57 72 阅读

如何在 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> bef

自定义

json

公众号

其他

原创 2022-04-12 17:21:57 66 阅读

如何在SAP Spartacus自定义Component里消费数据

直接在自定义Component里使用data来访问Component数据：begin of my image!<img [src]=" 'https://spartacus-dev0.eastus.cloudapp.azure.com:9002' + (data.data$ | async).media.desktop.url " />end of my image!前提是需要将data注入到自定义

自定义

数据

公众号

其他

原创 2022-04-12 17:21:56 57 阅读

在SAP Spartacus产品明细页面用outlet显示自定义数据

首先创建一个新的Angular module和Component：这个新的module，因为要使用Outlet功能，所以需要从@Spartacus/storefront里导入OutletRefModule，以及导出我们自己实现的MyOutletsComponent以便让外界消费。MyOutletsComponent的实现：在构造函数里注入currentProductService, 调用getProduct方法异步读取当前product属性，存储在属性product$里：在这个Componen

html

json

公众号

其他

原创 2022-04-12 17:21:56 32 阅读

SAP Spartacus 的 Banner Component 请求

我在我的自定义Component里将observable数据用console.log打印出来：这些banner的typecode都为SimpleResponsiveBannerComponent：

数据

自定义

数据源

其他

原创 2022-04-12 17:21:55 50 阅读

使用ConfigModule.withConfig替换SAP Spartacus标准Component

思路为如下示意图：新建一个Component，将自定义UI放在里面：在app module里，使用如下代码，将CMS Component的SimpleResponsiveBannerComponent替换成我们自定义的MycomComponent：注意，第46行的SimpleResponsiveBannerComponent，是从Chrome开发者工具network标签页里的Page请求response里的Component typecode拷贝而来的：最后的运行时效果：运行时，Spar

构造函数

自定义

chrome

其他

原创 2022-04-12 17:21:55 67 阅读

SAP Spartacus里使用Observable访问Component数据

在自定义Component的constructor里，无法直接访问通过构造

数据

自定义

前后台交互

原创 2022-04-12 17:13:06 38 阅读

使用SAP Spartacus快速创建一个电商店铺网站

可以采用StackBlitz WebIDE在线创建：也可以采用Angular cli

ide

公众号

命令行

原创 2022-04-12 17:12:11 43 阅读

SAP Spartacus如何创建自定义route页面

新建一个route module：基于这个route module创建一个新的Component：在新建的module里，使用RouterModule定义一个新的路由规则：import { CommonModule } from '@angular/common';import { NgModule } from '@angular/core';import { RouterModule, Routes } from '@angular/router';import { CustomPage

公众号

其他

原创 2022-04-12 17:06:23 39 阅读

自定义SAP Spartacus Cart界面

文件目录：@Spartacus-storefront:把这个B2cStorefrontModule改成Storefront

chrome

自定义

数据

原创 2022-04-12 17:02:48 62 阅读

SAP Spartacus产品页面的normalizer

新建一个product-name-normalizer.ts文件，源代码如下：import { Injectable } from '@angular/core';import { Converter, Occ, Product } from '@spartacus/core';@Injectable()export class ProductNameNormalizer implements Converter<Occ.Product, Product>{ convert(s

ide

公众号

其他

原创 2022-04-12 16:56:06 38 阅读

如何自定义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我们可以在应用程序里复写这个配置，代码如下：

git

公众号

应用程序

其他

原创 2022-04-12 16:56:05 47 阅读

使用SAP Spartacus的route给标准页面维护alias入口

源代码：const CUSTOM_ROUTES: Routes = [ { path: 'custom', component: CustomPageComponent, canActivate: [CmsPageGuard] }, { path: 'faq-alias', component: PageLayoutComponent, canActivate: [CmsPageGuard], data: { pageLabel: 'faq' } }]

公众号

超链接

其他

原创 2022-04-12 16:56:05 25 阅读

自定义SAP Spartacus的产品搜索API参数 - Product Search

SAP Spartacus默认采用的产品搜索url配置在这个文件里：C:\Code\SPA\spartacus\projects\core\src\occ\adapters\product\default-occ-product-config.ts根据productSearch关键字进行搜索：看看OccConfig的类型：发现它是扩展自SiteContextConfig：在应用程序里，我们可以用如下代码覆盖这个配置：ConfigModule.withConfig({ back

搜索

公众号

自定义

其他

原创 2022-04-12 16:56:05 39 阅读

SAP Spartacus路由参数的默认配置

我在自定义的module里通过如下代码定义了一个路由参数： ConfigModule.withConfig({ routing: { routes: { product: { paths: [ 'jerrycamera/:manufacturer/:name/:productCode', 'cameras/:name/:productCode'], pa

公众号

自定义

其他

原创 2022-04-12 16:56:04 28 阅读

SAP Spartacus自定义Component的Not found问题

同样是自定义route指向的自定义Component，custom和contact的行为不下：要获取更多Jerry的原创文章，请关注公众号"汪子熙":...

自定义

公众号

原创 2022-04-12 16:53:22 82 阅读

获取SAP Spartacus当前显示产品json数据的又一办法

app Component里注入current Product service：实现代码：import { Component, OnInit } from '@angular/core';import { ContentSlotComponentData } from '@spartacus/core';import { CurrentProductService } from '@spartacus/storefront';import { DebugConfig } from './app

git

wdl

html

其他

原创 2022-04-12 16:52:06 28 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	在线客服	网站地图	意见反馈

开源基础软件社区	51CTO学堂
51CTO	汽车开发者社区

51CTO博客

汪子熙的 SAP 技术分享

SAP 电商云登录界面如何增添新的字段

SAP Spartacus的自定义静态页面

如何让SAP Spartacus的非英语页面正常显示

如何通过简单的配置，实现SAP Spartacus的guest checkout需求

如何定制化SAP Spartacus的页面路由Route

SAP Spartacus 的基于outlet 的页面扩展

通过 SAP Spartacus 的 Component 映射机制，更改默认购物车 Cart 页面

如何定制化SAP Spartacus的购物车图标

使用 outlet 在SAP Spartacus 的页面添加自定义 HTML 元素的一个例子

如何定制化SAP Spartacus的页面布局

SAP Spartacus如何使用自定义的Cart Service

如何通过outlet在SAP Spartacus的产品明细页面插入自定义UI

如何找到SAP Spartacus UI可以扩展的outlet

使用outlet在SAP Spartacus中添加自定义UI

如何在 SAP Spartacus 自定义 UI 里使用标准 UI 的上下文数据 - let 关键字的用法

如何在SAP Spartacus自定义Component里消费数据

在SAP Spartacus产品明细页面用outlet显示自定义数据

SAP Spartacus 的 Banner Component 请求

使用ConfigModule.withConfig替换SAP Spartacus标准Component

SAP Spartacus里使用Observable访问Component数据

使用SAP Spartacus快速创建一个电商店铺网站

SAP Spartacus如何创建自定义route页面

自定义SAP Spartacus Cart界面

SAP Spartacus产品页面的normalizer

如何自定义SAP Spartacus 产品明细的url pattern

使用SAP Spartacus的route给标准页面维护alias入口

自定义SAP Spartacus的产品搜索API参数 - Product Search

SAP Spartacus路由参数的默认配置

SAP Spartacus自定义Component的Not found问题

获取SAP Spartacus当前显示产品json数据的又一办法