SAP 电商云 Spartacus UI 根据 url 设置 site context 的具体例子

简介: SAP 电商云 Spartacus UI 根据 url 设置 site context 的具体例子

connectors

包含:

  • site.connector.ts
  • site.adapter.ts
  • converters.ts

converters.ts

还是从 site-context 平级目录导入:

创建几个 normalizer 的 injection token:

convertor 负责把数据模型从后台格式转换成 UI 模式:

site.adapter.ts ( SiteAdapter)

是一个纯虚函数:

在 core 的 occ 文件夹里,SiteAdapter 被 OCCSiteAdapter 实现:

site.connector.ts (SiteConnector)

使用了通过构造函数注入的 SiteAdapter 对应的方法。

events

这里出现了第二个 module:

site-context-event.module.ts

空的 module:

site-context-event.builder.ts (SiteContextEventBuilder)

全部的导入信息:

这里注入了标准的 ActionSubject,来自 @ngrx/store

register 方法

  protected register(): void {
    this.registerSetLanguage();
    this.registerSetCurrency();
  }

registerSetLanguage

下面是详细的调试细节。

ActionSubject 通过构造函数参数注入:

运行时,set Active Language action 触发了:

payloaden

在 language.service.ts 里,抛出了 action:SiteContextActions.SetActiveLanguage(isocode)

为什么 event builder 可以接收到呢?通过这个 OfType

en 参数似乎是从浏览器地址栏 url 提取的:

我们可以通过定义上下文属性(如 baseSite、语言和货币)来配置应用程序。当我们将这些属性的值附加到店面URL时,Storefront 将基于这些值进行配置。


例如,当用户访问https://localhost:4200/electronics-spa/en/USD/时,应用程序将加载electronic -spa base-site,将站点语言设置为英语(en),并将货币设置为美元(USD)。


上下文属性还为语言和货币下拉列表设置默认值,可以使用它们动态地更改店面的上下文。


默认情况下,context 不会出现在Spartacus的店面URL中。


有的客户可能希望有上下文出现在店面URL,作为一种优化SEO的方式,或为维护URL与以前的店面的兼容性。例如,客户可能希望搜索机器人根据URL中的语言和货币对店面的不同版本进行分类。或者客户可能从另一个店面迁移到Spartacus,该店面URL中包含上下文,您希望保持以前建立的页面排名。


要在URL中包含上下文,需要在app.modules.ts的context属性中添加urlParameters属性。示例如下:

 context: {
    baseSite: ['electronics-spa'],
    urlParameters: ['baseSite', 'language', 'currency']
  },
相关文章
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
29 0
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
17 0
|
2月前
|
安全 开发者
什么是 SAP ABAP 调试器里的 TRFC Block Sending 设置
什么是 SAP ABAP 调试器里的 TRFC Block Sending 设置
22 0
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
33 0
|
2月前
|
JSON 前端开发 测试技术
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
SAP UI5 sap.ui.core.util.MockServer.simulate 方法介绍
21 0
|
2月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
21 0
|
4月前
|
测试技术
Cypress如何设置全局URL?
Cypress如何设置全局URL?
|
28天前
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
16 1
什么是 SAP ABAP 里的 Subscreen
|
28天前
|
网络架构 开发者 UED
Spartacus 2211 的 provideOutlet 方法扩展 UI
Spartacus 2211 的 provideOutlet 方法扩展 UI
12 0
Spartacus 2211 的 provideOutlet 方法扩展 UI
|
2月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
15 0