Shopware 6插件配置：能否自定义配置替代config.xml实现动态行为？

当然可以完全绕过config.xml来实现自定义配置页面，以此支持依赖配置值的动态交互逻辑。下面是具体的实现方案：

核心思路 #

Shopware 6允许通过自定义后端控制器、Vue组件和路由，完全接管插件配置的UI和逻辑，同时依然复用官方的SystemConfigService来管理配置数据，既保证灵活性又兼容系统原生的配置机制。

实现步骤 #

1. 注册后台配置路由 #

在插件的src/Resources/config/routes.xml中添加自定义配置页面的路由，指向专属控制器：

<?xml version="1.0" encoding="UTF-8"?>
<routes xmlns="http://symfony.com/schema/routing"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://symfony.com/schema/routing https://symfony.com/schema/routing/routing-1.0.xsd">

    <route id="my_plugin_config" path="/my-plugin/config">
        <default key="_controller">MyPlugin\Controller\ConfigController::index</default>
        <default key="_routeScope">admin</default>
    </route>
    
    <route id="my_plugin_config_save" path="/my-plugin/config/save">
        <default key="_controller">MyPlugin\Controller\ConfigController::save</default>
        <default key="_routeScope">admin</default>
    </route>
</routes>

2. 编写后端控制器处理配置读写 #

创建src/Controller/ConfigController.php，负责读取和保存配置值，依赖Shopware官方的SystemConfigService：

<?php

namespace MyPlugin\Controller;

use Shopware\Core\System\SystemConfig\SystemConfigService;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;

#[Route(defaults: ['_routeScope' => ['admin']])]
class ConfigController extends AbstractController
{
    public function __construct(private readonly SystemConfigService $systemConfigService)
    {
    }

    #[Route(path: '/my-plugin/config', name: 'my_plugin_config', methods: ['GET'])]
    public function index()
    {
        // 读取现有配置项
        $config = [
            'enableAdvancedFeature' => $this->systemConfigService->get('MyPlugin.config.enableAdvancedFeature'),
            'featureApiKey' => $this->systemConfigService->get('MyPlugin.config.featureApiKey'),
            'featureTimeout' => $this->systemConfigService->get('MyPlugin.config.featureTimeout')
        ];

        return $this->render('@MyPlugin/config/index.html.twig', ['config' => $config]);
    }

    #[Route(path: '/my-plugin/config/save', name: 'my_plugin_config_save', methods: ['POST'])]
    public function save(Request $request): JsonResponse
    {
        $data = $request->request->all();

        // 批量保存配置
        foreach ($data as $key => $value) {
            $this->systemConfigService->set('MyPlugin.config.' . $key, $value);
        }

        return new JsonResponse(['success' => true]);
    }
}

3. 开发动态交互的Vue配置组件 #

在src/Resources/app/administration/src/page/my-plugin/config/index.js中注册Vue组件，实现依赖配置的动态显示逻辑：

import template from './config.html.twig';

Shopware.Component.register('my-plugin-config', {
    template,

    data() {
        return {
            config: {
                enableAdvancedFeature: false,
                featureApiKey: '',
                featureTimeout: 30
            },
            isLoading: false
        };
    },

    created() {
        this.loadConfig();
    },

    methods: {
        async loadConfig() {
            this.isLoading = true;
            try {
                const response = await this.$http.get('/my-plugin/config');
                this.config = response.data.config;
            } catch (error) {
                this.$notification.dispatch({
                    type: 'error',
                    title: this.$tc('global.default.error'),
                    message: this.$tc('my-plugin.config.loadError')
                });
            } finally {
                this.isLoading = false;
            }
        },

        async saveConfig() {
            this.isLoading = true;
            try {
                await this.$http.post('/my-plugin/config/save', this.config);
                this.$notification.dispatch({
                    type: 'success',
                    title: this.$tc('global.default.success'),
                    message: this.$tc('my-plugin.config.saveSuccess')
                });
            } catch (error) {
                this.$notification.dispatch({
                    type: 'error',
                    title: this.$tc('global.default.error'),
                    message: this.$tc('my-plugin.config.saveError')
                });
            } finally {
                this.isLoading = false;
            }
        }
    }
});

对应的模板文件src/Resources/app/administration/src/page/my-plugin/config/config.html.twig，实现动态UI：

{% block component %}
    <sw-card title="我的插件配置">
        <template slot="content">
            <sw-switch-field
                v-model="config.enableAdvancedFeature"
                label="启用高级功能"
                :disabled="isLoading"
            ></sw-switch-field>

            <!-- 仅当高级功能启用时显示相关配置项 -->
            <sw-text-field
                v-if="config.enableAdvancedFeature"
                v-model="config.featureApiKey"
                label="API密钥"
                :disabled="isLoading"
                required
            ></sw-text-field>

            <sw-number-field
                v-if="config.enableAdvancedFeature"
                v-model="config.featureTimeout"
                label="请求超时（秒）"
                :disabled="isLoading"
                min="5"
                max="120"
            ></sw-number-field>
        </template>

        <template slot="actions">
            <sw-button
                variant="primary"
                @click="saveConfig"
                :disabled="isLoading"
            >
                {{ $tc('global.default.save') }}
            </sw-button>
        </template>
    </sw-card>
{% endblock %}

4. 添加后台菜单入口 #

在src/Resources/config/admin.menu.xml中将配置页面添加到后台菜单：

<?xml version="1.0" encoding="UTF-8"?>
<menu xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="https://raw.githubusercontent.com/shopware/platform/trunk/src/Core/Framework/Resources/schema/menu.xsd">
    <menu-item>
        <parent>SwagSettings</parent>
        <name>my-plugin-config</name>
        <label>我的插件配置</label>
        <route>my_plugin_config</route>
        <icon>default-settings-icon</icon>
        <position>100</position>
    </menu-item>
</menu>

方案优势 #

• 完全掌控配置页面的交互逻辑，轻松实现依赖配置值的动态显示/隐藏、实时校验、联动更新等高级行为
• 不受config.xml的字段类型限制，可以自定义任意复杂的UI组件
• 配置数据依然通过Shopware官方的SystemConfigService管理，完美兼容多店铺配置、权限控制等系统原生特性

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