自定义CMS元素拖拽至购物体验时触发Required slot配置错误

控制台错误信息 #

app.js?16675756916926524:1 An error was captured in current module: TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at s.checkRequiredSlotConfigField (app.js?16675756916926524:1:1502672)
    at app.js?16675756916926524:1:1499742
    at Array.forEach (<anonymous>)
    at app.js?16675756916926524:1:1499450
    at Array.forEach (<anonymous>)
    at app.js?16675756916926524:1:1499398
    at Array.forEach (<anonymous>)
    at s.getSlotValidations (app.js?16675756916926524:1:1499368)
    at s.slotValidation (app.js?16675756916926524:1:1501429)

自定义CMS块的index.js代码 #

import './component';
import './preview';

Shopware.Service('cmsService').registerCmsBlock({
    name: 'name',
    category: 'text',
    label: 'label',
    component: 'sw-cms-block-name',
    previewComponent: 'sw-cms-preview-name',
    defaultConfig: {
       marginBottom: '20px',
       marginTop: '20px',
       marginLeft: '20px',
       marginRight: '20px',
       sizingMode: 'boxed'
    },
    slots: {
        left: 'text',
        right: 'image'
    }
});

问题解决 #

错误原因 #

Shopware的registerCmsBlock方法要求slots配置中的每个项必须是对象类型，而你直接使用了字符串赋值。代码中的checkRequiredSlotConfigField函数需要遍历slot的配置属性，字符串无法被Object.keys()处理，因此抛出类型错误。

修改方案 #

将slots中的每个字符串值改为包含type字段的对象：

slots: {
    left: {
        type: 'text'
    },
    right: {
        type: 'image'
    }
}

可选扩展 #

如果需要给slot设置默认内容或样式，可在对象中添加defaultConfig字段：

slots: {
    left: {
        type: 'text',
        defaultConfig: {
            content: '默认展示文本'
        }
    },
    right: {
        type: 'image',
        defaultConfig: {
            media: null,
            displayMode: 'cover'
        }
    }
}

内容的提问来源于stack exchange，提问作者CodeEditor712