SAP Spartacus Multi-Site Configuration 功能的设计与实现

举报
汪子熙 发表于 2022/06/28 18:37:50 2022/06/28
【摘要】 官方链接CMS 中定义的每个站点都有自己的上下文,其中包括基本站点 ID、语言属性和货币属性。 上下文还定义了这些属性如何在 URL 中持久化。 Static Multi-Site Configuration您可以通过定义上下文属性(例如基本站点、语言和货币)来配置您的应用程序。 当您将这些属性的值附加到店面 URL 时,店面将根据这些值进行配置。例如访问 https://localhost...

官方链接

CMS 中定义的每个站点都有自己的上下文,其中包括基本站点 ID、语言属性和货币属性。 上下文还定义了这些属性如何在 URL 中持久化。

Static Multi-Site Configuration

您可以通过定义上下文属性(例如基本站点、语言和货币)来配置您的应用程序。 当您将这些属性的值附加到店面 URL 时,店面将根据这些值进行配置。

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

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

site 的属性:theme,channel 和 language

content catalog:

默认显示的产品:

配置现在放到 C:\Code\SPA\spartacus\projects\storefrontapp\src\app\spartacus\spartacus-b2c-configuration.module.ts 里了:

Context Properties

上下文属性位于 app.module.ts 中。

baseSite、语言和货币属性是将数组中的第一个元素作为默认值的数组。

urlParameters 属性采用其他上下文属性的值来创建附加到店面 URL 的上下文结构。

例如,如果您的店面 URL 是 https://localhost:4200,那么它会变为 https://localhost:4200/electronics-spa/en/USD/ 并具有以下上下文配置:

context: {
    baseSite: [
      'electronics-spa', //Selected by default because it is the first element in the list
      'electronics',
    ],
    language: [
      'en'
    ],
    currency: [
      'USD'
    ],
    urlParameters: ['baseSite', 'language', 'currency']
  },
 ...

Enabling Context in the Storefront URL

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

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

要在 URL 中包含上下文,请将 urlParameters 属性添加到 app.modules.ts 中的上下文属性。 下面是一个例子:

context: {
    baseSite: ['electronics-spa'],
    urlParameters: ['baseSite', 'language', 'currency']
  },

Automatic Multi-Site Configuration

此功能是在 Spartacus 库的 1.3 版中引入的。

CMS 中定义的每个站点都有自己的上下文,其中包括基本站点 ID、语言属性和货币属性。 上下文还定义了这些属性如何在 URL 中持久化。 您可以允许 Spartacus 根据 CMS 中定义的站点 URL 模式自动确定上下文。 您可以通过简单地不在 app.module.ts 中定义 context.baseSite 属性来启用此自动上下文配置。

在应用程序初始化之前,Spartacus 从后端获取基站点列表,将当前 URL 与 CMS 中定义的站点的 URL 模式进行比较,然后识别当前基站点及其语言, 货币和 URL 编码属性。

Mitigating the Initial Back End Call

对基本站点的后端的初始调用可能很慢,这会影响用户体验。 为了解决这个问题,您可以选择使用服务器端渲染 (SSR) 或渐进式 Web 应用程序 (PWA) 技术来缓存上下文。

Caching the Site Context with Server-Side Rendering

可以在服务器端渲染期间识别站点,并且可以使用 Angular TransferState 机制将上下文传输到浏览器。 为了避免在每次页面请求时调用服务器端的基本站点,可以使用反向代理缓存页面。

要允许在服务器端识别站点,您需要向 Spartacus 提供当前请求 URL。 您可以通过使用 ngExpressEngine 的 Spartacus 装饰器来完成此操作,该装饰器在幕后提供 SERVER_REQUEST_URL 注入令牌。 您可以在 main.server.ts 中进行配置,如下所示:

import { ngExpressEngine as engine } from '@nguniversal/express-engine';
import { NgExpressEngineDecorator } from '@spartacus/core';

export const ngExpressEngine = NgExpressEngineDecorator.get(engine);

Caching the Back End Response with Base Sites in PWA

使用 PWA 时,Angular Service Worker 可以缓存提供基本站点的后端响应,方法是向 Service Worker 配置中的 dataGroups 数组添加配置。 以下是来自 ngsw-config.json 的示例:

{
  // ...
  "dataGroups": [
    // ...
    {
      "name": "basesites",
      "urls": [
        "*/rest/v2/basesites?fields=baseSites\\(uid,defaultLanguage\\(isocode\\),urlEncodingAttributes,urlPatterns,stores\\(currencies\\(isocode\\),defaultCurrency\\(isocode\\),languages\\(isocode\\),defaultLanguage\\(isocode\\)\\)*"
      ],
      "cacheConfig": {
        "maxSize": 1,
        "maxAge": "1d", // Set to 1 day. Customize this value according to your needs.
        "strategy": "performance"
      }
    }
  ]
}

Base Sites and Storefronts

当基本站点在 URL 参数中编码时,Spartacus 引用 baseSite 参数,而 CMS 将此参数称为 storefront. 您应该继续在 CMS 中使用店面参数名称,因为 Spartacus 将店面隐式映射到 baseSite。 其他参数,如语言和货币,不受影响。

如下图所示:backoffice CMS 里使用参数 “storefront”:

而 Spartacus 使用 baseSite:

Writing URL Patterns in Java

由于历史原因,在 CMS 中定义的具有 URL 模式的正则表达式是用 Java 编写的。 但是,这些正则表达式是在前端使用 JavaScript 计算的。 您应该继续在 CMS 中使用 Java regex,它们将在 Spartacus 中隐式转换为 JavaScript。 例如,为了不区分大小写,诸如 (?i) 之类的修饰符被映射到 /i。

注意:虽然 Java regex 和 JavaScript 之间的现有映射应该足以满足最常见的情况,但并非所有 Java regex 功能都在 JavaScript 中可用,因此验证您的 URL 模式不使用 Java regex 功能在 JavaScript 中不可用非常重要 JavaScript。 否则,任何带有错误 URL 模式的基本站点都不会被 Spartacus 识别。

Disabling a Base Site

无论 CMS 中定义的选项如何,例如 active、activeFrom 或 activeTo,后端端点都会返回所有基本站点的列表,不包含有关该站点是否处于活动状态的任何信息。 要禁用基本站点,您必须删除该基本站点的 URL 模式。

作为替代的低级解决方法,您可以设置对后端数据库调用的限制,以仅过滤活动站点。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。