App FAQ: Shopware6.5 App How to change CMS Editor Preview of new CMS Element

[codixio]

What kind of question do you have about the app system?

App Scripting Advanced

Describe your question or feedback

I'm following the app guide to create custom CMS elements, the sidebar preview works but not the preview inside the CMS editor window, what am I missing?

https://developer.shopware.com/docs/guides/plugins/apps/content/cms/add-custom-cms-blocks.html

The DOM structure of the block in the CMS editor will look like this:

<div class="sw-cms-block-swag-image-text-reversed-component">
    <div class="sw-cms-slot sw-cms-slot-left"></div>
    <div class="sw-cms-slot sw-cms-slot-right"></div>
</div>

Where should I add this code?

[jleifeld]

CMS blocks just contain slots for CMS elements. The DOM structure for this will be auto generated based on the XML content. If you want to create CMS elements you need to follow this guide: https://developer.shopware.com/docs/guides/plugins/plugins/content/cms/add-cms-element-via-admin-sdk.html

[codixio]

Oh man I was so happy to finally get an reply to my question, but this is no help, I of course followed the App Guide (!!) this is no plugin. And I already created the CMS element, but the editor preview does not change, only the drag and drop element. So as mentioned before, how can I change the CMS editor preview? Is this a bug in SW?

[jleifeld]

Okay, how and on based on which guide did you create your CMS element? The linked guide in the first post is a guide to create CMS blocks. And CMS blocks aren't the same as CMS elements.

The preview for the CMS blocks is just the preview in the sidebar. There is no editor preview available for blocks because they contain just slots which render elements.

You can imagine it like this:

Green = CMS Section
Blue = CMS Block
Red = CMS Element

So the CMS block just contains slots for the elements and therefore can't have a preview. Most CMS blocks are prefilled with elements, e.g. two text beside each other, etc. You can see in the video that every element can easily be replaced. So if you drag a block with two text elements it could look identical to a block with two images when you switch the elements. It is more or less just a wrapper for it.

Bildschirmaufnahme.2023-10-26.um.16.29.39.mp4

If you want to have the block prefilled with your CMS element then you can define these, as mentioned in the documentation, in the XML definition of your block:

<slots>
    <!-- A slot requires a unique name and a type which refers to the CMS element it shows. -->
    <slot name="left" type="my-custom-element">
        <!-- The slot requires some basic configuration. The following config-value elements highly depend on which element the slot holds. -->
        <config>
            <!-- The following config-value will be interpreted as 'verticalAlign: { source: "static", value: "top"}' in the JavaScript. -->
            <config-value name="vertical-align" source="static" value="top"/>
        </config>
    </slot>

    <slot name="right" type="my-second-custom-element">
        <config>
            <config-value name="display-mode" source="static" value="auto"/>
            <config-value name="vertical-align" source="static" value="top"/>
        </config>
    </slot>
</slots>

For better help it would be good if you also show the code of your CMS element and the XML file.