Magento 2 Multiselect Ajax Layered Navigation.

Rating:
100%
$0.00
Links
$0.00
$0.00  Free version $199.00  Pro version

AJAX Filtering

Fully Opened/Closed/Expandable for any filter

Sorting Option by Name or Position defined by user

Show Item Counter

Hide/Show Wishlist Block

Hide/Show Compare Block

Hide/Show Category filter

Multiselect options from the same attribute

Slide In Design, CLICK for demo

Slide Down Design, CLICK for demo

Filter Search

Filter by Product Ratings

Ajax Price Slider

Hide Filter on Specific Categories

Free Version

For Best Performance and Optimization use this Extension with:

We packed it all up to offer the smoother UX for your customers and made sure that all extensions work smoothly together.

About Layered Navigation For Magento 2.

Layered Navigation is a tool for narrowing down the displayed product list within a category by specifying one or more product attributes (e.g., narrowing the 750 products in the “Clothing” category by size, color, material, cut, etc). Multiple filters can be combined by the user to meet some very specific needs (e.g., “color: black,” “price: $19.99 - $49.99,” “waist size: 32,” and “length size: 34”). Customers that use the filters are usually converting at a much higher rate as they are able to find exactly what they are looking for in a matter of seconds.

With our extension we took the initial capabilities of the default Magento functionality and enhanced it with the most commonly used ones.

The new functionalities include:

  • Ajax Filtering
  • Fully Opened/Closed/Expandable for any filter
  • Sorting Option by Name or Position defined by user
  • Show Item Counter
  • Hide/Show Compare Block
  • Hide/Show Wishlist Block
  • Multiselect - Select multiple options from the same attribute
  • Slide In Design (Pro Version Only)
  • Slide Down Design (Pro Version Only)
  • Filter Search (Pro Version only)
  • Filter by Product Ratings (Pro Version Only)
  • Hide Filter on Specific Categories (Pro Version only)

Ajax Filtering weltpixel

We implemented the Ajax Filter do decrease time between the moment when the customer clicks a filter and moment when the products are filtered. The Ajax Filter eliminates the need of a full page refresh so your customers can experience a much faster and smoother transition while applying each filter.

Not having an Ajax Filter Option would apply 2-4 seconds (even more based on your website page load time) every time a filter is applied or removed. In addition it would interfere with the pageview count metric in Google Analytics.

To enable this filter, simply go to WeltPixel -> Layered Navigation -> Enable Ajax ( Yes / No )

Customize each filter – Fully Opened/Closed/Expandable

Magento does not allow by default to customize any attribute. With our extension now you can easily determine which filter is the most relevant so you can collapse the ones less used and allow focus on the most important ones.

This option can be found under:

Manage Attributes -> Select the attribute that you would like to customize -> Filter Display Option: ( Fully Opened / Closed / Expandable )

If you are looking for a midway solution, you will also have the option to use the Show more functionality. This option allows you to display by default 5 options (the number of options is configurable) and then have a “show more” button to reveal more.

You will also be able to select if you would like to display Quantity and how the sorting should be setup.

This option can be found under:

Manage Attributes -> Select the attribute that you would like to customize -> Show Item Counter: ( Yes / No )

Manage Attributes -> Select the attribute that you would like to customize -> Sort by: ( Position / Name )

Hide Unwanted Magento Blocks.

You probably already looked it up on Google how to remove the Category, Compare and Wishlist blocks. Look no further! You will now have the option to display or hide which block you want your customers to interact with.

This options can be found under:

WeltPixel -> Layered Navigation -> Show Category Filter: Yes/No

WeltPixel -> Layered Navigation -> Show Compare Products block: Yes/No

WeltPixel -> Layered Navigation -> Show Wish List block : Yes/No

weltpixel
Enable the Multi-Select functionality. weltpixel

The Multi-Select feature is the most often used by your customers. Some attributes such as size or color is often multi selected. Eg. In a shoe category that contains multiple sizes, the customer might select the following sizes 8.5/9/9.5 to make sure that he finds what he needs as sizing might often vary based on brand or style.

This option can be found under:

Manage Attributes -> Select the attribute that you would like to customize -> Enable Multiselect: Yes/No

Option Search / Price Slider / Rating Filtering. weltpixel

Search trough multiple options with ease. Enable this functionality for any text attribute. Go to Stores -> Attributes -> Product -> [select desired attribute from grid] -> Storefront Properties -> WeltPixel Layered Navigation Properties section and enable Enable options filter on Desktop/Mobile.

Let your customers filter by price using a Price Slider. Go to Admin > WeltPixel > Layered Navigation > Sidebar Settings > Price Filter and select Slider design.

Product ratings can be incredibly helpful to users. Allow filtering products by ratings if your customers rely on ratings to gauge a product’s quality or value. Go to Admin > WeltPixel > Layered Navigation > Sidebar Settings > Enable Rating Filter and you can easily configure the ratings filter.

This option can be found under:

Manage Attributes -> Select the attribute that you would like to customize -> Enable Multiselect: Yes/No

Attribute visibility based on category. weltpixel


Displaying or hiding a filtrable attribute from a category navigation becomes essential when optimizing the store so end users can find the product they are looking for. Oftentimes, some attributes might not be relevant to specific categories but they show up in Layered Navigation because of the products' configuration. Showing only relevant attributes will ease up the search process based on attribute filtering, leading to increased conversion.

For example, in the above screencap, Leather is an option under the Material attribute. This shop's category (leather collection) contains only products that are made of leather, so the attribute becomes obsolete. By showcasing only the relevant attributes for this specific category, the end user will be able to easily find the exact product they are looking for.

SEO Implementation that drives results

We often seen implementations where certain attributes are added to the URL and delimited by a simple “/”. That implementation can often be very dangerous as there is no easy way of eliminating all the attribute combinations which often result in generation of ten’s of thousands of unwanted url.

Over many years of experience with Enterprise Customers, and working with leading SEO agencies, we found the most scalable implementation.

We are keeping each attribute as a query in the URL: https://weltpixel.com/women/tops-women/jackets-women.html?color=56&size=167

the attribute parameter Color and Size can be easily removed using Robots.txt file, excluded in various sitemap generator tools as well as excluded in Google Search Console.

The URL canonical tag remains the original URL https://weltpixel.com/women/tops-women/jackets-women.html

The above implementation helped rank our Enterprise Customers on top 3 position for the highest competitive keywords in the industry.

Slide In Design Slide Down Design

Features of the Extension.

  • Ajax Filter
  • Fully Opened/Closed/Expandable for any filter
  • Sorting Option by Name or Position defined by user
  • Show Quantity
  • Hide/Show Compare Block
  • Hide/Show Wishlist Block
  • Multiselect - select multiple options of the same attribute
  • Slide In Design (Pro Version Only)
  • Slide Down Design (Pro Version Only)
  • Filter Search (Pro Version Only)
  • Filter by Product Ratings (Pro Version Only)
  • Hide Filter on Specific Categories (Pro Version Only)

How to Install the Extension:

  • Step 1:
    Before installing Layered Navigation for Magento 2 store please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0.X. - 2.2.6 It is recommended to install the extension first on a testing server before you install it on a live (production) server.
  • Step 2:
    Copy the extension files to below paths of your magento 2 instance. If ‘app/code/WeltPixel’ folder is missing, please create it manually:
    app/code/WeltPixel/Backend
    app/code/WeltPixel/LayeredNavigation
  • Step 3:
    Access the root of your magento 2 project from command line and run the following commands:
    php bin/magento module:enable WeltPixel_Backend --clear-static-content
    php bin/magento module:enable WeltPixel_LayeredNavigation --clear-static-content
    php bin/magento setup:upgrade
  • Step 4:
    Flush any cache that you might still have enabled on your server or in Magento.
  • Step 5:
    Woohoo, the extension is installed!

CONFIGURATION.

GENERAL SETTINGS.

    Go to Admin > WeltPixel > Layered Navigation > General Settings

    • Enable Layered Navigation [Yes / No] - enable Layered Navigation module
    • Enable Ajax [Yes / No] - Ajax Filter eliminates the need of a full page refresh so your customers can experience a much faster and smoother transition while applying each filter.
weltpixel
weltpixel

SIDEBAR SETTINGS.

Default Style.

    Go to Admin > WeltPixel > Layered Navigation > Sidebar Settings

    • Sidebar Style [Default / Slide In / Slide Down] - Select the preferred style for the Layered Navigation sidebar block. If the Slide In or Slide Down option is selected, the Compare Products and Wish List blocks will be removed.
    • Show Compare Products block [Yes / No] - Show/Hide Compare Products block from sidebar.
    • Show Wish List block [Yes / No] -Show/Hide Wish List block from sidebar.
    • Show Category Filter [Yes / No] - Show/Hide Category Filter section from Layered Navigation sidebar.
    • Filter Button [Icon Only / Icon + Label / Label Only] - Select the preferred style for the Layered Navigation filter button.
    • Price Filter [Default / Slider] - Select preferred style for the Layered Navigation price filter.
    • Enable Rating Filter [Yes / No] - Enable/Disable Rating Filter.

Slide In Style.

    Go to Admin > WeltPixel > Layered Navigation > Sidebar Settings

    • Sidebar Style [Default / Slide In / Slide Down] - Select the preferred style for the Layered Navigation sidebar block. If the Slide In or Slide Down option is selected, the Compare Products and Wish List blocks will be removed.
    • Show Category Filter [Yes / No] - Show/Hide Category Filter section from Layered Navigation sidebar.
    • Filter Button [Icon Only / Icon + Label / Label Only] - Select the preferred style for the Layered Navigation filter button..
    • Price Filter [Default / Slider] - Select preferred style for the Layered Navigation price filter.
    • AutoClose Sidebar [Yes / No] - Set to AutoClose Sidebar after each filtering.
    • Enable Rating Filter [Yes / No] - Enable/Disable Rating Filter.
weltpixel
weltpixel

Slide Down Style.

    Go to Admin > WeltPixel > Layered Navigation > Sidebar Settings

    • Sidebar Style [Default / Slide In / Slide Down] - Select the preferred style for the Layered Navigation sidebar block. If the Slide In or Slide Down option is selected, the Compare Products and Wish List blocks will be removed.
    • Column No. [1 / 2 / 3 / 4 / 5 / 6 column(s)] - Select to number of columns to be displayed in Slide Down Filter Box in 1 row.
    • Filter Box Height [in px] - Insert height of Slide Down Filter Box. Eg: 450px
    • Filter Column Height [in px] - Insert height for columns in Slide Down Filter Box. Eg: 350px.
    • Show Category Filter [Yes / No] - Show/Hide Category Filter section from Layered Navigation sidebar.
    • Filter Button [Icon Only / Icon + Label / Label Only] - Select the preferred style for the Layered Navigation filter button..
    • Price Filter [Default / Slider] - Select preferred style for the Layered Navigation price filter.
    • AutoClose Sidebar [Yes / No] - Set to AutoClose Sidebar after each filtering.
    • Enable Rating Filter [Yes / No] - Enable/Disable Rating Filter.

Rating Options.

    Go to Admin > WeltPixel > Layered Navigation > Sidebar Settings

    • Enable Rating Filter [Yes / No] - Enable/Disable Rating Filter.
    • Rating Filter Name [text input] - Insert title for Rating Filter.
    • Rating Filter Display Options [Open / Close] - Select initial state of Rating Filter.
    • Rating Filter Position [number value] - Insert position of Rating Filter.
    • Rating Filter Multiselect [Yes / No] - Enable Multiselect for Rating Filter.
    • Show Rating Filter Counter [Yes / No] - Enable to show item counter next to each Rating option.
weltpixel
weltpixel

Attribute SETTINGS

    For more settings on attribute level, go to Admin > Stores > Attributes > Product > [select attribute] > Storefront Properties > WeltPixel Layered Navigation Properties tab

    • Filter Display Options [Closed / Fully Opened / Exapandable] - Select how the attribute options are displayed. Can be used only with catalog input type Dropdown, Multiple Select and Price.
    • Initial Number of Visible Options - The number of attribute option(s) that will be initially visible. Can be used only with Filter Display Options - Expandable.
    • Expandable items behaviour [All / Show x more] - Select the number of attribute option(s) to show/hide when using Expand feature. Can be used only with Filter Display Options - Expandable.
    • Enable Multiselect [Yes / No] - Allow to filter multiple options from the same attribute.
    • Show Item Counter [Yes / No] - Show item counter next to the current attribute options.
    • Sort By [Position / Name] - Select the sorting of the current attribute options.
    • Enable options filter on Desktop [Yes / No] - Enable search functionality for attribute options on Desktop.
    • Enable options filter on Mobile [Yes / No] - Enable search functionality for attribute options on Mobile.

Visibility options.

  • Displaying of hiding an attribute from a category becomes essential when optimizing the store for the best user experience. It often happens that the store might have a category that matches an attribute. A great example for that are categories specifically for Genders or Brands.
  • Ex: Men’s category contains products that are for the Gender, Men. In that situation the attribute becomes obsolete.
  • To have full control over which attribute displays in a category simply follow the next steps:
  • Store -> Attributes -> Product
weltpixel
weltpixel
  • Select the desired attribute
  • Go to Storefront Properties and find the following two options down the page
  • Category Visibility (Select visibility behavior in categories for the current attribute.) “Visible in all categories” is the default Magento behavior “Visible only in the following categories” will allow you to select specific attributes that you only want to display in a few categories “Not visible in the following categories” will allow you to select the very few categories where you would not like to display the attributes. Note: Product attributes will only show in categories that contain products with specific attributes.
  • Select Categories allows you to select as many or as little categories as you prefer. The selected categories will have the behavior from Category Visibility.

Change Log.

What’s new in v.1.7.5 - October 24, 2018

  • Price slider drag fix on mobile devices.
  • Fixed page header and nav-section z-index.
  • Fixed bug on category filtering on more than level 3 categories.
  • Added compatibility with our newly released WeltPixel Product Labels Extension.
  • Added detailed error messages for invalid licenses for an easier identification of the cause.
  • License improvements, added *.magento.cloud as a valid test domain for Enterprise Cloud environments. Now both ‘magentosite.cloud’ and ‘magneto.cloud’ can be used for testing purpose with the production domain license.


What’s new in v.1.7.4 - September 25, 2018

  • Layerd Navigation Pro - possibility to hide attribute on specific category.
  • Hot fix for Magento 2.1.x and WeltPixel Layered Navigation version greater than 1.7.2, category page was broken in M2.1.x when Layered Navigation was enabled.
  • Layered Navigation - fixed issue which prevented user to create new attributes when layered Navigation was enabled.
  • Layered Navigation scroll bar design adjustments.
  • Added compatibility with just released Advance Category Sorting extension by WeltPixel.
  • Layered Navigation overlay fix with logo, top links, sticky header.
  • Admin menu styling to fit screen size 1366px.
  • Fix for production mode with merged JS - missing color pallet display now fixed.

What’s new in v.1.7.3 - August 23, 2018

  • New feature: Added search by product ratings. (Pro version)
  • New feature: Added Ajax Price Slider functionality. (Pro version)
  • Design and documentation improvements.
  • License improvements, adding *.magento.cloud as a valid test domain.


What’s new in v.1.7.2 - August 2, 2018

  • Added Slide down Layered Navigation Design (Pro version only).
  • Added Instant Search Functionality (Pro version only).
  • Fixed Navigation overlapping store logo.
  • Add data layer impression push to Google Tag Manager on Ajax requests.
  • Fixed Non Sticky header menu overlapping in Slide In design.
  • Additional compatibility adjustments with WeltPixel Infinite Scroll and Ajax catalog.
  • Fixed admin random logout issue.
  • Licensing improvements, allowing 3 letter domain as valid domain.


What's new in v.1.7.1 - July 11, 2018

  • Compatibility with Magento 2.2.5 both Open Source & Commerce Cloud B2B.
  • Added domain.test & [any_subdomain].domain.test to the list of valid urls for staging/development environments. Added domain validation with port number included for licensing purpose.
  • Added licensing compatibility with Magento B2B.


What’s new in v.1.7.0 - July 10, 2018

  • Initial release
weltpixel
Write Your Own Review
You're reviewing:Magento 2 Multiselect Ajax Layered Navigation.
Your Rating
Recently Viewed
No recently views items
Clear All
Newsletter Fashion Box
Stay Updated!
Newsletter Fashion Box