乐趣区

关于sap:SAP-电商云启用-EPD-Visualization-Integration-的配置步骤

Spartacus-b2b-configuration.module.ts 文件里有下列的代码:

const baseSite = environment.epdVisualization
  ? ['powertools-epdvisualization-spa', 'powertools-spa']
  : ['powertools-spa'];

简略的在 b2b.bat 文件里设置 epdVisualization=true 是不能工作的:

正确做法:

set CX_B2B=true&& set CX_EPD_VISUALIZATION=true&& set CX_BASE_URL=https://localhost:9002&& yarn start

之后有新的谬误:

Base site powertools-epdvisualization-spa doesn’t exist

装置脚本:https://github.com/SAP/sparta…

须要将 CX_BASE_URL 替换成 ccv2:

之后工作失常:

本地 demo 地址:

http://localhost:4200/powerto…

自身也在 cx-epd-visualization-viewer 之内:

然而上图这个高亮的 div 标签,在 Angular HTML 文件里找不到。

visual-viewer.service.ts 的构造函数里初始化 SAP UI5:

读取配置:

返回一个新的 Observable:

加载以后产品的 visualization,可见 SAP UI5 library 的初始化是一个 lazy load 逻辑:

动静加载 SAP UI5 library:

initialize 函数是在 mergeMap 里被调用的:

加载这几个 SAP UI5 library:

  core.loadLibrary('sap.m', loadLibraryOptions),
          core.loadLibrary('sap.ui.layout', loadLibraryOptions),
          core.loadLibrary('sap.ui.vk', loadLibraryOptions),
          core.loadLibrary('sap.ui.richtexteditor', loadLibraryOptions),

加载动画:

看有哪些 html 生产了 cx-epd-visualization-viewer.

失去以后 selector 对应的 dom 元素:

创立一个新的 dom 元素:

加载 3d 模型数据:

package.json 引入了 SAP UI5 的 ts 依赖:@sapui5/ts-types-esm

这个 npm package 蕴含所有 SAPUI5 库的基于 ES 模块的类型签名。

这些签名可用于:

  1. 在 IDE 中启用高级内容辅助,例如:SAPUI5 的 (VSCode / IntelliJ / Webstorm)。
  2. 应用 TypeScript 编译器为 SAPUI5 应用程序集成类型查看。
    这两个性能可用于以 TypeScript 和 JavaScript 编写的 SAPUI5 应用程序。

留神:“基于 ES 模块”意味着代码须要应用 ES6 模块语法加载 UI5 模块,而后须要转换为规范 UI5 要求 / 定义语法,这是举荐的办法。

退出移动版