Shopware 6自定义区块添加8个自定义字段实现方法咨询

1. 扩展区块注册代码的默认配置 #

在区块注册的defaultConfig中直接添加8个数字/滚动进度类型的自定义字段，并设置初始默认值：

Shopware.Service('cmsService').registerCmsBlock({
    name: 'my-image-text-reversed',
    category: 'text-image',
    label: 'My Image Text Block!',
    component: 'sw-cms-block-my-image-text-reversed',
    previewComponent: 'sw-cms-preview-my-image-text-reversed',
    defaultConfig: {
        marginBottom: '20px',
        marginTop: '20px',
        marginLeft: '0px',
        marginRight: '0px',
        sizingMode: 'boxed',
        // 新增8个自定义字段，设置默认值
        scrollProgress1: 0,
        scrollProgress2: 25,
        scrollProgress3: 50,
        scrollProgress4: 75,
        scrollProgress5: 100,
        scrollProgress6: 0,
        scrollProgress7: 50,
        scrollProgress8: 100
    },
    slots: {
        left: 'text',
        right: 'image'
    }
});

2. 在区块组件中配置后台编辑表单 #

修改sw-cms-block-my-image-text-reversed Vue组件，添加自定义字段的编辑控件，让后台用户可以调整这些值：

<template>
  <sw-cms-block v-bind="$props">
    <template #config>
      <!-- 保留原有边距、布局配置项 -->
      <sw-cms-block-config-margin v-model="block.config" />
      <sw-cms-block-config-sizing-mode v-model="block.config" />
      
      <!-- 新增8个数字输入控件，绑定自定义字段 -->
      <sw-number-field
        v-for="num in 8"
        :key="`scrollProgress${num}`"
        :label="`滚动进度 ${num}`"
        v-model="block.config[`scrollProgress${num}`]"
        :min="0"
        :max="100"
        step="1"
        style="margin: 10px 0"
      />
    </template>
  </sw-cms-block>
</template>

<script>
import 'sw-cms-block';
import 'sw-cms-block-config-margin';
import 'sw-cms-block-config-sizing-mode';
import 'sw-number-field';

export default {
  name: 'sw-cms-block-my-image-text-reversed',
  props: {
    block: {
      type: Object,
      required: true
    }
  }
};
</script>

3. 同步预览组件的字段渲染 #

修改sw-cms-preview-my-image-text-reversed组件，让后台预览能实时反映字段变化：

<template>
  <div class="sw-cms-preview-my-image-text-reversed">
    <!-- 预览自定义字段对应的效果 -->
    <div class="progress-group">
      <div 
        v-for="num in 8"
        :key="`preview-progress-${num}`"
        class="preview-progress-bar"
        :style="{ width: `${block.config[`scrollProgress${num}`]}%` }"
      >
        进度 {{ num }}: {{ block.config[`scrollProgress${num}`] }}%
      </div>
    </div>
    
    <!-- 原有区块预览内容 -->
    <div class="slot-container">
      <div class="left-slot">
        <sw-cms-slot-preview :slot="block.slots.left" />
      </div>
      <div class="right-slot">
        <sw-cms-slot-preview :slot="block.slots.right" />
      </div>
    </div>
  </div>
</template>

<script>
import 'sw-cms-slot-preview';

export default {
  name: 'sw-cms-preview-my-image-text-reversed',
  props: {
    block: {
      type: Object,
      required: true
    }
  }
};
</script>

<style scoped>
.progress-group {
  padding: 10px;
  background: #f5f5f5;
  margin-bottom: 20px;
}
.preview-progress-bar {
  height: 24px;
  line-height: 24px;
  padding: 0 10px;
  background: #2196F3;
  color: #fff;
  margin: 5px 0;
  border-radius: 4px;
}
.slot-container {
  display: flex;
  gap: 20px;
}
.left-slot, .right-slot {
  flex: 1;
  padding: 20px;
  background: #fff;
  border: 1px dashed #ddd;
}
</style>

4. 前端模板中使用字段控制区块设计 #

在区块的前端渲染模板（src/Resources/views/storefront/block/cms-block-my-image-text-reversed.html.twig）中，通过block.config调用自定义字段值，控制样式或结构：

{% block block_my_image_text_reversed %}
<div class="cms-block-my-image-text-reversed">
  <!-- 使用自定义字段控制元素样式 -->
  {% for num in 1..8 %}
    <div class="custom-progress-bar" 
         style="width: {{ block.config['scrollProgress'~num] }}%"
         data-progress="{{ block.config['scrollProgress'~num] }}">
    </div>
  {% endfor %}
  
  <div class="row">
    <div class="col-md-6">
      {% block block_my_image_text_reversed_left %}
        {% sw_slot "left" %}
      {% endblock %}
    </div>
    <div class="col-md-6">
      {% block block_my_image_text_reversed_right %}
        {% sw_slot "right" %}
      {% endblock %}
    </div>
  </div>
</div>
{% endblock %}

内容的提问来源于stack exchange，提问作者Illia Yalovoi