Spartacus
关于 SAP Spartacus 层的 UI 设计
Spartacus 每个 UI 划分成不同的区域 section，每个区域由若干个 slots 组成。每个 slot 可以包含一个或多个 CMS Component. 以 homepage为例，其实现的 HTML 位置：projects\storefrontlib\src\layout\main\s ......
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
BREAKPOINT 在 SAP Spartacus Storefront 开源项目中是一个枚举类型，用于定义不同屏幕大小的断点。这个枚举类型默认包含五个屏幕名称：xs、sm、md、lg、xl，分别表示 extra small、small、medium、large、extra large 的屏幕尺寸 ......
什么是 Spartacus 的 ConfigModule.withConfig 方法
Spartacus 是一个开源的 JavaScript 商业前端库，使用 Angular 和 RxJS 构建，用于 SAP Commerce Cloud。它允许开发人员创建 SPA （Single Page Application）应用，提供灵活的配置，以便灵活地适应不同的业务需求。 在 Spart ......
Angular Input 注解在 Spartacus 项目开发中的实际应用场景一例
@Input() 装饰器是 Angular 中用于在组件中接收父组件传递的数据的一种方式。它的作用是将一个属性标记为输入属性，使得父组件可以将数据绑定到子组件的这些属性上。这样，父子组件之间就可以实现双向数据传递，实现更灵活的组件通信。 下面是一个实际的例子： SearchBoxComponent ......
Spartacus 6.0 baseSites API 的准确触发位置
启动 Spartacus 后，第一个调用的 API 是 BaseSite API。BaseSite API 是 SAP Commerce Cloud 中非常重要的一个 API，它主要的作用包括： 获取网站基本信息：BaseSite API 用于从 SAP Commerce Cloud 中获取网站的基 ......
Spartacus ngsw-config.json 文件内容的详细解释
以下是 Spartacus 项目 ngsw-config.json文件的代码解释和示例： `index`: "/index.html", index: 定义了服务工作线程 (Service Worker) 中的主页文件。在这个例子中，index 设置为/index.html，表示在缓存策略中将会使用 ......
如何避免 Spartacus 重复发送 CMS page 请求
如下图所示，启用了 SSR 之后，Spartacus 在 CSR 模式下 re-hydration 时，会重复发送一次 CMS page 请求： 可以参考这个 StackOverflow 的讨论，通过下面的代码来阻止 CSR 模式下重复发送 page 请求： provideConfig(<Routi ......
编译 Spartacus 6.0 时遇到的错误消息
错误消息如下： Compiling with Angular sources in Ivy partial compilation mode.projects/storefrontlib/shared/components/generic-link/generic-link.component.ht ......
Spartacus 服务器端渲染(SSR)的 timeout 设置
如下图所示，Spartacus SSR engine 的几种 timeout 超时机制的设置： 其中第122 行的 3_000 写法，意思就是默认的 3000 毫秒超时时间。 在官网能看到对于这些 timeout 字段的说明： timeout 的设置是一个数字，指示 SSR 服务器在回退到 CSR ......
Spartacus CSR 渲染模式下的 home page 网络请求
Spartacus CSR 渲染模式下的 home page 网络请求如下，其中第一个请求就是 baseSites OCC API 调用。 Spartacus是一个开源的、响应式的电子商务前端框架，是基于Angular构建的，旨在帮助企业快速构建现代化的电子商务网站。OCC（Omni Commerc ......
如何给 Spartacus 的 CSR 和 SSR 配置不同的 OCC endpoint
SAP 官方文档里，对 Commerce Cloud Composable Storefront 的 occ endpoint 配置说明的例子如下： provideConfig( backend: { occ: { baseUrl: 'https://some.baseUrl.com' }, }, ......
Spartacus lazy loading 模块中的配置管理
如果在懒加载模块中提供了额外的配置，组合商店前端将其合并到全局应用配置中，以支持现有组件和服务的懒加载场景。在大多数情况下，尤其是当懒加载模块主要提供默认配置时，这种方式都能可靠地工作。然而，如果过度使用，特别是当两个模块为配置的同一部分提供不同的配置时，可能会导致问题。这种情况可以通过在主应用中提 ......
Spartacus 应用中 Lazy Loaded Module 初始化逻辑的实现方案
当我们谈论大型 Angular 应用程序时，一个重要的性能优化策略就是模块的懒加载。我们通过使用 Angular 的路由配置来实现模块的懒加载，这样可以在用户需要时再加载特定的功能模块，从而提升应用的性能。 然而，在这种情况下，我们可能会遇到一个问题，那就是如何在懒加载模块被加载时执行一些初始化逻辑 ......
如何判断 Spartacus SSR 的 Transfer State 已经正常工作了
In the returned index.html , you can check for the script tag, which should by default have an id of ... . 办法就是，在 Chrome 开发者工具 Network 标签页里，查看 script ......
关于 Spartacus CMS 请求响应是否应该被 Transfer State 机制 cover 的问题
Spartacus 默认设置是 CMS 请求会在 CSR 和 SSR 两种环境下都执行，动机是应对在页面渲染过程中，Back-Office 有变化发生的情况。 如果确实只希望 CMS 只在 SSR 端执行，将 routing.loadStrategy 改成 ONCE 即可。 这个 Stackover ......
如何使用 TypeScript 的 module augmentation 技术增强 Spartacus Feature Library
module augmentation 技术是一种强大的 TypeScript 功能，它允许开发人员在不修改原始代码的情况下扩展现有模块的功能。这种技术在 Angular 生态系统中的应用尤为广泛，特别是在构建功能库和插件时，以确保代码的可维护性和可扩展性。 概述 Module augmentati ......
什么是 Spartacus 的 BaseStorefrontModule
Spartacus BaseStorefrontModule 的位置： import { NgModule } from '@angular/core'; import { BaseStorefrontModule } from "@spartacus/storefront"; import { S ......
Spartacus 启动时 basesites OCC API 请求的技术细节
SAP Spartacus是一款开源的电子商务前端框架，旨在提供可扩展、可自定义和可维护的电子商务Web应用程序。在Spartacus应用程序启动时，发起的OCC（Open Commerce Cloud）请求occ/v2/basesites?fields=FULL是一个重要的请求，用于获取有关基本站 ......
关于 Spartacus My Account 菜单的数据源 - NavigationNode
有朋友询问 Spartacus 的 My Account 菜单里，My company 菜单项的数据源是什么？ Spartacus 启动时，我们观察到这个 OCC API： /occ/v2/powertools-spa/cms/pages?lang=en&curr=USD 在其响应数据里，观察到 n ......
关于 Spartacus 项目中的 CmsPageGuardService
CmsPageGuardService 是 Spartacus 框架中的一个重要服务，用于控制访问 CMS 页面的权限。在本文中，我将详细说明如何使用它，并提供示例代码，以帮助您更好地理解其功能和用法。 Spartacus 概览 首先，让我们简要回顾一下 Spartacus 是什么。Spartacu ......
combineLatest 操作符在 Spartacus Cost Center 计算逻辑中的一个实际应用
考虑下面这段 Angular 代码： this.costCenters$ = combineLatest([ this.userCostCenters$, this.checkoutCostCenterFacade.getCostCenterState().pipe( filter((state) ......
Spartacus 如何动态将 SmartEdit attribute 添加到 DOM 里，单步调试
从 Spartacus 发起的 base site occ 请求的 response 获取当前 site 的数据： 从 CMS page 的 response 结果里得到的 properties： 使用 renderer 往 DOM 元素上添加 attribute： 在这个 DynamicAttri ......
如何找到 Spartacus 动态加载 library 的准确实现地址
Spartacus 里 SmartEditFeatureModule 这段实现代码： import { NgModule } from '@angular/core'; import { CmsConfig, provideConfig } from '@spartacus/core'; impor ......
什么是 Spartacus Storefront B2B store 的 My Company 菜单
Spartacus 是一个基于 Angular 的开源 JavaScript web 应用，与 SAP Commerce Cloud 的 REST API 进行交互。它的目标是提供一个稳定、可靠、可扩展的前端解决方案，让开发者能够创建全功能的商店，同时避免了与后端系统的紧密耦合。其中，B2B sto ......
Spartacus 添加 PWA 应用到 home 的实现原理分析
代码位置：https://github.com/SAP/spartacus/blob/develop-6.4.x/projects/storefrontlib/cms-structure/pwa/services/add-to-home-screen.service.ts 这段Angular代码是一 ......
Spartacus CMS Feature selector 的实现明细
有下面这段代码： ```typescript import { createFeatureSelector, MemoizedSelector } from '@ngrx/store'; import { CmsState, CMS_FEATURE, StateWithCms } from '../ ......
TypeScript 对象解构操作符在 Spartacus 实际项目开发中的应用
下面这段代码来自 Spartacus 项目的 `navigation-entry-item.reducer.ts` 实现。 ```typescript import { NodeItem } from '../../model/node-item.model'; import { CmsAction ......
Spartacus 中的 navigation item reducer 实现
关于 Spartacus 这段代码： ```typescript export function reducer( state = initialState, action: CmsActions.CmsNavigationEntryItemAction ): NodeItem | undefine ......
Spartacus Product List Page ProductSearchPage Observable 对象的设计明细
源代码如下： ```typescript readonly model$: Observable = using( () => this.searchByRouting$.subscribe(), () => this.searchResults$ ).pipe(shareReplay({ buff ......