ITPub博客

Installing SAP Commerce Using Installer Recipes 要出于开发和演示目的自动安装 SAP Commerce，您可以使用安装程序配 方。 Recipes 是负责创建目录、移动文件、更新配置和属性文件以及初始化系统的 gradle 脚本。 安装程序目前仅用于在开发环境中安装 SAP Commerce 或用于演示目的。 不要使用安装程序在生产环境中安装 S

目前电商领域有两款比较出名的开源电商网站解决方案，分别是基于 Angular 开发框架，代号为 Spartacus 的开源项目，以及基于 Vue 的 Vue Storefront. 作为 Spartacus 开源项目的开发成员之一，今天我想通过本文，给大家介绍一下我们平时购物时最常使用到的功能之一，添加产品到购物车的技术实现。 即使没有多少 Angular 开发经验的前端程序员，阅读本文之

程序员日常工作中总是需要分析不少日志文件。 日志文件可以用默认的文本编辑器打开，但是缺乏语法高亮效果，下面是一个例子： 可以尝试安装这个 Visual Studio Code 扩展：Log File Highlighter： 安装完毕后，打开之前的日志文件，具有语法高亮了： 还可以编辑 settings.json, 对需要高亮的规则进行自定义设置：logFileHighligh

我们知道在 SAP 电商云 Spartacus UI 里，用户可以通过下拉菜单更改当前访问 site 的语言： 监控语言变化的代码： this.subscription.add( this.languageService .getActive() .subscribe((isoCode: string) => t

在 Spartacus 2.0 版之前，实现状态持久性的唯一方法是使用一种称为 storageSync 的简单的声明性机制，它允许您提供属性键以在存储中持久化。 当您启动您的应用程序时，这些持久化的键用于设置存储中的初始状态。 使用 Spartacus 2.0 或更高版本，您可以通过使用 StatePersistenceService，特别是它的 syncWithStorage 方法来保持店面应用

方向性功能提供对双向文本和布局的支持。 您可以将 Spartacus 配置为使用从左到右 (LTR) 方向或从右到左 (RTL) 方向。 方向性是由语言驱动的。 许多语言是从左到右阅读的，但有些语言，例如阿拉伯语和希伯来语，是从右到左阅读的。 在 Spartacus 中，UI 的方向反映了主动语言，因此方向性可以在双向体验中起作用。 如果您的店面同时包含 LTR 和 RTL 语言，则使用活动语

对于复杂且快速发展的库，在改进现有功能的同时保持向后兼容性可能具有挑战性。 代码弃用允许您正确标记过时的代码，并通过警告用户，帮助他们过渡到更好的替代方案。 要将函数、类、方法或属性标记为已弃用，请使用 @deprecated 标记。 下面是一个例子： /** * @deprecated since 1.0.2 * Use better alternative instead */

Spartacus 库的每个次要版本都包含新功能，这些功能通常是对现有组件的改进。 这些功能通常是用户所期望的，但在某些情况下，这些更新可能被视为破坏性更改，尤其是当您在特定行为或 DOM 结构之上构建了自己的自定义时。 Feature level为了保持严格的向后兼容性，Spartacus 包含可配置的功能级别，这有助于在改进现有组件的同时保持可预测的行为。 默认情况下，功能级别设置为最新的

Test the Spartacus installation with schematics on Windows 本文介绍详细步骤。 首先使用命令行安装 verdaccio： Install verdaccio $ npm i -g verdaccio@4 (only for the first time) Verdaccio 是一个简单的、零配置要求的本地私有 NPM 注册表

如下图所示：quick order 文件夹下存在一个 _index.scss 文件，其导入了 styles 文件夹下的 index： 然而，styles 文件夹下并没有 index.scss 文件，只有一个 _index.scss. 但是，ctrl + click 点击上图第一行代码后，会自动跳转到 styles 文件夹下的 _index.scss 文件： 查看这个 @import 的

假设我们要为 Spartacus UI 开发一个新功能，首先，这个新功能，应该放到 feature library 文件夹里： 这个新功能的入口，放置到 Feature Module 中。 新功能通过 public_api.ts 将公有功能暴露给外部消费者。后者从 index.ts 里导入，而 index.ts 又导入 quick-order.module.ts 中的内容。 QuickO

Reference App Structure 这个推荐的 Spartacus 应用程序结构旨在作为您设置自己的 Spartacus 应用程序时的参考。 Spartacus 是一个 Angular 库，这意味着它可以在 Angular 应用程序中单独使用，也可以集成到现有的 Angular 项目中。相反，您可以将任何其他 Angular 解决方案或库添加到您的 Spartacus 项目中。

该入口位于下图第 218 行的 rxjs from Operator 调用： 这里我们将一个函数传入 from： 传入的具体函数如下： 这个函数返回一个 promise，该类型作为 from 操作符的输入类型。这个函数维护在 featureConfig json 对象的 module 字段里： 这个 json 对象是 Spartacus 代码里通过 provideConfi

下列代码第 126 行，通过来自 Angular/core 的 Injector，手动注入一个 QuickOrderFacade 的实例： 调用这个 facade 的 get 方法，在执行实际被代理类的业务逻辑之前，需要先延迟加载包含该业务类实现的 core module： 只有当类型为 Observable 的方法才会被处理： 这里我们调用 Rxjs 标准的 Connectab

这个 resolver 只针对 Proxy Facade，根据 feature 名称和 FacadeClass，获取对应的 resolver. 该 resolver 知道怎样将函数调用，投递到该 facade 的具体实现类去。 featureName：cartQuickOrderCore 最后得到实际值：cartQuickOrder 返回 resolver 的逻辑放在一个 d

可以从 SAP 电商云 Spartacus UI 的实现中找到一个例子。 return this.resolveModuleFactory(moduleFunc).pipe( map(([moduleFactory]) => moduleFactory.create(parentInjector)), concatMap((moduleRef) =&gt

先把所有的排列组合罗列如下： (1) 通过构造函数注入 QuickOrderFacade，但不调用其方法 (2) 通过构造函数注入 QuickOrderFacade，调用其方法(3) 手动通过 injector 注入 QuickOrderFacade(4) 手动通过 injector 注入 QuickOrderFacade，调用其方法 通过构造函数注入 QuickOrderFacade，但不

如何理解 SAP 电商云 Spartacus UI 中的 proxy facade？ Jerry 这篇文章什么是 SAP 电商云 Spartacus UI 的 proxy façade提供了理论上的解释。 本文介绍一个实际例子。 当我们打开如下 url 时，默认是不会触发 Quick Order Core module 的加载的，因为我们根本没有使用到 Quick Order 任何功能：

Jerry 之前的文章SAP 产品 UI 里的容器组件的概念和开发概述介绍过，SAP Spartacus Angular Component，通过我们开发团队自定义的指令 cxComponentWrapper 进行渲染。 在运行时，根据 Angular Component 的名称，即第90行 flexType 字段包含的 QuickOrderComponent，我们能够使用 Angular

Proxy Facades 此功能在 3.2 版本引入。 代理外观是一种灵活的机制，可以从可延迟加载的功能模块中抽象出功能，这种功能抽线，可以对应用程序的任何部分完成，例如组件、服务、指令等。 在延迟加载的配置中，Facade 被定义为一个非常薄的层，它只是一个带有一些元数据的空类，并且这个 Facade 动态地创建了一个 Facade 实现的代理。 下图是一个例子： 一旦代码的任