SAP Spartacus的OccCmsPageNormalizer
时间:2022-07-24
本文章向大家介绍SAP Spartacus的OccCmsPageNormalizer,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
所有经过http请求从Commerce Cloud后台到Spartacus前台渲染的数据,都会经历下列这个generic步骤:
convertSource(source, injectionToken) {
return this.getConverters(injectionToken).reduce((target, converter) => {
return converter.convert(source, target);
}, undefined);
}
CMS page数据的normalize过程:
let OccCmsPageNormalizer = class OccCmsPageNormalizer {
convert(source, target = {}) {
this.normalizePageData(source, target);
this.normalizePageSlotData(source, target);
this.normalizePageComponentData(source, target);
this.normalizeComponentData(source, target);
return target;
}
第一步:NormalizePageData,给page打上load时间戳:
第二步:normalizePageSlotData
按照position给target设置键值对:
第三步: normalizePageComponentData
normalizePageComponentData(source, target) {
for (const slot of source.contentSlots.contentSlot) {
if (slot.components.component &&
Array.isArray(slot.components.component)) {
for (const component of slot.components.component) {
const comp = {
uid: component.uid,
typeCode: component.typeCode,
properties: component.properties,
};
if (component.typeCode === CMS_FLEX_COMPONENT_TYPE) {
comp.flexType = component.flexType;
}
else if (component.typeCode === JSP_INCLUDE_CMS_COMPONENT_TYPE) {
comp.flexType = component.uid;
}
else {
comp.flexType = component.typeCode;
}
target.page.slots[slot.position].components.push(comp);
}
}
}
}
第四步normalizeComponentData执行完毕之后,target结构包含的就是前端Spartacus处理起来比较方便的数据结构:
每个slot有slot id,每个slot id对应Components数组,每个Component由uid,typeCode和flexType唯一标识:
Component数组里有Component的详细数据:
- 第二周编程作业 -Logistic Regression with a Neural Network mindsetLogistic Regression with a Neural Network
- 左手用R右手Python系列——任务进度管理
- 左右用R右手Pyhon系列——趣直播课程抓取实战
- 第三周编程作业-Planar data classification with one hidden layerPlanar data classification with one hidden l
- 用R语言照葫芦画瓢撸了一个简易代理~
- 左手用R右手Python——CSS网页解析实战
- R语言数据抓取实战——RCurl+XML组合与XPath解析
- Python网络数据抓取实战——Xpath解析豆瓣书评
- 左手用R右手Python系列17——CSS表达式与网页解析
- 左手用R右手Python系列16——XPath与网页解析库
- 扒一扒rvest的前世今生!
- RCurl中这么多get函数,是不是一直傻傻分不清!!!
- 机器学习(二)深度学习实战-使用Kera预测人物年龄问题描述引入所需要模块加载数据集创建模型编译模型优化optimize1 使用卷积神经网络optimize2 增加神经网络的层数输出结果结果
- 异步加载的基本逻辑与浏览器抓包一般流程
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法