How to add a filter in the administration at the Shopware

In this blog, you are going to learn “How to add a filter in the administration at Shopware.”
I hope you know the directory structure of Shopware 6 plugin, if you don’t know, see here- https://docs.shopware.com/en/shopware-platform-dev-en/internals/directory-structure.

The main entry point to extend the administration via plugin is the main.js file. You have to be placed into a /src/Resources/app/administration/src directory in order to be found by Shopware 6.

If you don’t know how to create a module, you can look here.

list.html.twig

{% block wk_test_list %}
    <sw-page>
        {% block wk_test_list_smart_bar_header %}
            <template #smart-bar-header>
                {% block wk_test_list_smart_bar_header_title %}
                    <h2>
                        {% block wk_test_list_smart_bar_header_title_text %}
                            {{ $tc('sw-settings.index.title') }} <sw-icon name="small-arrow-medium-right" small></sw-icon>
                            {{ $tc('wkws.test.title') }}
                        {% endblock %}

                        {% block wk_test_list_smart_bar_header_total %}
                            <span v-if="!isLoading" class="sw-page__smart-bar-amount">
                                ({{ total }})
                            </span> 
                        {% endblock %}
                    </h2>
                {% endblock %}
            </template>
        {% endblock %}

        <template #content>
            {% block wk_test_list_content %}
                <div>
                    {% block wk_test_list_grid %}
                        <sw-entity-listing 
                            v-if="test"
                            :items="test"
                            :columns="testColumns"
                            :repository="testRepository"
                            :showSelection="false"
                            :isLoading="isLoading"
                            >                                                     
                        </sw-entity-listing>
                    {% endblock %}
                </div>
            {% endblock %}
        </template>

        {% block wk_test_list_sidebar %}
            <template #sidebar>
                <sw-sidebar class="sw-order-list__sidebar">
                    {% block wk_test_list_sidebar_refresh %}
                        <sw-sidebar-item
                            icon="default-arrow-360-left"
                            :title="$tc('sw-order.list.titleSidebarItemRefresh')"
                            @click="onRefresh">
                        </sw-sidebar-item>
                    {% endblock %}

                    {% block wk_test_list_sidebar_filter %}
                        <sw-sidebar-filter-panel
                            entity="test"
                            :storeKey="storeKey"
                            :filters="listFilters"
                            :defaults="defaultFilters"
                            :activeFilterNumber="activeFilterNumber"
                            @criteria-changed="updateCriteria">
                        </sw-sidebar-filter-panel>
                    {% endblock %}
                </sw-sidebar>
            </template>
        {% endblock %}
    </sw-page>
{% endblock %}

In the above code, we are using the sidebar component you can look here. Under the sidebar component, you have to add sw-sidebar-filter-panel component and in filters attribute we add the list of filter, defaults attribute is the list of filter name, activeFilterNumber contain number of active filter and criteria-change method update the criteria of data.

index.js

const {Component, Mixin} = Shopware;
const { Criteria } = Shopware.Data;
import template from './list.html.twig';

Component.register('wk-test-list', {
    template,
    
    inject: [
        'repositoryFactory',
        'filterFactory'
    ],

    mixins: [
        Mixin.getByName('notification'),
        Mixin.getByName('listing'),
        Mixin.getByName('placeholder')
    ],

    metaInfo() {
        return {
            title: this.$createTitle()
        };
    },

    data() {
        return {
            isLoading: false,
            showDeleteModal: false,
            total: 0,
            page: 1,
            limit: 30,
            test: null,
            storeKey: 'grid.filter.test',    
            defaultFilters: [
                'test-status-filter'
            ],       
            activeFilterNumber: 0, 
            filterCriteria: [],
        };
    },


    computed: {
       testRepository() {
            return this.repositoryFactory.create('test');
        },

        testColumns() {
            return this.getTestColumns();
        },

        listFilters() {
            return this.filterFactory.create('test', {
                'test-status-filter': {
                    property: 'status',
                    label: this.$tc('sw-customer.filter.status.label'),
                    placeholder: this.$tc('sw-customer.filter.status.placeholder'),
                }
            });
        },

        defaultCriteria() {
            const defaultCriteria = new Criteria(this.page, this.limit);
            // eslint-disable-next-line vue/no-side-effects-in-computed-properties
            

            defaultCriteria.setTerm(this.term);
            defaultCriteria.addSorting(Criteria.sort('createdAt', 'DESC'));
            

            this.filterCriteria.forEach(filter => {
                defaultCriteria.addFilter(filter);
            });

            return defaultCriteria;
        },
    },

    watch: {
        defaultCriteria: {
            handler() {
                this.getList();
            },
            deep: true,
        },
    },

    created() {
       
    },

    methods: {
        async getList() {
            this.isLoading = true;

            const criteria = await Shopware.Service('filterService')
                .mergeWithStoredFilters(this.storeKey, this.defaultCriteria);

            this.activeFilterNumber = criteria.filters.length;

            try {
                const items = await this.testRepository.search(this.defaultCriteria);

                this.total = items.total;
                this.test = items;
                this.isLoading = false;
                this.selection = {};
            } catch {
                this.isLoading = false;
            }
        },
        
        updateCriteria(criteria) {
            this.page = 1;
            this.filterCriteria = criteria;
        },

        onDelete(id) {
            this.showDeleteModal = id;
        },

        onCloseDeleteModal() {
            this.showDeleteModal = false;
        },

        onConfirmDelete(id) {
            this.showDeleteModal = false;

            return this.testRepository.delete(id, Shopware.Context.api).then(() => {
                this.getList();
            });
        },

        getTestColumns() {
            return[{
                property: 'firstName',
                dataIndex: 'firstName',
                label: 'Name',
                allowResize: true
            },{
                property: 'status',
                dataIndex: 'status',
                label: 'Status',
                allowResize: true
            }]
        }
    }
});

In this file, there is an entity named `test`. There is a simple logic to search the data from the entity you can build your logic according to need. If filter contain status then criteria change method update the list of filter which is name as filterCriteria. We should inject filterFactory service to use the filter service. listFilters function contain the list of filter which you want to show in the listing page and filter them according to your need.

The typed global search needs an instance of the JavaScript class ApiService with the key of the entity in the camel case suffixed with Service. The service key is the best service when requesting service for a test. Secondly, entity definition gets automatically an instance in the injection container but can override so there is no additional work needed.

You can add the filter on any page like listing page, detail page according to your need. Secondly, add the single select or multi-select to filter the data from the entity and show them because it is not possible to add the repository in the administration search. It makes the website very complex. We recommend you that add filter on the page.

I hope it will help you. Thanks for reading. Happy Coding 🙂

Also talk with our experts for all kinds of Shopware Customization services for web store and mobile app development, module development, theme design, third-party integrations, and much more.