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的详细数据: