User Tools

Site Tools


Sidebar

magento_2:improved_layered_navigation

For more details see the Improved Layered Navigation extension page.

Improved Layered Navigation for Magento 2

With a feature-rich navigation module, you will easily enhance customer shopping experience by adding a handy vertical and horizontal navigation menu to your website. Filter store catalog by any product attribute, display price sliders and ‘from-to widgets’. Generate custom brand pages and optimize your website for search engines.

  • Configure multiple store filters to meet your specific need;
  • Auto generate SEO-friendly page URLs;
  • Display a 'Brand' filter;
  • Use AJAX technology to streamline product filtering;

General Settings

To get the access to General extension settings please go to:Stores → Configuration → Improved Layered Navigation

Enable AJAX - Enable AJAX to avoid page reloads.

Add vertical scrolling for filters higher than - Specify maximal filter size (in pixels) that will be displayed without vertical scrolling. In case a filter is higher that the indicated size, the scrolling will appear.

Submit filters - Choose ‘Instant’ mode to apply filters one by one. With the ‘By button click’ mode customers will be able to apply multiple filters in bulk.

See a Vertical Scroll example


Category Title and Description

Filters to apply title and description changes to -specify any filters to which you want to apply custom title and description.

Add filter title - Select the place where filter title will be displayed:

  • Before Category Name
  • After Category Name
  • Replace Category Name
  • Don't Add

Separate Category name and title with Specify the separator for a category name and a title

Add filter description - Specify where to display a custom filter description:

  • Before Category Description
  • After Category Description
  • Replace Category Description
  • Don't Add

Replace Category Image - Choose whether to replace category image with a custom filter image.

Replace Category CMS Block - Set this option to 'Yes' to replace a category CMS block.

Please open Stores → AttributesProduct → [open attribute] → Properties → [open attribute option settings] in order to define Title, Description, Image and CMS block for a chosen filter.

Category Meta Tags

Filters to apply meta-data changes to - specify any filters to which you want to apply additional meta-data changes.

Add filter title to meta title - Choose whether to add and additional filter title to meta title.

Title tag separator - specify the title tag separator.

Add filter description - Select the place where filter description will be displayed:

  • Before Meta-Description
  • After Meta-Description
  • Replace Meta-Description
  • Don't Add

Description tag separator - Specify the description tag separator.

Add filter Title to meta-keywords - Enable the option to automatically add a filter title to meta-keywords.


Filters Settings

To configure general settings for different filter types go to StoresConfigurationImproved Layered Navigation

Stock Filter

Enabled - Enable In Stock/Out of Stock filter. You can preselect a label, position and the display mode.

Show in the block - Choose where to display the filter:

  • Left sidebar;
  • Top menu;
  • Both.

Tooltip - Specify tooltip text that will be displayed on a mouse hover for the stock filter.

Display Mode - Select filter display mode: labels or dropdown.


Rating and Category Filters

Configure settings for Rating and Category filters. Choose whether to show them in the left sidebar, in the top menu or in both positions.


New Filter

Configure settings for the 'New' filter. Choose whether to show it in the left sidebar, in the top menu or in both positions.


On Sale Filter

Configure settings for the 'On Sale' filter. Choose whether to show it in the left sidebar, in the top menu or in both positions.


Tooltips

Enable the tooltip option and upload a tooltip image.


Vertical & Horizontal Navigation

Show in the Block - choose one of three modes to display each particular filter either in vertical or horizontal navigation. Select 'both' option to show the filter in both navigation blocks.

See the example of vertical and horizontal navigation blocks on one category page.


Enable/Disable Filters

To enable/disable a particular filter please go to StoresAttributesProduct and select the attribute you need.

Use in Layered Navigation - If you want an attribute to become filter in the navigation, select one of the options:

1. Filterable (with results) - a filter will be displayed only if there are products with such options in a category.

2. Filterable (no results) - a filter will be displayed even if there are no products with such options in a category.

Use in search results Layered Navigation - Enable this feature if you want the options above to be applied to the search results page.


Filter Display Modes

Display Mode - Use ‘Dropdown’ display mode for multiselect, price, visual swatch input types.


Slider Display Mode

Display Mode - Use ‘Slider’ display mode for price attribute.

Configure custom attribute units (inch, MB, px, etc.) and slider step size for the filter.


Limit Price Slider Range

Min value/Max value - you can limit the slider price range manually if needed. Specify min and max values in the corresponding fields to let customers filter products strictly withing the set range.


Price Range Display Mode

Display Mode - Use 'Ranges' display mode for prices and other numeric attributes.


'From-To' Widget

Display Mode - You can use the ‘From-to-widget’ filter for numeric attributes either separately or together with other filter display modes. To use it separately, choose the 'From-to only' display mode.

Add From-To Widget - set the option to 'yes' to use the widget together with other display modes.

In this case the widget will be used together with the ‘Ranges’ display mode.


Filter Display Settings

To fine tune filter display settings please go to StoresAttributesProducts and choose the necessary attribute, then click on the Improved Layered Navigation tab.

Display Mode - Choose either 'Labels' or 'Dropdown' display mode.

Show in the Block - Specify whether to show the filter in vertical or horizontal navigation. It's also possible to show filters in both blocks.

Show Search Box - Set the option to ‘Yes’ to let customers sort products inside a specific filter.

Number of Unfolded Options - Specify the number of unfolded filter values that will be shown to customers when they click on a specific filter.

Tooltip - Specify the tooltip text that will be displayed for a specific filter on mouse hover.

Visible in categories - Choose for which categories the filter will be available.

See the example of a search box for a particular filter.

As soon as we’ve specified 3 unfolded values for display, other values will be shown after a customer clicks the ‘More’ button.

See the example of a tooltip icon and a text.


Dependent Filters & Multiselect

Show only when one of the attributes below is selected - choose filter attributes that will trigger the display of a dependent filter. You can select as many attributes as you need.

Show only when one of the options below is selected - choose the options that will trigger the display of the dependent filter.

Hide filter when only one option is available - Set the option to 'Yes' if you don't want to show the dependent filter when there is only one option available.

Allow Multiselect - Enable the option to let customers choose several values of the filter at a time.

Multiple Values Logic - There two options available:

  • Show products with ANY value - all products containing at least one value from the selected ones will be displayed);
  • Show products with ALL values - products that contain all select values will be displayed.


'All-Products' Page Settings

Enable All-Products Page - Set the option to 'yes' to enable the All Products page, containing all store items and layered navigation filters.

All Product Page URL - Specify an appealing URL for the page, e.g. all-products.html.

You can set the name for the default category in Products – > Categories, e.g. All products


Brand Settings

General Settings

To configure greneral Brands Settinfs please go to StoresConfigurationImproved Layered NavigationBrands

Brand Attribute - It is possible to setup nice short URLs for pages of a brand attribute (or any other one you prefer), e.g.:

  • example.com/canon.html
  • example.com/nike.html
To generate such URLs for an attribute, please specify the code of the attribute in the Brand Attribute field. This feature works only for one attribute at a time.

URL Key - Specify the key that will be added to the URL before the brand name. E.g. your-site/brand/brand-name.html

Display Brand Icon on a product page - set the option to 'yes' to show a clickable brand logo on corresponding product pages.

Choose CMS page - select a CMS page where the All Brands List will be shown.

Add Brands link to Menu Bar- choose whether to display a Brands link leading to the All Brand Page on the top menu bar. To configure the link position, select one of two modes:

  • Display First
  • Display Last

Add Brands to Account Top Links - Display a Brands link in a customer account.

Take a look at the example of a brand logo on a product page. When customers click on the logo they will be redirected to the corresponding brand page.

A Brand filter can be added to vertical or horizontal navigation menu.

NOTE: Brands block on a category page is based on the current category. It means that the block contains only brands from the opened category.


Brand Attribute Settings

To manage brand attribute settings please go to StoresProductsAttributesProductBrand.

Catalog Input type for store owner - select an input type for the catalog. Choose on of 3 available variants:

  • Dropdown;
  • Visual Swatch;
  • Text Swatch.
Add brand names, upload brand logos and specify a brand that will be preselected by default.

Click on the Settings icon beside a brand name to detailed brand information, add image and metadata.

Slider Options - Enable the display in a brand slider (if necessary), specify the brand position in a slider and upload a slider image. See the details on how to configure a brand slider here.

You can specify meta title, description and keywords for each particular brand.

Specify content for the brand page. Add title, description, image and a CMS block.

Below you'll see a brand page with a short SEO-friendly URL and custom content.


All Brands Page Settings

To add an All Brands page ContentElementsPages. Here you can Add a page with a list of all brands in alphabetical order.

Please click on the Add New Page button to create a page with all brands.

Create All Brands Page - To create a page you need to:

  • Create a CMS block with all brands;
  • Insert a widget to the page in CMS mode.
To configure All Brands Page settings go to Stores ConfigurationImproved Layered Navigation: Brands.

All Brands Page settings - Here you can configure the All Brands Page display:

  • Enable a brand logo;
  • Specify max brand logo width and height;
  • Enable a quick search window as well as the 'search by first character' option;
  • Choose whether to show products quantity etc.
This is a frontend example of a page with an alphabetical list of all brands. Each name leads to the appropriate brand page.


Brand Slider Settings

To manage Brand Slider settings please go to StoresConfiguration → Improved Layered Navigation: Brands.

Widget Code - Use this code to add a brands slider to any CMS page or block. It’s also possible to place the slider to the All brands page.

Visible Items Quantity - Specify how many brands will be displayed in a slider at a time.

Sort By - Select a sorting type for slider items – either by name or by position.

Slider display settings - Configure slider display parameters: maximal slider width, image width/height.

Show Brand Label - Choose whether to display text labels together with brand logos.

Show Buttons - Enable previous/next buttons display.

Infinity Loop - Enable continuous loop mode for slider images.

Simulate Touch - Let customers click and drag slider images.

Show Pagination - Enable pagination display below the slider.

Autoplay - Switch on/off the autoplay option.

All created brand values (see how to add values in the Brand Settings Section) can be added to a brand slider. To configure slider options for each particular brand please go to ContentAmasty Layered NavigationBrand Slider.

Specify slider options for each particular brand. It's also possible to manage slider options when creating slider values (see the Brand Settings section).

To embed a brand slider to a CMS page or a block please go to ContentElementsPages or Blocks and open the necessary element and insert a ready-to-use code to the page/block content.

Brand Slider Examples

See the example of a brand slider added to the All Brands page.

See the example of a brand slider added to a home page.


SEO Settings

Migration from Magento 1

If you've been using Improved Layered Navigation extension by Amasty for Magento 1 and now are going to migrate to M2, please pay a careful attention to your URL settings.

Unlike the Improved Layered Navigation for Magento 1, the extension for M2 doesn't provide the 'Long with URL key' option.

To switch your store to a new URL structure saving search traffic please do the following:

Add the below-displayed lines to the .htaccess file:

# Migrate from old-style URLs with 'shopby' key
RewriteRule ^(.*)/shopby/(.*)$ /$1/$2 [R=301,L]

The lines should be added right after:

RewriteEngine on

This action will redirect existing traffic to a new URL structure.

IMPORTANT: If you've been using other parameters: 'Short without URL key' or 'With GET parameters' you don't need to perform the above-described actions.

SEO URLs & Robots Tag Control

Enable - Set the option to 'yes' to optimize store URLs for search engines. The URLs will become short and clear.

Add suffix also to brand pages and filtered all-products pages -

Allow the module to modify robots meta tags - Enable robots tag control to let the module manage indexation according to SEO settings for each attribute. If you disable the option, search engines will index all the store content.


Canonical URL Settings

You can set structure of canonical urls for ‘key’-related (‘Canonical URL’ setting) and category (‘Category Canonical URL’ setting) pages:

1. If you choose ‘Just Url Key’ option, canonical url for all ‘key’-related pages will be like this:

http://your_store.com/URL_Key/

For category pages it will be like this:

http://your_store.com/category.html 

2. If you select ‘Current URL’ canonical url will be the actual url of the page both for ‘key’- related and category pages.

3. With ‘First Attribute Value’ canonical url for ‘key’-related pages will be:

http://your_store.com/URL_Key/first_attribute_chosen_in_navigation.html

For category pages it will be like this:

http://your_store.com/category/URL_Key/first_attribute_chosen_in_navigation.html 

SEO URLs Examples

Generate SEO URL’ option is enabled. The URL is clear and includes the selected attributes.

Generate SEO URL’ option is disabled.


Custom URL Alias

To customize URL Alias for pages with filtered options make sure you set the 'Generate SEO URL' option to ‘Yes’ (Stores → Attributes → Product - > choose necessary attribute and open Improved Navigation tab).

Then open the 'Properties' tab, select the necessary filter value, click on the Settings icon and specify a custom URL alias.

See a custom URL Alias for the ‘Hoodie’ attribute.


Category Tree

Tree Settings

To create a category tree please go to StoresAttributesProduct and select the ‘Categories’ attribute.

In the Attribute Information menu open the Improved Layered Navigation tab.

Display Mode - Choose one of two display modes: Labels or Dropdown.

Shown in the Block - Select where to display the filter:

  • Left sidebar;
  • Top menu;
  • Both.

Category Tree Depth - Specify the maximal level number for a category tree.

IMPORTANT: To add a particular category to a category tree make the category Anchor.

Subcategories View - For the Labels display type you can specify the subcategories view mode: Folding/Fly-Out.

Render Categories Level - Indicate the level from which categories will be shown. There are 3 levels available:

  • Root Category
  • Current Category Level
  • Current Category Children

Number of Unfolded Options - Limit the number of unfolded options. Customers will be able to unfold hidden options by clicking on the ‘More’ button. Leave the field empty to keep all filter options unfolded.

See how the ‘Render category level’ feature works. The example is created for Women > Tops category.

The Multiselect option which is enabled in the Filtering section can be used for Labels and Dropdown category view modes.


Frontend Examples

Here is the example of the ‘Labels’ category tree with the Folding view type and enabled Multiselect.

Here is the example of the ‘Labels’ category tree with the Fly-Out view type and enabled Multiselect

See the example of the ‘Dropdown’ category tree with enabled Multiselect.


Custom Pages

To create custom pages for specific filter results please go to ContentLayered NavigationCustom Pages.

Add Texts - Choose whether to replace category page meta data with your own info, or show it before/after category data.

Top CMS Block -Select the CMS block on the base of which the page should be created.

NOTE: You can either select one of already existing CMS blocks or create a new one. To create a new CMS block please go to ContentElementsBlocks.

Meta Tags Tab - Specify meta title, description and keywords for each custom page you create.

Categories & Store Views Tab - Select store views for which the page will be available. Choose categories products from which will be displayed on a custom page.

Filter & Filter Value - Select filters and filter values. You can specify as many selection settings as you need for one custom page.

See the example of a custom page with specific filter results.

Rate the user guide
 stars  from 4 votes (Details)
magento_2/improved_layered_navigation.txt · Last modified: 2017/06/23 19:15 by prakapovich