How to Add a Custom Filter to the Product Grid in Magento 2?
In this article, we will discuss on How to Add a Custom Filter to the Product Grid in Magento 2. For add a custom filter to the product grid in your Magento 2 store, then follows below steps:
Steps to Add a Custom Filter in Magento 2 Product Grid
Step 1– Create a registration.php file
First, we create a “registration.php” in the app/code/Mageants/Blog and add the following code.
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Mageants_Blog',
__DIR__
);
|
Step 2 – Create a module.xml file
After creating registration.php file, we will create a file “module.xml” in the app/code/Mageants/Blog/etc/ and add the following code.
<?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="Mageants_Blog" setup_version="1.0.0">
</module>
</config>
|
Step 3– Create a ProductDataProvider.php file
Now, we need to create a ProductDataProvider file “ProductDataProvider.php” in the app/code/Mageants/Blog/Ui/DataProvider/Product and add the following code.
In this file, we can add to the collection the needed field with the help of the addField function. We connect the table ID and category ID. Here we’ve used a view statistics table.
<?php
namespace Mageants\Blog\Ui\DataProvider\Product;
class ProductDataProvider extends \Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider
{
public function addFilter(\Magento\Framework\Api\Filter $filter)
{
if ($filter->getField() == 'category_id') {
$this->getCollection()->addCategoriesFilter(array('in' => $filter->getValue()));
} elseif (isset($this->addFilterStrategies[$filter->getField()])) {
$this->addFilterStrategies[$filter->getField()]
->addFilter(
$this->getCollection(),
$filter->getField(),
[$filter->getConditionType() => $filter->getValue()]
);
} else {
parent::addFilter($filter);
}
}
}
|
Step 4 – Create di.xml file
create a di.xml file in the app/code/Mageants/Blog/etc and add the following code.
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<preference for="Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider" type="Mageants\Blog\Ui\DataProvider\Product\ProductDataProvider" />
</config>
</section>
</system>
</config>
|
Step 5 – Create a Categorylist.php file
Create Categorylist.php file in app/code/Mageants/Blog/Model/Category and add the following code:
<?php
namespace Mageants\Blog\Model\Category;
class CategoryList implements \Magento\Framework\Option\ArrayInterface
{
public function __construct(
\Magento\Catalog\Model\ResourceModel\Category\CollectionFactory $collectionFactory
) {
$this->_categoryCollectionFactory = $collectionFactory;
}
public function toOptionArray($addEmpty = true)
{
$collection = $this->_categoryCollectionFactory->create();
$collection->addAttributeToSelect(“name”);
$options = [];
if ($addEmpty) {
$options[] = [“label” => __('-- Please Select a Category --'), “value” => ''];
}
foreach ($collection as $category) {
$options[] = ['label' => $category->getName(), 'value' => $category->getId()];
}
return $options;
}
}
|
Step 6 – Create a Category.php file
Now, we need to create a Category file “Category.php” in the app/code/Mageants/Blog/Ui/Component/Listing/Column and add the following code.
<?php
namespace Mageants\Blog\Ui\Component\Listing\Column;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
class Category extends \Magento\Ui\Component\Listing\Columns\Column
{
public function prepareDataSource(array $dataSource)
{
$fieldName = $this->getData('name');
if (isset($dataSource['data']['items'])) {
foreach ($dataSource['data']['items'] as & $item) {
$productId = $item['entity_id'];
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$product = $objectManager->create('Magento\Catalog\Model\Product')->load($productId);
$cats = $product->getCategoryIds();
$categories = array();
if (count($cats)) {
foreach ($cats as $cat) {
$category = $objectManager->create('Magento\Catalog\Model\Category')->load($cat);
$categories[] = $category->getName();
}
}
$item[$fieldName] = implode(',', $categories);
}
}
return $dataSource;
}
}
|
Step 7– Create a product_listing.xml file
Now, we need to create a Category file “product_listing.xml” in the app/code/Mageants/Blog/view/adminhtml/ui_component and add the following 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="category_id" class="Mageants\Blog\Ui\Component\Listing\Column\Category">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Mageants\Blog\Model\Category\Categorylist</item>
<item name="config" xsi:type="array"<
<item name="filter" xsi:type="string">select</item>
<item name="add_field" xsi:type="boolean">true</item>
<item name="label" xsi:type="string" translate="true">Categories</item>
<item name="sortOrder" xsi:type="number">75</item>
<item name="dataType" xsi:type="string">select</item>
</item>
</argument>
</column>
</columns>
</listing>
|
After following above steps, run below commands:
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush
After you implement the above code, please check output in to the admin panel and click on Product, go to filters and select Product and show Categories Filed.
Conclusion:
In this tutorial, we will explain in detail for how to add custom filter to product grid in Magento 2 admin. In Magento 2 Product Grid, There are no category columns by default display in Grid. But, Sometimes we need to filter products by category in Magento 2 admin.
