Shopware 6.4.20：自定义组件如何读取SwProductList的filterOptions

下面提供几种可行的实现方案，按维护性优先级排序：

方案1：复用filterOptions生成逻辑（推荐） #

SwProductList的filterOptions是组件内部生成的，最可靠的方式是将生成逻辑抽离为公共工具函数，让两个组件共享：

1. 创建公共工具文件
   在你的插件中新增工具文件 src/Administration/Resources/app/administration/src/helper/productFilterHelper.js，把SwProductList中生成filterOptions的完整逻辑封装成函数：

// productFilterHelper.js
export const getProductFilterOptions = async (context) => {
    const filterOptions = [];

    // 复制SwProductList中生成筛选选项的逻辑（示例，需匹配原代码）
    const taxRepository = context.repositoryFactory.create('tax');
    const taxCriteria = new context.Shopware.Data.Criteria();
    const taxes = await taxRepository.search(taxCriteria, context.context);

    filterOptions.push({
        label: context.$tc('sw-product.list.filter.labelTax'),
        property: 'taxId',
        type: 'multi-select',
        options: taxes.map(tax => ({
            label: tax.name,
            value: tax.id
        }))
    });

    // 补充其他筛选选项的生成逻辑...

    return filterOptions;
};

2. 在SwProductList中复用工具函数（可选）
   如果希望原列表组件也使用统一逻辑，可重写SwProductList：

import { getProductFilterOptions } from '../helper/productFilterHelper';

Shopware.Component.override('sw-product-list', {
    async created() {
        this.$super('created');
        this.filterOptions = await getProductFilterOptions(this);
    }
});

3. 在自定义SwProductDetail组件中调用

import { getProductFilterOptions } from '../helper/productFilterHelper';

Shopware.Component.override('sw-product-detail', {
    data() {
        return {
            productFilterOptions: []
        };
    },
    async created() {
        this.$super('created');
        this.productFilterOptions = await getProductFilterOptions(this);
    }
});

方案2：通过Vuex共享状态 #

若需要在多组件间共享filterOptions，可以借助Vuex存储数据：

1. 创建Vuex模块
   新增src/Administration/Resources/app/administration/src/store/productFilter.js：

export default {
    namespaced: true,
    state: {
        filterOptions: []
    },
    mutations: {
        setProductFilterOptions(state, options) {
            state.filterOptions = options;
        }
    },
    getters: {
        getProductFilterOptions(state) {
            return state.filterOptions;
        }
    }
};

2. 注册Vuex模块
   在插件主入口src/Administration/Resources/app/administration/src/main.js中注册：

import productFilterStore from './store/productFilter';

Shopware.State.registerModule('myPlugin', productFilterStore);

3. 重写SwProductList提交数据到Vuex

Shopware.Component.override('sw-product-list', {
    watch: {
        filterOptions(newOptions) {
            this.$store.commit('myPlugin/setProductFilterOptions', newOptions);
        }
    },
    async created() {
        this.$super('created');
        this.$store.commit('myPlugin/setProductFilterOptions', this.filterOptions);
    }
});

4. 在SwProductDetail中获取Vuex数据

Shopware.Component.override('sw-product-detail', {
    computed: {
        productFilterOptions() {
            return this.$store.getters['myPlugin/getProductFilterOptions'];
        }
    }
});

方案3：直接复制生成逻辑（临时方案） #

如果只是临时需求，可直接把SwProductList中生成filterOptions的代码复制到自定义组件中：

Shopware.Component.override('sw-product-detail', {
    data() {
        return {
            productFilterOptions: []
        };
    },
    async created() {
        this.$super('created');
        
        // 复制SwProductList中的生成逻辑
        const filterOptions = [];

        const taxRepository = this.repositoryFactory.create('tax');
        const taxCriteria = new this.Shopware.Data.Criteria();
        const taxes = await taxRepository.search(taxCriteria, this.context);

        filterOptions.push({
            label: this.$tc('sw-product.list.filter.labelTax'),
            property: 'taxId',
            type: 'multi-select',
            options: taxes.map(tax => ({
                label: tax.name,
                value: tax.id
            }))
        });

        // 补充其他筛选选项逻辑...
        
        this.productFilterOptions = filterOptions;
    }
});

注意：此方案需同步维护两份逻辑，官方更新SwProductList的筛选逻辑时，你需要手动同步代码，仅适合临时场景。

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