Apply custom product attribute filter directly in layered navigation

Question

I have one text custom attribute for product. I want to apply directly in Category/Search page and also in Layered Navigation.

I have tried by override Magento\Catalog\Model\Layer this file but by this filter applied in product listing but not applied in layered navigation.

Can anyone has idea about it?

Answer 1

To add a custom attribute to the layered navigation in Magento 2, you need to ensure that the attribute is set up correctly and that the necessary changes are made to the layout and templates. Here's a step-by-step guide:

Step 1: Ensure the Custom Attribute is Configured Correctly

1. Log in to the Magento Admin Panel.
2. Go to Stores > Attributes > Product.
3. Find your custom attribute and edit it.
4. Ensure the following settings are configured correctly:
   • Use in Layered Navigation: Set to "Filterable (with results)" or "Filterable (no results)".
   • Use in Search Results Layered Navigation: Set to "Yes".
   • Visible on Catalog Pages on Storefront: Set to "Yes".

Step 2: Update the Product Listing

1. Override the Magento\Catalog\Model\Layer class.
2. Add your custom logic to filter products by the custom attribute.

Step 3: Add the Attribute to Layered Navigation

1. Override the Layered Navigation template and block.
2. Create a custom module if you haven't already, e.g., Vendor/Module.
3. Override the necessary files:

Block Override

Create or edit the block to add the custom attribute to the filter options.

namespace Vendor\Module\Block\LayeredNavigation;

class Filter extends \Magento\Catalog\Block\Layer\Filter\AbstractFilter
{
    protected function _prepareFilter()
    {
        // Add custom logic to prepare the filter based on the custom attribute
    }
}

Template Override

Override the layered navigation template to include your custom filter.

<!-- app/design/frontend/Vendor/theme/Magento_LayeredNavigation/templates/layer/view.phtml -->
<?php
/** @var $block \Magento\Catalog\Block\Layer\View */
?>
<div class="block filter">
    <div class="block-content">
        <?php foreach ($block->getFilters() as $filter): ?>
            <?php if ($filter->getName() == 'Your Custom Attribute'): ?>
                <div class="filter-item">
                    <strong class="filter-item-title"><?php echo $filter->getName(); ?></strong>
                    <ol class="items">
                        <?php foreach ($filter->getItems() as $item): ?>
                            <li>
                                <a href="<?php echo $item->getUrl(); ?>"><?php echo $item->getLabel(); ?></a>
                            </li>
                        <?php endforeach; ?>
                    </ol>
                </div>
            <?php else: ?>
                <!-- Default filter rendering -->
            <?php endif; ?>
        <?php endforeach; ?>
    </div>
</div>

Step 4: Refresh Cache and Reindex

1. Flush the cache: php bin/magento cache:flush
2. Reindex the data: php bin/magento indexer:reindex

Step 5: Verify

Check your Category/Search pages and the layered navigation to ensure that the custom attribute filter appears and works correctly.

Additional Debugging

If the filter doesn't appear or doesn't work as expected, check the following:

• Ensure the attribute is assigned to the products correctly.
• Ensure the attribute is included in the product collection by checking your Layer model override.
• Verify that the layered navigation template is being overridden correctly.

By following these steps, you should be able to add your custom attribute to the layered navigation and make it functional on the Category/Search pages.

Answer 2

I used a Plugin for Magento\Catalog\Model\ResourceModel\Product\Collection with a beforeLoad method. The problem I face now is that the product count shown in the Leyered navigation does not correspond with the filtered products.

   public function beforeLoad(Collection $subject)
    {
        $subject->addAttributeToFilter('attribute', ['eq' => self::VALUE]);

        return null;
    }