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

Magento is providing the best features to eCommerce users. That's why it is natural that you will have a lot of products in your Magento 2 store. Sometimes it is difficult to find any particular product or group of products from too many product grids. But Magento filter grid allows you to get your required product easily and quickly. Admin can create a custom filter based on their requirement. So today, we are back with another solution that how to add a custom filter to the product grid in Magento 2.

Magento understands that when you have a massive product, it is quite difficult to handle. Therefore custom filtering is one of the useful functionality that Magento offers.

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

Todat we will create a custom filter for monthly views. Let's check step-by-step guidance on how to add a custom filter to the product grid in Magento 2.

Step 1: Firstly, create a product_listing.xml file at app\code\Vendor\Extension\view\adminhtml\ui_component\ and add the below code.

<?xml version="1.0"?>

<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="monthly_views" sortOrder="50">

            <settings>

                <addField>true</addField>

                <filter>dateRange</filter> <!-- Range component represents two input fields of date or text type-->

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

            </settings>

        </column>

    </columns>

</listing>

Step 2: Now, create a di.xml file at app\code\Vendor\Extension\etc\adminhtml\ and paste the following code in the file.

<?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="monthly_views" xsi:type="object">

                    Vendor\Extension\Ui\DataProvider\Product\Monthlyviewsfieldtocollection

                </item>

            </argument>

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

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

                     Vendor\Extension\Ui\DataProvider\Product\Monthlyviewsfiltertogrid

                </item>

            </argument>

        </arguments>

    </type>

</config>

Step 3: Then, create a Monthlyviewsfieldcollection.php file at app\code\Vendor\Extension\Ui\DataProvider\Product\. Now copy-paste the below code into the file.

<?php

namespace Vendor\Extension\Ui\DataProvider\Product;


use Magento\Framework\Data\Collection;

use Magento\Ui\DataProvider\AddFieldToCollectionInterface;


class Monthlyviewsfieldtocollection implements AddFieldToCollectionInterface

{

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

    {

        $collection->joinField(

            'monthly_views',

            'report_viewed_product_aggregated_monthly',

            'views_num',

            'product_id=entity_id',

             null,

            'left'

        );

    }

}

Step 4: Lastly, create a Monthlyviewsfiltergrid.php file at app\code\Vendor\Extension\Ui\DataProvider\Product\. Then, add the following code to the file.

<?php

namespace Vendor\Extension\Ui\DataProvider\Product;

use Magento\Framework\Data\Collection;

use Magento\Ui\DataProvider\AddFilterToCollectionInterface;

class Monthlyviewsfiltertogrid implements AddFilterToCollectionInterface

{

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

    {

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

            $collection->addFieldToFilter([['attribute' => 'monthly_views', 'gteq' => $condition['gteq']]]);

        }

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

            $collection->addFieldToFilter([['attribute' => 'monthly_views', 'lteq' => $condition['lteq']]]);

        }

    }

}

That's all you need to do.

After you have successfully implemented the code, you will see the custom filter in the admin backend product grid list in Magento 2.

You can also check the custom filter with other filter options.

Conclusion

Hope this article "How to Add a Custom Filter to the Product Grid in Magento 2" will help you in creating your custom filter and filer UI for your Magento 2 store. Try this way to add a custom product grid in Magento 2. If you come across any errors or need some clarification feel free to drop me a line. Happy to help – Always.

Check out our blog of  How to Create Product Attribute in Magento 2 Programmatically