Shopware 6自定义滑块文本CMS块：动态添加插槽方法问询

针对你当前固定4张幻灯片的问题，要实现任意数量的动态插槽，需要通过配置项控制数量+组件内动态渲染插槽的方式实现，具体步骤如下：

1. 修改CMS块注册代码，添加幻灯片数量配置 #

移除原来的固定插槽定义，在defaultConfig中新增可配置的幻灯片数量字段：

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

Shopware.Service('cmsService').registerCmsBlock({
    name: 'multicolumn-carousel',
    category: 'text-image',
    label: 'Multicolumn carousel',
    component: 'sw-cms-block-multicolumn-carousel',
    previewComponent: 'sw-cms-preview-multicolumn-carousel',
    defaultConfig: {
        marginBottom: '20px',
        marginTop: '20px',
        marginLeft: '20px',
        marginRight: '20px',
        sizingMode: 'boxed',
        slideCount: {
            type: 'number',
            label: '幻灯片数量',
            value: 2,
            min: 1,
            max: 10 // 可根据需求调整上限
        }
    },
    slots: {} // 不再定义固定插槽
});

2. 自定义块组件，动态渲染幻灯片插槽 #

在你的sw-cms-block-multicolumn-carousel组件中，通过循环根据配置的数量生成对应的图片和文本插槽：

<template>
    <div class="sw-cms-block-multicolumn-carousel">
        <!-- 替换为你使用的滑块组件，比如Shopware自带的sw-carousel -->
        <sw-carousel>
            <div v-for="index in slideCount" :key="index" class="carousel-slide">
                <!-- 动态图片插槽 -->
                <sw-cms-slot
                    :name="`slide-${index}-image`"
                    :type="'image'"
                    :label="`幻灯片 ${index} 图片`"
                ></sw-cms-slot>
                
                <!-- 动态文本插槽 -->
                <sw-cms-slot
                    :name="`slide-${index}-text`"
                    :type="'text'"
                    :label="`幻灯片 ${index} 文本`"
                ></sw-cms-slot>
            </div>
        </sw-carousel>
    </div>
</template>

<script>
export default {
    name: 'sw-cms-block-multicolumn-carousel',
    computed: {
        slideCount() {
            // 从块配置中读取幻灯片数量，默认2张
            return this.block.config.slideCount.value || 2;
        }
    }
};
</script>

3. 调整预览组件，适配动态数量 #

在预览组件中同步根据配置数量渲染预览内容：

<template>
    <div class="sw-cms-preview-multicolumn-carousel">
        <div class="carousel-preview">
            <div v-for="index in slideCount" :key="index" class="slide-preview">
                <div class="preview-image"></div>
                <div class="preview-text">幻灯片 {{ index }} 文本预览</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'sw-cms-preview-multicolumn-carousel',
    computed: {
        slideCount() {
            return this.block.config.slideCount.value || 2;
        }
    }
};
</script>

<style scoped>
.sw-cms-preview-multicolumn-carousel .carousel-preview {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 10px;
}
.slide-preview {
    width: 200px;
    background: #f5f5f5;
    padding: 8px;
    border-radius: 4px;
}
.preview-image {
    width: 100%;
    height: 120px;
    background: #e0e0e0;
    border-radius: 4px;
    margin-bottom: 8px;
}
.preview-text {
    font-size: 12px;
    color: #666;
    text-align: center;
}
</style>

关键说明 #

• 动态生成的插槽名称（如slide-1-image）会被Shopware CMS系统识别，支持在后台编辑器中单独编辑每张幻灯片的内容。
• 你可以根据需求修改slideCount的min/max值，或者直接移除限制让用户输入任意数量。
• 如果需要更灵活的幻灯片配置（比如添加标题、链接等），可以扩展配置项或使用自定义字段组。

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