Ecommerce Magento 2 Magento 2 Tutorials Magento Development

How to Add Custom Filter to Product Grid in Magento 2 Admin?

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)
Loading...Loading...
Add Custom Filter to Product Grid in Magento 2 Admin

Custom filter in a product grid helps improvise the user interface and user experience on the store. Especially when there are a huge number of products in your Magento 2 store, the filters make it easier to find the product with ease. An inline product grid can help you easily add custom filter in the Magento 2 store. 

Let us take a look at step by step process to add custom filter to product grid in the Magento 2 admin:

Step 1: Create a product_listing.xml file in the below-given path:

app\code\Vendor\Extension\view\adminhtml\ui_component\

Now, 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: Create a di.xml file in the below-given path:

app\code\Vendor\Extension\etc\adminhtml\

Now, add the below code:

<?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: Create a Monthlyviewsfieldtocollection.php file in the below-given path:

app\code\Vendor\Extension\Ui\DataProvider\Product\

Now, add the below code:

<?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: Create a Monthlyviewsfiltertogrid.php file in the below-given path:

app\code\Vendor\Extension\Ui\DataProvider\Product\

Now, add the below code:

<?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']]]);
        }
    }
}

Once you implement the above steps, a custom filter gets successfully added to the product grid list in Magento 2 as shown below:

Let us look at the customer filter with other filter options as seen in the image below:

Hope this tutorial has been helpful to add a product grid to your Magento 2 store. If you face any issues while implementation, feel free to reach out. Our experts will be happy to guide. 

You may also like
Requested Store Is Not Found
How to Fix Magento 2 ‘Requested Store Is Not Found’?
PWA in 2021
All About Progressive Web App in 2021!

Leave Your Comment

Your Comment*

Your Name*