Shopware 6插件开发：如何在扩展列表页添加厂商名称与技术名称？

要在Shopware 6后台的扩展列表页面新增厂商名称和技术名称两项信息，可通过以下步骤实现：

1. 创建插件并扩展后台组件 #

Shopware 6的后台扩展列表由sw-extension-list组件渲染，我们需要通过自定义插件扩展该组件：

1.1 编写组件扩展代码 #

在插件的src/Resources/app/administration/src/extension/sw-extension-list/目录下创建两个文件：

index.js

import template from './sw-extension-list.html.twig';

Shopware.Component.extend('sw-extension-list', 'sw-extension-list', {
    template,

    computed: {
        columns() {
            const originalColumns = this.$super('columns');
            // 添加厂商名称列配置
            originalColumns.push({
                property: 'author',
                label: '扩展厂商',
                allowResize: true,
                sortable: true
            });
            // 添加技术名称列配置
            originalColumns.push({
                property: 'technicalName',
                label: '技术名称',
                allowResize: true,
                sortable: true
            });
            return originalColumns;
        }
    }
});

sw-extension-list.html.twig

{% block sw_extension_list_table_columns %}
    {{ parent() }}
    <th class="sw-extension-list__table-column" v-for="column in columns.slice(-2)" :key="column.property">
        {{ $tc(column.label) }}
    </th>
{% endblock %}

{% block sw_extension_list_table_row %}
    {{ parent() }}
    <td class="sw-extension-list__table-column">
        {{ extension.author }}
    </td>
    <td class="sw-extension-list__table-column">
        {{ extension.technicalName }}
    </td>
{% endblock %}

1.2 注册组件扩展 #

在插件的src/Resources/app/administration/src/main.js中引入上述扩展：

import './extension/sw-extension-list';

2. 编译并激活插件 #

完成代码编写后，执行以下操作：

• 安装并激活插件：bin/console plugin:install --activate YourPluginName
• 编译后台资源：bin/build-administration.sh（Linux/Mac）或bin/build-administration.bat（Windows）

效果展示 #

完成后，后台扩展列表页面将新增厂商名称和技术名称列，效果如下：

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