Magento 2 Layered Navigation Extension to Filter Product with Custom Attributes

December 5, 2017 Written By M-Connect Media

Talk to Experts Need expert help? Don’t hesitate to talk.

You can do direct email atinfo@mconnectmedia.com

WE'RE HERE FOR YOU

We would love to hear about your Magento project, challenge, or opportunity. We'll respond within 24 hours!

Almost all online merchants know 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! To consider this scenario and extend the default Magento 2 navigation, M-Connect has developed Advanced Layered Navigation Magento 2 extension for online stores.

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 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 the 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 the 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 the General Setting tab and check the 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.

Multi 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 a 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 plenty of products and services. Therefore, we developed custom layered navigation Magento 2 Extension to filter product by category, attributes, rating, review, price and much more. It helps Magento 2 merchants with some additional and well-defined features.

Need Magento expert help?

We provide result-driven solutions to expand the competency level and productivity.

Instant Help CenterAvailable!

Monday to FridayResponse promised within 24 hours!

Call Us

+1 319 804-8627

Load Comments

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

5 4 3 2 1

  • Worried for deadlines? Our Magento Experts are effortlessly Working from Home.
  • Check out our Magento Developer Hiring Packages for Agency as well as individuals.
View Packages

Talk to Experts Need expert help? Don’t hesitate to talk.

You can do direct email atinfo@mconnectmedia.com

WE'RE HERE FOR YOU

We would love to hear about your Magento project, challenge, or opportunity. We'll respond within 24 hours!

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


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


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


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