weltpixel

Guide for Magento 2 Layered Navigation Ajax Filter with Multi Select.

This extension is also included in the Pearl Theme.

1 MINUTE INSTALLATION GUI.

  • Step 1:
    Before installing please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0.X. - 2.4.3. 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
  • Note: After copying the files to the server, check if there are patches available for your Magento version in the Patches folder. If you're running a version for which patches are available, copy the content from the folder into the root of your Magento project and make sure you select the Overwrite option when prompted.

  • Note: If you're running Magento 2.3.0 - 2.3.2, please also copy the content from the Patches folder, making sure you select the Overwrite option when prompted.

    Optional
    Copy the extension files into the below path of your Magento 2 instance. If the ‘app/code/WeSupply’ folder is missing, please create it manually:
    app/code/WeSupply/Toolbox

  • Step 3:
    Copy the installation GUI folder 'weltpixel-extension-installation' in the root of your Magento installation. In some Magento configurations the public root folder may be under 'pub' directory.
    www.yourmagentostore.com/weltpixel-extension-installation/
  • Step 4:
    In your browser go to www.yourmagentostore.com/weltpixel-extension-installation/ and simply follow the installation steps from the graphical interface, presented in your browser. See the installation video: 1 Minute Module Installation via browser GUI.
  • Step 5:
    Wooohooo! The extension is now installed on your Magento store! Congrats!

Troubleshooting

If you experienced any issues or limitations with this quick GUI installation, see also SSH Installation below. SSH installation does the same thing but you are required to issue the commands step by step via CLI. Some servers may have high security configurations and may limit the functionality of this GUI Installer.

How to Install via SSH.

  • Step 1.
    Before installing Magento 2 Layered Navigation Ajax Filter with Attribute Multi Select store please check the extension compatibility. This extension is currently compatible with the following Magento versions 2.0.X. - 2.4.3. 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
  • Note: After copying the files to the server, check if there are patches available for your Magento version in the Patches folder. If you're running a version for which patches are available, copy the content from the folder into the root of your Magento project and make sure you select the Overwrite option when prompted.

  • Note: If you're running Magento 2.3.0 - 2.3.2, please also copy the content from the Patches folder, making sure you select the Overwrite option when prompted.

    Optional
    Copy the extension files into the below path of your Magento 2 instance. If the ‘app/code/WeSupply’ folder is missing, please create it manually:
    app/code/WeSupply/Toolbox

  • 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
    php bin/magento setup:di:compile
    php bin/magento setup:static-content:deploy -f
  • Step 4.
    Flush any cache that you might still have enabled on your server or in Magento.
  • Step 5:
    Woohoo, the extension is installed!

How to Upgrade the extension.

  • Step 1. Remove extension code under app/code/WeltPixel/LayeredNavigation before adding the new extension files. The extension may be refactored and old unused files may cause random issues so it's best to only keep the latest version of the files.
  • Step 2. Follow normal installation instructions above.

Magento Marketplace Installation.

How to configure Layered Navigation in Magento 2.

GENERAL SETTINGS.

    Go to Admin > WeltPixel > Layered Navigation > General Settings

    • Enable Layered Navigation [Yes / No] - enable the Attribute Multi Select Ajax Filter
    • 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 Vertical Filtering / Slide Down Horizontal Filtering / Horizontal View] - Select the preferred style for the Layered Navigation sidebar block. If one of the 'Slide In Vertical Filtering', 'Slide Down Horizontal Filtering' or "Horizontal View" options are selected, the 'Compare Products' and 'Wish List' blocks will be removed.
    • Horizontal Design Version - Select the preferred version for the Horizontal Design (only appears if the Horizontal View Sidebar Style is selected). If version 3 is selected, additional options for Filter Button Color, Filter Button Text Color, Filter Button Hover Color and Filter Button Hover Text Color will be displayed.
    • Display Selected Filters [Yes / No] - If set to "Yes", filters that have been selected will be displayed under the Layered Navigation.
    • Allow Customer to Show/Hide Layered Navigation [Yes / No] - If set to "Yes", this will provide the customer the option to hide the Layered Navigation block. Works with the Default Design.
    • Filters Default State [Open / Closed] - Choose the default state of the Filters in the Layered Navigation.
    • 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 Vertical Filtering Style.

    Go to Admin > WeltPixel > Layered Navigation > Sidebar Settings

    • Sidebar Style [Default / Slide In Vertical Filtering / Slide Down Horizontal Filtering] - Select the preferred style for the Layered Navigation sidebar block. If the 'Slide In Vertical Filtering' or 'Slide Down Horizontal Filtering' 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 Horizontal Filtering Style.

    Go to Admin > WeltPixel > Layered Navigation > Sidebar Settings

    • Sidebar Style [Default / Slide In Vertical Filtering / Slide Down Horizontal Filtering] - Select the preferred style for the Layered Navigation sidebar block. If the 'Slide In Vertical Filtering' or 'Slide Down Horizontal Filtering' 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 Horizontal Filter Box in 1 row.
    • Filter Box Height [in px] - Insert height of Slide Down Horizontal Filter Box. Eg: 450px
    • Box Shadow - Enable to display a shadow for the Layered Navigation Slide Down box.
    • Filter Column Height [in px] - Insert height for columns in Slide Down Horizontal 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 Attribute Multi Select [Yes / No] - Enable Attribute Multi Select 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, Attribute Multi Select and Price Slider Ajax Filter.
    • 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 Attribute Multi Select [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.

How to enable Layered Navigation.

  • 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.10.17 - August 31, 2021

  • Fixed a bug that that caused an inability to load a product collection when accessing a Product Page and clicking the back button in a browser after having initially filtered products using an attribute ending in the letter "p". This only happened in conjunction with the Ajax Infinite Scroll extension.
  • Fixed a small display issue that caused filters text to display on two lines when the label was comprised out of more than one word and the filter was set to be Fully Opened.
  • Confirmed compatibility with the latest Magento 2.4.3-p1 and 2.3.7-p2 versions.


What’s new in v.1.10.15 - August 31, 2021

  • Excluded the Hidden Filters functionality from applying on mobile. Before this fix, there would be certain cases in which filters could not be accessed on mobile when the setting was enabled.
  • Overhauled various JS files related to the Layered Navigation for improved overall performance.
  • Confirmed compatibility with the newly released Magento 2.4.3, 2.4.2-p2 and 2.3.7-p1 versions.
  • Added .localhost as an accepted domain termination for the licensing process.


What’s new in v.1.10.11 - July 7, 2021

  • New feature: Added new Slide-Down Filtering Design options for adding a Box-Shadow to the Layered Navigation.
  • Fixed an error that was thrown when the Ajax functionality was disabled and the Category Filter was enabled.
  • Added CSS adjustments for the Price Filter to ensure proper display.
  • Added improvments to the WeltPixel Developer Magento Admin section. Latest Cron Jobs now lists the last 100 executed Cron Jobs.


What’s new in v.1.10.9 - May 18, 2021

  • New Feature: Added new border design options for Horizontal Filtering buttons.
  • Optimized CLS score by improving element load order for the Horizontal Layered Navigation design.
  • Fixed a minor alignment issue related to the "Now Shopping by" text that occured after filtering via the Slide Down Layered Navigation design.
  • Fixed a bug that caused an error to be thrown when using the Reviews filter with the Ajax functionality disabled.
  • Added design adjustments to the Slider Price Filter display mode.
  • Minor backend comment adjustments for increased clarity.
  • Confirmed compatibility with the newly released Magento 2.3.7 and 2.4.2-p1 versions.


What’s new in v.1.10.7 - March 26, 2021

  • New Feature: Added a new Horizontal Design version whereby you can now add borders and change the border radius, button colors and hover colors for filters in the Horizontal Design.
  • Fixed an issue related to the Horizontal Design mode that caused pages to duplicate on Category Pages.
  • Excluded Magento 2.0.x - 2.2.x from new features and fixes starting with this release.
  • Adjusted WeltPixel Developer section comments.


What’s new in v.1.10.5 - February 12, 2021

  • New Feature: Added a transition animation on mobile when opening the Layered Navigation, as well as when collapsing filter options.
  • New Feature: Added the possibility of showing/hiding filters on the Default Display Mode for the Layered Navigation.
  • Fixed a bug that caused the Multi-Select functionality to stop working when Ajax was disabled via the module settings.
  • Fixed a decimal issue related to the Slider Price Filter.
  • Made CSS adjustments to the Horizontal display mode.
  • Confirmed compatibility with the newly released Magento 2.4.2 version.
  • Added additional backend versioning verifications.
  • Backend module code optimizations.


What’s new in v.1.10.1 - October 22, 2020

  • New Feature: Added a new filtering design option - Horizontal Filtering.
  • New Feature: Added a transition animation when opening the Layered Navigation on mobile.
  • Fixed an issue related to the Price Filter on multi-store environments with different Display Currencies configured whereby the Price Filter in the Layered Navigation did not update the currency displayed to the configured Display Currency.
  • Fixed a bug related to Swatch Tooltips in the Layered Navigation. Previously, if a Product on the Category Page was configured with a Swatch Color, the Tooltips in the Layered Navigation would only show that specific color, regardless of what color was selected in the Layered Navigation.
  • Fixed an issue related to Swatches in the Layered Navigation whereby they would look different to the Swatches on the Category Page and had a black, square outline added.
  • Fixed a bug that caused an error to be thrown on Magento 2.4.x when filtering via the Category Filter.
  • Added additional verifications.
  • Confirmed compatibility with the newly released Magento 2.4.1 version.


What’s new in v.1.10.0 - August 10, 2020

  • Confirmed compatibility with the newly released Magento 2.4.0 version.


What’s new in v.1.9.8 - July 6, 2020

  • New feature: Added compatibility for Elastic Search 7.
  • Fixed a small display issue whereby the Slide In Vertical Navigation design overlapped with various elements in the Sticky Header.
  • Fixed a bug related to the jQuery UI patch for Magento 2.3.0 - 2.3.2 which affected the Slide In and Slide Down designs.
  • Changed aligment for Swatches on the Slide Down design for esthetic purposes.
  • Added additional error handling.
  • Code cleanup.
  • Whitelisted domain for Content Security Policies introduced in Magento 2.3.5.


What’s new in v.1.9.7 - May 7, 2020

  • Added a new setting which allows for enabling and displaying a Recently Ordered block within the Layered Navigation.
  • Fixed a bug which prevented the Attribute Category Visibility option from taking additional Root Categories into consideration.
  • Fixed a bug which caused the Layered Navigation to open after using Category Sorting or Pagination, when set to Slide In Vertical Filtering display mode.
  • Fixed an issue that caused filter options to overlap with the menu on Slide In Vertical filtering display mode.
  • Fixed a JS error that was thrown on the frontend when using the Slide In Vertical filtering display mode.
  • Adjusted jQuery UI patch released in the previous version to fix an error thrown on Magento 2.3.2.
  • Fixed an issue which prevented the disabling of Multiselect for the Price filter.
  • Added new translations.
  • Confirmed compatibility with Magento 2.3.5.
  • Implemented small Backend performance optimizations.
  • Added nxcli.net (Nexcess temporary URL) as a valid domain in the licensing process.
  • Added an option in the Developer section to allow for switching Magento's CSP between "report-only" and "restrict".


What’s new in v.1.9.6 - April 9, 2020

  • Fixed a potential error related to the Price Filter when used with Elastic Search.
  • Added a patch for jQuery UI (Magento 2.3.0 - 2.3.2).
  • Fixed a Backend issue on Magento Commerce whereby the Category Schedule functionality was not working properly.


What’s new in v.1.9.5 - March 10, 2020

  • Fixed an issue whereby certain backend options would become unusable when upgrading from the FREE version to the PRO version.
  • Fixed a console error shown on mobile when the Price Filter was set to display as a Slider.
  • Fixed a console error that occurred when applying a filter via Ajax.
  • Assured compatibility for later versions of Elastic Search 6.0+
  • Backend label text changes.
  • Added backend Google reCaptcha compatibility for Magento 2.3.x


What’s new in v.1.9.4 - February 5, 2020

  • Fixed an issue related to Multi-Select which caused Color filters to disappear when filtering by Color, Size and then Color again.
  • Fixed an issue that prevented disabled products from disappearing from the frontend when filtering via the Category filter.
  • Fixed a display issue related to the Ratings Filter - the filter was missing visual confirmaton that it was selected.
  • Fixed a bug which, in some cases, prevented items from being added to cart after a page load with Infinite Scroll.
  • Fixed an bug that prevented the page from returning to the top when changing pages via Ajax Next Page.
  • Fixed a bug that caused subcategories in the menu to overlap with the filter button.
  • Fixed a bug related to Ratings Filter Multi-Select - this option was not working.
  • Code enhancements for increased security. Changed User Group info collection method.
  • Confirmed compatibility for Magento 2.3.4.


What’s new in v.1.9.2 - November 27, 2019

  • Fixed a bug which caused Swatches to display incorrectly after filtering or sorting via Ajax.
  • Added Magento and PHP version in the WeltPixel Developer section.


What’s new in v.1.9.1 - October 16, 2019

  • Introduced compatibility with Elastic Search 6.0+. The module was previously only compatible with Elastic Search up to version 5.0+.
  • Removed an unnecessary comment from the Admin Section related to the Multiselect option.
  • Added escape HTML/JS tags to prevent XSS (Cross site scripting).
  • Fixed an issue whereby the Layered Navigation would open by itself after selecting a sorting option on the Category Page (Slide Down design).
  • Fixed an issue that caused Swatches to disappear from the Category Page products after sorting or filtering and scrolling to the next page.
  • Confirmed compatibility with the latst Magento 2.3.3 version.
  • Included the WeSupply Toolbox integration extension - Proactive Notifications Email & SMS, Returns & RMA, Store Locator, Delivery Date Estimate, Logistics Analytics, NPS & CSAT score. Get Free on-boarding and launch within 24 hours.


What’s new in v.1.9.0 - July 18, 2019

  • Fixed an issue on mobile whereby Multi-Select filters that were selected would not properly show this.
  • Confirmed compatibility with Magento 2.3.2.
  • Added HTTPS endpoint for licensing process.


What’s new in v.1.8.5 - June 7, 2019

  • Fixed an issue whereby the number of items in the toolbar did not match the number of items in the collection.
  • Fixed an error that occured when the Price Navigation Step Calculation option was set to Automatic (equalize product counts).
  • Fixed an error that occured on certain configurations when using the Ratings filter.
  • Fixed a bug which prevented scrolling on mobile devices.
  • Small performance improvements.


What’s new in v.1.8.4 - April 25, 2019

  • Fixed an issue where the Slide In filter would overlap with the Sticky Header on certain configurations.
  • Added PHP version in the WeltPixel Developer Section.


What’s new in v.1.8.3 - April 3rd, 2019

  • Fixed a bug related to the Price filter on the Search Results page.
  • Optimized Price slider to remember initial price range.
  • Enabled MultiSelect option for Swatch type attributes.
  • Fixed an issue on the Search Results page when filtering while Infinite Scroll was enabled. Sometimes, not all products were loaded.
  • Added the option for Swatch Attributes to be Fully Opened or Closed.
  • Fixed Show More/Less Attribute Options functionality on mobile devices.
  • Confirmed compatibility for Magento 2.3.1.


What’s new in v.1.8.2 - January 24, 2019

  • Disabled fields that are not applicable for swatch attribute types in order to avoid confusion.
  • Logo overlay fix.
  • Fixed a bug that prevented the correct functionality of Layered Navigation when Infinite Scroll was disabled - compatibility fixes.
  • Layered Navigation - fixing Sort By mobile filter, this filter was not working correctly with the Free version of this extension, Pro version worked correctly.
  • Helpcenter adjustment, removed zendesk iframe and added a simple link to our Support Center in order to avoid any potential conflicts with other admin js added by 3rd party extensions.
  • Fix for multiple rewritten ImageFactory classes, rewrite check validity, rewrite checks optimizations.


What’s new in v.1.8.0 - December 8, 2018

  • Fixed an error that occured in Magento 2.1.x while checking for an existing category in the registry.
  • Fixed a bug where the Mega Menu was not loading on Internet Explorer due to unrecognized function.
  • Compatibility adjustments for Magento 2.1.16/2.2.7/2.3.0.
  • PHP 7.2 compatibility added.
  • As Magento 2.3 comes with major core changes, we have provided a different set of files in order to achieve the best performance on each version.


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

  • Layered 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)
  • LNew 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