Shopware插件配置：如何移除Save按钮或替换为自定义动作？

针对Shopware 6（Admin基于Vue.js） #

方法1：通过组件扩展移除保存按钮 #

创建插件Admin端的组件扩展，覆盖默认的保存按钮区域：

1. 在插件目录下创建文件：src/Resources/app/administration/src/component/sw-entity-save-bar/sw-entity-save-bar-remove.extension.vue

<template>
  <template #save-bar-right>
    <!-- 留空即可移除原有保存按钮 -->
  </template>
</template>

<script>
export default {
  name: 'SwEntitySaveBarRemoveExtension'
};
</script>

2. 在src/Resources/app/administration/src/main.js中注册扩展：

import './component/sw-entity-save-bar/sw-entity-save-bar-remove.extension';

Shopware.Component.registerExtension(
  'sw-entity-save-bar-remove-button',
  'sw-entity-save-bar',
  { component: 'SwEntitySaveBarRemoveExtension' }
);

方法2：替换为自定义动作按钮 #

同样通过组件扩展，替换原有按钮并添加自定义逻辑：

1. 创建扩展组件文件：src/Resources/app/administration/src/component/sw-entity-save-bar/sw-entity-save-bar-custom.extension.vue

<template>
  <template #save-bar-right>
    <button
      class="sw-button sw-button--primary"
      @click="runCustomAction"
    >
      执行自定义动作
    </button>
  </template>
</template>

<script>
export default {
  name: 'SwEntitySaveBarCustomExtension',
  methods: {
    runCustomAction() {
      // 获取当前插件配置表单数据
      const configEntity = this.$parent.currentEntity;
      // 调用Shopware数据仓库保存逻辑（或自定义API）
      const configRepo = this.$repositoryFactory.create('plugin_config');
      
      configRepo.save(configEntity).then(() => {
        this.$notify.success({
          title: '操作成功',
          message: '自定义动作已执行完成'
        });
      }).catch(err => {
        this.$notify.error({
          title: '操作失败',
          message: err.message || '执行自定义动作时出错'
        });
      });
    }
  }
};
</script>

2. 在main.js中注册扩展：

import './component/sw-entity-save-bar/sw-entity-save-bar-custom.extension';

Shopware.Component.registerExtension(
  'sw-entity-save-bar-custom-action',
  'sw-entity-save-bar',
  { component: 'SwEntitySaveBarCustomExtension' }
);

方法3：通过DOM操作快速修改（适合简单场景） #

如果不想编写组件扩展，可通过监听页面加载事件，直接操作DOM：
在main.js中添加：

Shopware.Application.addServiceProvider('customConfigHandler', () => {
  return {
    init() {
      // 监听插件配置加载完成事件
      Shopware.State.subscribeAction(action => {
        if (action.type === 'sw-plugin-config/loadConfig') {
          setTimeout(() => {
            // 隐藏原有保存按钮
            const saveBtn = document.querySelector('.sw-entity-save-bar__button-save');
            if (saveBtn) saveBtn.style.display = 'none';
            
            // 添加自定义按钮
            const btnContainer = document.querySelector('.sw-entity-save-bar__right');
            const customBtn = document.createElement('button');
            customBtn.className = 'sw-button sw-button--primary';
            customBtn.textContent = '自定义动作';
            customBtn.addEventListener('click', () => {
              // 这里写入你的自定义逻辑
              console.log('自定义动作触发');
            });
            btnContainer.appendChild(customBtn);
          }, 500);
        }
      });
    }
  };
});

// 初始化服务
Shopware.Application.getService('customConfigHandler').init();

针对Shopware 5 #

移除或替换保存按钮 #

通过Smarty模板覆盖默认的保存按钮区块：

1. 在插件目录创建模板文件：Resources/views/backend/config/edit.tpl

{extends file="backend/config/edit.tpl"}

{block name="backend_config_edit_save_button"}
  <!-- 替换为自定义按钮 -->
  <button type="button" class="btn btn-primary" onclick="CustomConfigAction.execute()">
    执行自定义动作
  </button>
{/block}

2. 创建对应的JS逻辑文件：Resources/backend/js/config.js

CustomConfigAction = {
  execute: function() {
    const form = Ext.getCmp('config-form').getForm();
    if (!form.isValid()) return;
    
    // 提交到自定义控制器动作
    form.submit({
      url: '{url controller="YourPluginConfig" action="saveCustom"}',
      success: function(form, action) {
        Ext.Msg.success('成功', '自定义动作执行完成');
      },
      failure: function(form, action) {
        Ext.Msg.error('错误', action.result.message || '操作失败');
      }
    });
  }
};

3. 在插件的Bootstrap.php中注册JS文件：

public function install()
{
    $this->registerScript();
    return parent::install();
}

private function registerScript()
{
    $this->subscribeEvent(
        'Enlight_Controller_Action_PostDispatch_Backend_Config',
        'onPostDispatchConfig'
    );
}

public function onPostDispatchConfig(Enlight_Event_EventArgs $args)
{
    $controller = $args->get('subject');
    $view = $controller->View();
    
    $view->addTemplateDir($this->Path() . 'Resources/views/');
    $view->addJsFile($this->Path() . 'Resources/backend/js/config.js');
}

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