When i'm trying to create a custom CMS-element and i drag it into a shopping experience, the console gives the following message:
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)
However, i can't find what i am doing wrong. My index.js contains the following code:
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'
}
});
Does anyone have any idea how to fix this error..?
I tried changing the config to the shopware example as mentioned in https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-cms-block However, it still gives the same error..
Does your component sw-cms-block-name
exist? Also that component's template must declare the slots you register with the cms block:
<div class="sw-cms-block-name">
<slot name="left"></slot>
<slot name="right"></slot>
</div>
When defining the slots you can also pass a config with default settings and content:
slots: {
left: {
type: 'text',
default: {
config: {
content: { source: 'static', value: 'lorem ipsum' },
},
},
},
right: {
type: 'image',
default: {
config: {
displayMode: { source: 'static', value: 'cover' },
},
},
},
},