SAP Spartacus Site Context 实现专题页面(七)

简介: SAP Spartacus Site Context 实现专题页面

site-context-url-serializer.ts (SiteContextUrlSerializer)

通过这种方式定义一个接口,表示 url parameters 支持多个。

export interface SiteContextUrlParams {
  [name: string]: string;
}

下面的代码演示了如何使用装饰器设计模式,对 Angular 标准的 UrlTree 进行修饰:

export interface UrlTreeWithSiteContext extends UrlTree {
  siteContext?: SiteContextUrlParams;
}

这种策略就是首先定义新增的字段 siteContext 对应的数据类型。

urlExtractContextParameters

从输入的浏览器地址栏 url 里,提取 context 参数列表:

7.png

使用正则表达式分离出 url 和 query 两部分:

8.png

urlEncodingParameters

这是一个 getter:

  /**
   * Names of site context parameters encoded in the URL
   */
  protected get urlEncodingParameters(): string[] {
    return this.siteContextParams.getUrlEncodingParameters();
  }

从注释看,包含的仅仅是参数名称。通过注入的 siteContextParams 取得。

后者从全局配置对象里取得:

  getUrlEncodingParameters(): string[] {
    return (this.config.context && this.config.context.urlParameters) || [];
  }

这个 getter 的值为一个字符串数组,包含了三个元素:baseSite,language 和 currency

image.png

拿到 baseSite 在 config 对象里配置的值:

image.png

最后结果:


image.png

parse

它返回由已识别参数缩短的给定 URL 的 UrlTree,但将参数值保存在 UrlTree 的自定义属性中:siteContext

这个方法被 Angular Router 框架调用。

image.png

将 site context 保存到 urlTree 结构的自定义属性字段 siteContext 上:

image.png

最后 parse 完成的结果:

11.png

serialize

也会被 Angular Router 框架调用。

传入的 Urltree 数据结构,已经包含了 siteContext 自定义属性的值:

12.png

  /**
   * Returns the site context parameters stored in the custom property
   * of the UrlTree: `siteContext`.
   */
  urlTreeExtractContextParameters(
    urlTree: UrlTreeWithSiteContext
  ): SiteContextUrlParams {
    return urlTree.siteContext ? urlTree.siteContext : {};
  }

最后序列化之后的 url:

13.png

目录
相关文章
|
5月前
|
缓存 前端开发 JavaScript
Spartacus SSR 使用场景里,CDN 应该 cache 哪些类型的页面
Spartacus SSR 使用场景里,CDN 应该 cache 哪些类型的页面
|
5月前
|
设计模式 API 数据处理
Spartacus 在 PDP 页面点击 Add to Cart 之后,读取最新 product 数据的设计
Spartacus 在 PDP 页面点击 Add to Cart 之后,读取最新 product 数据的设计
|
5月前
|
前端开发 JavaScript 安全
Spartacus product summary 页面的设计原理
Spartacus product summary 页面的设计原理
|
5月前
|
存储 供应链 调度
Spartacus 在 Back-Office 修改了产品的价格和描述信息后,修改会反应在 PDP 页面上吗
Spartacus 在 Back-Office 修改了产品的价格和描述信息后,修改会反应在 PDP 页面上吗
|
5月前
|
搜索推荐 UED
Spartacus demo site 选择关键字激活 product variant configuration
Spartacus demo site 选择关键字激活 product variant configuration
|
5月前
|
前端开发 搜索推荐 开发者
Spartacus empty cart 页面的显示逻辑
Spartacus empty cart 页面的显示逻辑
|
5月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
|
5月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
|
5月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
|
12月前
|
缓存 负载均衡 前端开发
SAP Spartacus 和 Sticky session 相关的话题
SAP Spartacus 和 Sticky session 相关的话题