什么是 SAP Commerce Cloud SmartEdit 的 webApplicationInjector.js

SAP Commerce Cloud SmartEdit 是 SAP 提供的一种基于云的电子商务平台，旨在帮助企业轻松管理和优化他们的在线商店。SmartEdit 是 SAP Commerce Cloud 的一个功能强大的组件，用于简化网站内容的编辑和管理。通过 SmartEdit，商家可以在一个易于使用的界面中轻松地修改和更新网站布局、导航、页面和组件。SmartEdit 是一个基于 JavaScript、AngularJS 和 TypeScript 的前端应用程序。

webApplicationInjector.js 是 SmartEdit 的一个重要部分，它用于将 SmartEdit 的功能注入到运行 SAP Commerce Cloud 的网站中。这个文件的主要目的是将 SmartEdit 与 Commerce Cloud 之间建立一个桥梁，使得 SmartEdit 可以与 Commerce Cloud 的网站进行交互，从而实现内容的编辑和管理。

以下是 webApplicationInjector.js 的一些关键功能：

1. 加载 SmartEdit 框架: webApplicationInjector.js 负责加载 SmartEdit 框架的核心文件，如 CSS 样式表、JavaScript 文件等。这些文件包含了 SmartEdit 的核心逻辑和样式，对 SmartEdit 的正常运行至关重要。
2. 与后端服务进行通信: webApplicationInjector.js 负责与 SAP Commerce Cloud 的后端服务进行通信，以获取有关网站内容和页面的信息。这些信息包括页面结构、可用组件、导航和布局等。通过与后端服务通信，SmartEdit 能够获取所需的数据以呈现编辑界面，从而让用户可以轻松地进行编辑。
3. 注入 SmartEdit 编辑器: webApplicationInjector.js 将 SmartEdit 编辑器注入到 Commerce Cloud 网站的页面中。编辑器是一个可视化的工具，允许用户直接在页面上编辑内容。用户可以拖放组件、更改文本和图片、调整布局等。编辑器还提供了撤销和重做功能，以便用户可以轻松地回滚更改。
4. 注入预览模式: webApplicationInjector.js 为 Commerce Cloud 网站提供了一个预览模式。在这种模式下，用户可以查看他们在 SmartEdit 中所做更改的实时效果。这使得用户可以在发布更改之前查看页面的最终效果，从而确保所做更改符合预期。
5. 保存和发布更改: webApplicationInjector.js 负责将用户在 SmartEdit 中所做的更改保存到后端服务，并在发布时将这些更改应用到 Commerce Cloud 网站中。这样，用户可以在一个集中的地方管理他们的网站内容，而无需担心手动更新和同步更改。

我们使用 SAP Commerce Cloud SmartEdit 打开 Storefront 时，能观察到一个 webApplicationInjector.js 文件的加载，如下图所示：

Heartbeat Service 从注入到所有店面页面的网页应用注入器接收心跳消息。如果店面页面没有网页应用注入器，SmartEdit 将无法接收心跳消息，且加载页面会有困难。如果 SmartEdit 无法加载页面，它会显示一个可操作的警告消息，用户可以选择等待页面加载或以预览模式加载页面。

当 SmartEdit 尝试加载页面 10 秒后，它会显示警告消息。当用户在警告消息中选择预览模式时，SmartEdit 会以预览模式加载页面。它会禁用模式选择器，使用户无法使用编辑功能。模式选择器的工具提示显示以下消息：

Preview mode is enabled. You cannot change modes. The page is either not compatible with SmartEdit or connection to it has been lost.
Refresh the page or go to another page.

如果在以预览模式显示页面后，SmartEdit 收到心跳消息，它会启用模式选择器并显示消息 "我们已重新建立与您网站的连接。" 用户可以选择另一个模式，SmartEdit 将显示与该模式相关联的编辑功能。

文件位置：