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

简介: SAP 电商云启用 Enterprise Product Development 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:/

之后有新的错误:

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:

之后工作正常:

本地 demo 地址:

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

本身也在 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 模块的类型签名。

这些签名可用于:


在 IDE 中启用高级内容辅助,例如:SAPUI5 的 (VSCode / IntelliJ / Webstorm)。


1.使用 TypeScript 编译器为 SAPUI5 应用程序集成类型检查。

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


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


相关文章
|
4月前
|
UED
什么是 SAP Commerce Cloud SmartEdit Product Carousel Component Editor
什么是 SAP Commerce Cloud SmartEdit Product Carousel Component Editor
|
4月前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
|
4月前
|
存储 监控 数据库
SAP 电商云 product catalog 从 staged 到 online 两个版本之间的同步
SAP 电商云 product catalog 从 staged 到 online 两个版本之间的同步
|
4月前
|
监控 安全 数据管理
SAP 电商云 Product catalog 的 staged 和 online 两种版本的设计理念
SAP 电商云 Product catalog 的 staged 和 online 两种版本的设计理念
|
4月前
|
XML 网络安全 开发工具
如何下载并安装 SAP ABAPGit,并完成 ABAP 服务器上 SSL 证书的配置试读版
如何下载并安装 SAP ABAPGit,并完成 ABAP 服务器上 SSL 证书的配置试读版
|
4月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
4月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
4月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
4月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
4月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍