Magento 2 User Experience Extensions

  1. Home
  2. Docs
  3. Magento 2 User Experience Extensions
  4. Magento 2 Layered Navigation
  5. User Guide

User Guide

1. Overview

The core aspect of an easy-to-use, outstanding online store is the ability to show customers their desired products instantly. And a flexible Magento 2 Layered Navigation is the key to this problem. The extension by BSS helps your buyers filter products by attribute in Magento 2. The fast-loading Ajax layered navigation allows customers easily search for any items with multi-select among a wide range of attributes.

2. How Does It Work?

Before going into details of the configuration, we want to remind you about some terms we will use in the User Guide.

About Attributes: Attributes are the building blocks of your product catalog, and describe specific characteristics of a product.

There are 2 terms will be used in the User Guide: Attribute Block and Attribute Option.

 

attribute block and attribute option

2.1. Layered Navigation Configs

Please go to Stores ⇒ Configuration ⇒ BSSCOMMERCE ⇒ Layered Navigation and start configuration.

 

In Enable, choose Yes to enable the module, otherwise choose No.

In Rating, choose Yes to enable filter by rating attribute, otherwise choose No. Multiple select is disabled for rating attribute block, and users can only select one rating attribute option at a time.

 

In Category Tree Level, enter the number of category tree level to be displayed in Category attribute block. Enter 0 to display the default Category.

Let’s take the following example:

 

Category Tree Level

  • If you enter 0: only show category A
  • If you enter 1: show category A and sub-categories of the category A (B and C)
  • If you enter 2: show category A, B, C and also sub-categories of category B.

In Use Ajax, choose Yes to enable loading layered navigation result by Ajax, otherwise choose No.

In Apply Button, choose Yes to display Apply Filter button on the frontend, otherwise choose No.

If you choose Yes: customers can select wanted attribute options, and click Apply Filter button. Then, customers can get corresponding search results with their selected options.

For example:

  • Customer select options as below:

select options

  • Results are generated:

Apply Button

To clear filters, customers click to Clear All.

*Note: We will have some logic for filtering here:

  • Filter by category: If you select 2 categories, only products belonging to both 2 categories are displayed in the filter results (AND condition).

Eg: You select Jackets and Tees categories. Product A belongs to Jackets. Product A also belongs to Tees

→ Hence, only product A will be displayed after filtering.

  • Filter by attribute input type (Multiple select, Dropdown, and Swatch): If you choose 2 options in an attribute, the results will show all products satisfying these 2 options.

Eg. You select Red and Blue in the color option. After filtering, you will get all products with Red and Blue colors.

  • Filter by Price: you are allowed to filter Price by the only one range.

Eg: you can filter products with price from $20 to $50. It is impossible to filter products with 2 price ranges: $20-S50 and $70-$100.

  • Filter by Rating: you are allowed to filter by the only one rating option.

In Expand/Collapse, choose Expand to expand the attribute options after loading the page or filtering results. Choose Collapse to collapse the attribute options.

In Show More/Less, fill in a number (X). If the number of attribute options is bigger than X, the Show More/Show Less buttons will be displayed. Enter 0 if you want to disable the Show More/Show Less button.

Show More/Less

2.2. Product Attribute Settings

Please go to Stores ⇒ Attributes ⇒ Product Edit Product Attribute and start configuration.

 

Product Attribute Settings

2.2.1.Storefront Properties

In Storefront ⇒ Properties Use in Layered Navigation, choose one of the two options below

  • Filterable (with results): Layered navigation includes only those filters for which matching products can be found. Any attribute option that already applies to all products shown in the list does not appear as an available filter. Attribute options with a count of zero (0) product matches are also omitted from the list of available filters.
  • Filterable (no results): Layered navigation includes filters for all available attribute options and their product counts, including those with zero (0) product matches. If the attribute option is a swatch, the value appears as a filter, but is crossed out.

Please note that Use in Layered Navigation is only available to catalog input type Dropdown, Multiple Select and Price.

2.2.2. Storefront Proper

Go to Attribute ⇒ Information ⇒ BSS Layered Navigation to start configuration.

 

BSS Layered Navigation

In Display Option Settings, there are 8 display options to choose. But the options are available to specific catalog input types, here are how you can set up.

Display Option Catalog Input Type
Label with checkbox Multiple Select + Dropdown
Label with radio box
Visual swatch Dropdown
Visual swatch with label
Text swatch
Price slider (from-to) Price
Price range (automatic calculator)
Price input box (from-to)

 

Display Option Settings

In Show More/Less, there are 2 options:

  • No: disable Show More/Show Less button of the attribute block.
  • Use General Setting: follow the general settings at Stores Configuration ⇒ BSSCOMMERCE Layered Navigation ⇒ Show More/Less.

In Expand/Collapse, there are 3 options:

  • Expand: expand the attribute options after showing filtered results.
  • Collapse: collapse the attribute options after showing filtered results.
  • Use General Setting: follow the general settings at Stores ⇒ Configuration BSSCOMMERCE Layered Navigation ⇒ Expand/Collapse.

Click Save and flush cache to complete the configuration.

Was this article helpful to you? Yes No

How can we help?