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.

test.html.twig

{% block test_list %}
    <sw-page>
        {% block test_list_sidebar %}
            <template #sidebar>
                <sw-sidebar>
                    {% block test_list_sidebar_filter %}
                        <sw-sidebar-item icon="default-action-filter"
                                         :title="Filter">

                            {% block test_list_sidebar_filter_items %}

                                <sw-field type="text"
                                        :label="product name"
                                        :placeholder="Enter the product name"
                                        v-model="productName">
                                </sw-field>

                                <sw-button
                                    size="small"
                                    @click="filter">
                                </sw-button>

                            {% endblock %}
                        </sw-sidebar-item>
                    {% 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 create a sidebar item component and add the component through which you can search the data, in my case I am using sw-field of type text and sw-button component to call the function.

index.js

import template from './test.html.twig';

const { Component, Mixin } = Shopware;
const { Criteria } = Shopware.Data;

Component.register('test-list', {
    template,

    inject: ['repositoryFactory'],

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

    data() {
        return {
            isLoading: false,
            list: null,
            productName: null
        };
    },

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

    created() {
        this.getList();
    },

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

        criteria() {
            if (this.productName) {
                const criteria = new Criteria();
                criteria.addFilter(Criteria.equalsAny('productName', this.productName));

                return criteria;
            } else {
                const criteria = new Criteria();
                return criteria;
            }
        }
    },

    methods: {

        getList() {
            this.isLoading = true;
            this.testRespository.search(this.criteria, Shopware.Context.api).then((result) => {
                this.list = result;
                this.isLoading = false;
            })
        },

        filter() {
            this.isLoading = true;
            this.getList();
        },
    }
});

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 the product name is available then criteria search data according to them.

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 🙂
Thank You.