Shopware 6后台添加客户实体扩展字段的简易示例及插件参考

1. 插件基础结构 #

创建名为CustomerExtraField的插件，核心目录结构如下：

src/
├── Resources/
│   └── app/
│       └── administration/
│           └── src/
│               ├── module/
│               │   └── sw-customer/
│               │       ├── component/
│               │       │   └── sw-customer-detail-extra-field/
│               │       │       ├── sw-customer-detail-extra-field.html.twig
│               │       │       └── sw-customer-detail-extra-field.js
│               │       └── page/
│               │           └── sw-customer-detail/
│               │               └── sw-customer-detail.js
│               └── main.js
└── CustomerExtraField.php

2. 插件核心注册文件（CustomerExtraField.php） #

<?php declare(strict_types=1);

namespace CustomerExtraField;

use Shopware\Core\Framework\Plugin;

class CustomerExtraField extends Plugin
{
}

3. 后台Vue组件扩展实现 #

3.1 自定义字段组件逻辑（sw-customer-detail-extra-field.js） #

import template from './sw-customer-detail-extra-field.html.twig';

Shopware.Component.register('sw-customer-detail-extra-field', {
    template,
    inject: ['repositoryFactory'],
    props: {
        customer: {
            type: Object,
            required: true
        }
    },
    computed: {
        customerRepository() {
            return this.repositoryFactory.create('customer');
        }
    },
    methods: {
        async saveExtraField() {
            await this.customerRepository.save(this.customer, Shopware.Context.api);
            this.$notify.success({
                title: this.$tc('global.default.success'),
                message: this.$tc('global.notification.saveSuccess')
            });
        }
    }
});

3.2 自定义字段组件模板（sw-customer-detail-extra-field.html.twig） #

<sw-card title="自定义扩展字段">
    <template #content>
        <sw-text-field
            v-model="customer.extensions.yourExtraFieldName"
            label="你的扩展字段名称"
            @blur="saveExtraField"
        ></sw-text-field>
    </template>
</sw-card>

替换yourExtraFieldName为你实际扩展的字段名

3.3 嵌入客户详情页（sw-customer-detail.js） #

import './component/sw-customer-detail-extra-field';

const { Component } = Shopware;

Component.override('sw-customer-detail', {
    template: `
        <template #content-bottom>
            <sw-customer-detail-extra-field :customer="customer"></sw-customer-detail-extra-field>
        </template>
    `
});

4. 后台入口注册（main.js） #

import './module/sw-customer/page/sw-customer-detail';

5. 安装测试 #

1. 将插件放入Shopware的custom/plugins目录
2. 执行命令：

bin/console plugin:refresh
bin/console plugin:install --activate CustomerExtraField
bin/console cache:clear

3. 登录后台进入客户详情页，即可看到新增的自定义字段区域，修改后输入框失焦自动保存。

关键说明 #

• 示例用content-bottom扩展点将组件放在详情页底部，可根据需求替换为content、sidebar等其他扩展点
• 若扩展字段是关联实体或需要特殊控件，替换sw-text-field为Shopware内置的对应组件（如sw-select-field、sw-date-picker）即可
• 保存逻辑也可改为与页面原生保存按钮联动，示例用失焦保存为简化实现

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