0
点赞
收藏
分享

微信扫一扫

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤


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

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

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_初始化

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

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_angular.js_02

正确做法:

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

之后有新的错误:

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_typescript_03

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_初始化_04


Base site powertools-epdvisualization-spa doesn’t exist


安装脚本:https://github.com/SAP/spartacus/blob/release/4.3.x/scripts/install/config.epd-visualization.sh

需要将 ​​CX_BASE_URL​​ 替换成 ccv2:

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_加载_05

之后工作正常:

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_前端_06

本地 demo 地址:

http://localhost:4200/powertools-epdvisualization-spa/en/USD/product/CX704/7%E2%80%9Dx12%E2%80%9D-mini-metal-lathe

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_前端_07

本身也在 ​​cx-epd-visualization-viewer​​ 之内:

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_typescript_08

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

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

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_加载_09

读取配置:

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_初始化_10

返回一个新的 Observable:

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_angular.js_11

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

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_前端_12

动态加载 SAP UI5 library:

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_前端_13

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

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_加载_14

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_typescript_15

加载这几个 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),

加载动画:

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_初始化_16

看有哪些 html 消费了 cx-epd-visualization-viewer.

得到当前 selector 对应的 dom 元素:

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_angular.js_17

创建一个新的 dom 元素:

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_angular.js_18

加载 3d 模型数据:

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_前端_19

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_前端_20

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_加载_21

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

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_加载_22

SAP 电商云启用 Enterprise Product Development Visualization Integration 的配置步骤_angular.js_23

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

这些签名可用于:

  1. 在 IDE 中启用高级内容辅助,例如:SAPUI5 的 (VSCode / IntelliJ / Webstorm)。
  2. 使用 TypeScript 编译器为 SAPUI5 应用程序集成类型检查。

    这两个功能可用于以 TypeScript 和 JavaScript 编写的 SAPUI5 应用程序。

注意:“基于 ES 模块”意味着代码需要使用 ES6 模块语法加载 UI5 模块,然后需要转换为标准 UI5 要求/定义语法,这是推荐的方法。



举报

相关推荐

0 条评论