Magento 2 Layered Navigation Extension to Filter Product with Custom Attributes

Please fill this form, We'll reply within 24 Hrs.


Please leave this field empty.

Advanced Layared Navigation

Almost all online merchants know the how competitive the market and how it has made shoppers impatience to check the entire store thoroughly and find the right product they want. It seems that everyone is in a hurry and in search of the way that leads them immediately on the product page they are looking for or even at worst, they want to add the product right from the search result page or popup in the shopping cart and complete the checkout process instantly!

Of course, technological advancements are at the side of helpless merchants and provide advanced search options that a modern and typical e-commerce shopper needs. By default, Magento is providing Layered Navigation feature to assist merchants at some extents. Now, the question is what Layered Navigation is?

What is Layered Navigation in Magento?

By default Magento provides Layered Navigation feature to help shoppers to search the product catalog quickly using various product attributes like color, size, brand, material, and category.

Short Falls of Default Magento Native Layered Navigation

Unfortunately, Magento native Layered Navigation feature only displayed on ‘Anchor Category’ and ‘Quick Search’ result pages. Moreover, it needs to setup attributes via modification in code as well as admin panel of the back-end. It again requires an understanding of programming terms for Filter Counting, Attributes Types, and decide how many attributes you need.

To work with Layered Navigation feature based on attributes in Magento, it is mandatory to set categories and sub-categories as Anchor and Non-Anchor pages. Luckily, on our previous blog “What is Layered Navigation in Magento 2?” we have illustrated all required things simply and comprehensively.

Technically, Magento native Layered Navigation feature is like a direction map guiding e-commerce visitors on a large storefront with a plenty of products to find the desired product fast and with correct attributes.

Unfortunately, it has some drawbacks too and among those two are prominent to overcome if any Magento merchant focuses on user experiences, user engagement, and fast conversion.

The first one we have discussed earlier that it supports only ‘Anchor Category’ and ‘Quick Search’ result pages. The second one is equally significant, and it is page loading hurdles, as the entire page reloads with the selection of each attribute out of multiple attributes choices.

Recommended Read: What is Product Attribute & How to create it in Magento 2?

How Magento Developers at M-Connect Media Solved It?

The experience Mconnect Magento developers have taken these shortfalls seriously and found out a robust solution as AJAX Layered Navigation Extension for Magento 2 merchants.

View Extension: Mconnect ajax Advanced Layered Navigation Magento 2 Extension

Layared Navigation magento

The Magento extension development team at M-Connect Media has overcome issues in following ways.

Implementation of AJAX Technology

They have implemented the latest AJAX technologies to load the web page data asynchronously by eliminating the reloading of the entire page.

Ajax Technology

Recommended Ajax Module: Advanced Ajax Login & Register for Magento 2 Stores

Thus, data or only resulting module reloading takes place with each filtering selection of the given attributes in the drop-down menu, as depicted in above image.

Different Filter Types & Filter Location

After Installation, When you navigate to admin panel Store > Settings > Configuration > M-Connect Media > Advanced Layered Navigation.

Advanced Layared Navigation Magento 2

Thus, you can see a configuration with various setting options like in the image above. Now, go to General Setting tab and check resulting screen as given below.

General Settings

You will find two options for ‘Filter Type’ field, Auto, and Manual. Similarly, ‘Filter Location’ filed has Sidebar and Toolbar options.

Sidebar Navigation

The image above describes how filter looks on the selection of sidebar option for the page position option.

Filter List Selection

The images below also display Filter List selected in configuration settings depicted below.

Custom Attribute Field

Filter List tab drag-n-drop facilities to move All Fields attributes to Selected Field column. Thus, the resulting front-end screen will display on those attributes that admin have dropped in the Selected Field column.

Rating Filter a Ranking Feature

The product reviews and rating play vital role in decision making and trust-building on the online storefront.

Stock Filter a Utility Feature

Stock Settings Stock At Storefront

This additional feature facilitates the shoppers to know how many items of the product category/attribute is in the stock.If the merchant wants to display stock options like out of stock products, the configuration setting is available.

Price Slider an Essential Feature

Price is a very sensitive and detrimental factor in making purchasing decisions. Therefore, the extension provides facilities to display a price slider and facilities to set minimum and maximum price range.

Recommended Module: Ajax Price Slider – Allow Customers to Shop within Their Budget

Clear All Filter a Useful Feature

It has been observed that shoppers frequently change the mind and want to revisit the options of filtering the product search. In due course, ‘Clear All’ command proves useful and enable them to remove all filters to reinvent the wheel.

Conclusion

Now, we know how custom attributes based filters are adding values in product findability for Magento 2 eCommerce sites with a plenty of products and services. Therefore, M-Connect Media has developed Magento 2 Layered Navigation Extension to Filter Product with Custom Attributes. It helps Magento 2 merchants with some additional and well-defined features.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please fill this form, We'll reply within 24 Hrs.


Please leave this field empty.

Please fill this form, Mr.Yogesh will reply by email asap.


Please leave this field empty.

Please fill this form, Mr.Darshit will reply by email asap.


Please leave this field empty.

Please fill this form, Mr.Jayesh will reply by email asap.


Please leave this field empty.

Please fill this form, Mr.Jiten will reply by email asap.


Free eGuide

Ultimate Guide on Magento 2 Shipping Methods

Shipping Methods also play a very vital role in an eCommerce store, to make it a success.
DOWNLOAD NOW