How to Add a Custom Filter to the Product Grid in Magento 2?

Today, we’re going to teach you guys how to add a custom filter to the product grid in a Magento 2 store.

The grid filter in Magento 2 is useful when you have a massive product catalog as it’s difficult to manage all products efficiently and find the required product quickly.

And in this post, we’re going to show you exactly how to add a custom filter to the product grid in your Magento 2 store.

How to Add a Custom Filter to the Product Grid in Magento 2

Please follow the below steps to learn how to add a custom filter to the product grid in the Magento 2 store.

Step 1. First of all, you need to create a registration.php file in the app/code/Magedelight/Testgrid/ folder & paste the following code to add Magento 2 admin grid custom filter.

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

    \Magento\Framework\Component\ComponentRegistrar::MODULE,

    'Magedelight_Testgrid',

    __DIR__

);

Step 2. After that, you need to create a module.xml file in the app/code/Magedelight/Testgrid/etc/ folder & paste the following code for adding the custom filter to the grid.

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 

xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">

    <module name="Magedelight_Testgrid" setup_version="1.0.0">

    </module>

</config>

Step 3. Next, you need to initialize the column in the UI Component by creating a product_listing.xml file in the app/code/Magedelight/Testgrid/view/adminhtml/ui_component/ folder & paste the following code.

<?xml version="1.0" encoding="UTF-8"?>

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 

xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">

    <columns name="product_columns" class="Magento\Catalog\Ui\Component\Listing\Columns">

        <column name="yearly_views" sortOrder="100">

            <settings>

                <addField>true</addField>

                <filter>textRange</filter>

                <label translate="true">Yearly views</label>

            </settings>

        </column>

    </columns>

</listing>

Also read: How to Remove Decimals from Quantity in Product Grid in Magento 2?

Step 4. Now, you need to create an AddYearlyViewsFieldToCollection.php file in the app/code/Magedelight/Testgrid/Ui/DataProvider/Product/ folder & paste the following code to set up a column for the product grid.

<?php

namespace Magedelight\Testgrid\Ui\DataProvider\Product;

use Magento\Framework\Data\Collection;

use Magento\Ui\DataProvider\AddFieldToCollectionInterface;

class AddYearlyViewsFieldToCollection implements AddFieldToCollectionInterface

{

    public function addField(Collection $collection, $field, $alias = null)

    {

        $collection->joinField(

            'yearly_views',

            'report_viewed_product_aggregated_yearly',

            'views_num',

            'product_id=entity_id',

            null,

            'left'

        );

    }

}

Step 5. After that, create an AddYearlyViewsFilterToGrid.php file in the app/code/Magedelight/Testgrid/Ui/DataProvider/Product/ folder & paste the following code to set up a custom filter in the Magento 2 admin grid.

<?php

namespace Magedelight\Testgrid\Ui\DataProvider\Product;

use Magento\Catalog\Api\Data\ProductInterface;

use Magento\Framework\Data\Collection;

use Magento\Ui\DataProvider\AddFilterToCollectionInterface;

class AddYearlyViewsFilterToGrid implements AddFilterToCollectionInterface

{

    public function addFilter(Collection $collection, $field, $condition = null)

    {

        if (isset($condition['gteq'])) {

            $collection->addFieldToFilter([[

                'attribute' => 'yearly_views', 'gteq' => $condition['gteq']]

            ]);

        }

        if (isset($condition['lteq'])) {

            $collection->addFieldToFilter([[

                'attribute' => 'yearly_views', 'lteq' => $condition['lteq']]

            ]);

        }

    }

}

Step 6. Lastly, you need to create a di.xml file in the app/code/Magedelight/Testgrid/etc/adminhtml/ folder & paste the following code to add functions addFilterStrategies.

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

    <type name="Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider">

        <arguments>

            <argument name="addFieldStrategies" xsi:type="array">

                <item name="yearly_views" xsi:type="object">

                    Magedelight\Testgrid\Ui\DataProvider\Product\AddYearlyViewsFieldToCollection

                </item>

            </argument>

            <argument name="addFilterStrategies" xsi:type="array">

                <item name="yearly_views" xsi:type="object">

                    Magedelight\Testgrid\Ui\DataProvider\Product\AddYearlyViewsFilterToGrid

                </item>

            </argument>

        </arguments>

    </type>

</config>

Also read: How to Create a Downloadable Product in Magento 2 Programmatically?

Conclusion

And that’s all!

This is the best way to add a custom filter to the product grid in Magento 2 store.

And if you need our professional assistance, feel free to contact us anytime.