shopwareshopware6

Required slot configuration error CMS-element


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..


Solution

  • 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' },
                },
            },
        },
    },