Magento – Magento 2.1 Create a filter in the product grid by new attribute

filtermagento-2.1magento2products

I used Magento 2.1 and want to add new filter in the product grid. But when I added my module the website loading forever.
Please help me to solve the problem. I have searched on the internet, but I didn't see any similar problem.
Bellow my code:

etc/adminhtml/di.xml

<type name="Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider">
    <arguments>
        <argument name="addFieldStrategies" xsi:type="array">
            <item name="configurable_options" xsi:type="object">Training\Unit6\Ui\DataProvider\Product\AddConfigurableOptionsToCollection</item>
        </argument>
    </arguments>
</type>

Ui/Component/Listing/Column/Options.php

namespace Training\Unit6\Ui\Component\Listing\Column;

class Options implements \Magento\Framework\Data\OptionSourceInterface
{
    protected $options;
    public function toOptionArray()
    {
        $this->options = [
            [
                'label' => ' ',
                'value' => 0
            ],
            [
                'label' => 'One',
                'value' => 1
            ],
            [
                'label' => 'Two',
                'value' => 2
            ],
            [
                'label' => 'Three',
                'value' => 3
            ],
        ];
        return $this->options;
    }
}

Ui/DataProvider/Product/AddConfigurableOptionsToCollection.php

namespace Training\Unit6\Ui\DataProvider\Product;

use Magento\Ui\DataProvider\AddFilterToCollectionInterface;
use Magento\ConfigurableProduct\Model\ResourceModel\Product\Type\Configurable\Attribute\Collection as ConfigurableCollection;
use Magento\Framework\Data\Collection;

class AddConfigurableOptionsToCollection implements AddFilterToCollectionInterface {

    protected $configurableOptions = null;

    public function __construct(ConfigurableCollection $collection) {
        $this->configurableOptions = $collection;
    }

    public function addFilter(Collection $collection, $field, $condition = null) {
        if (isset($condition['eq']) && ($numberOfOptions = $condition['eq'])) {

            $select = $this->configurableOptions->getSelect()
                ->reset(\Zend_Db_Select::COLUMNS)
                ->columns(array('product_id', 'COUNT(*) as cnt'))
                ->group('product_id');

            $res = $this->configurableOptions->getConnection()->fetchAll($select);

            $ids = array();
            foreach ($res as $opt) {
                if ($opt['cnt'] == $numberOfOptions) {
                    $ids[] = $opt['product_id'];
                }
            }
            $collection->addFieldToFilter('entity_id', array('in' => $ids));
        }
    }

}

view/adminhtml/ui_component/product_listing.xml

<container name="listing_top">
    <filters name="listing_filters">
        <filterSelect name="configurable_options">
            <argument name="optionsProvider" xsi:type="configurableObject">
                <argument name="class" xsi:type="string">Training\Unit6\Ui\Component\Listing\Column\Options</argument>
            </argument>
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="provider" xsi:type="string">${ $.parentName }</item>
                    <item name="imports" xsi:type="array">
                        <item name="visible" xsi:type="string">componentType = column, index = ${ $.index }:visible</item>
                    </item>
                    <item name="dataScope" xsi:type="string">configurable_options</item>
                    <item name="caption" xsi:type="string" translate="true">Select...</item>
                    <item name="label" xsi:type="string" translate="true">Configurable options</item>
                </item>
            </argument>
        </filterSelect>
    </filters>
</container>

Here is my module https://www.dropbox.com/s/lt6riovjaju4se9/unit6.zip?dl=0

Best Answer

No need to add any custom code. In magento2.x available default setting under the attribute

Go admin side Stores -> Attributes -> Product and open your created attribute

After click Advanced Attribute Properties tab under the Properties tab and set Yes below two fields

  1. Use in Filter Options: Yes (Select "Yes" to add this attribute to the list of filter options in the product grid.)
  2. Add to Column Options: Yes (Select "Yes" to add this attribute to the list of column options in the product grid. )

After saving attribute and check product grid.

Please see the attached screenshot.

enter image description here