Shopware 6 云应用中如何添加CMS元素？

核心实现步骤 #

1. 定义CMS元素元数据 #

在云应用的src/Resources/config/cms-element目录下创建元素配置文件（例如custom-cms-element.xml），配置元素的基础信息、可编辑字段、预览组件等：

<?xml version="1.0" encoding="UTF-8"?>
<cms-element xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/shopware/platform/trunk/src/Core/System/Cms/Xml/cms-element.xsd">
    <name>custom-cms-element</name>
    <label>自定义CMS元素</label>
    <description>用于云应用的自定义内容展示元素</description>
    <component>sw-cms-el-custom-cms-element</component>
    <preview-component>sw-cms-el-preview-custom-cms-element</preview-component>
    <fields>
        <field name="contentText" type="text">
            <label>展示文本</label>
            <help-text>输入要在元素中显示的文本内容</help-text>
        </field>
    </fields>
    <config>
        <fields>
            <field name="textColor" type="color">
                <label>文本颜色</label>
            </field>
        </fields>
    </config>
</cms-element>

2. 开发后台管理端组件 #

在src/Resources/app/administration/src/module/sw-cms/elements目录下创建对应Vue组件：

• 主编辑组件（custom-cms-element/index.js）：

import template from './sw-cms-el-custom-cms-element.html.twig';
import './sw-cms-el-custom-cms-element.scss';

Shopware.Component.register('sw-cms-el-custom-cms-element', {
    template,
    props: {
        element: {
            type: Object,
            required: true
        }
    },
    computed: {
        contentText: {
            get() {
                return this.element.config.contentText.value;
            },
            set(value) {
                this.element.config.contentText.value = value;
            }
        },
        textColor: {
            get() {
                return this.element.config.textColor.value;
            },
            set(value) {
                this.element.config.textColor.value = value;
            }
        }
    }
});

• 预览组件（custom-cms-element/preview/index.js）：

import template from './sw-cms-el-preview-custom-cms-element.html.twig';

Shopware.Component.register('sw-cms-el-preview-custom-cms-element', {
    template
});

按需创建对应的Twig模板和SCSS样式文件。

3. 注册后台组件 #

在云应用的src/Resources/app/administration/src/main.js中导入并注册元素：

import './module/sw-cms/elements/custom-cms-element';

4. 开发店铺前端渲染组件 #

若需要在店铺前端展示该元素，在src/Resources/app/storefront/src/element目录下创建店铺端组件：

import template from './custom-cms-element.html.twig';

const Component = Shopware.Component.wrapComponentConfig({
    template,
    props: {
        element: {
            type: Object,
            required: true
        }
    },
    computed: {
        contentText() {
            return this.element.config.contentText.value;
        },
        textColorStyle() {
            return { color: this.element.config.textColor.value };
        }
    }
});

Shopware.Component.register('custom-cms-element', Component);

并在src/Resources/app/storefront/src/main.js中导入：

import './element/custom-cms-element';

官方参考资源 #

Shopware官方开发者文档中，CMS元素开发章节详细覆盖了：

• 元数据配置的语法规范
• 前后端组件的开发标准
• 云应用中CMS元素的打包与部署注意事项

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