Menu Close
    Hire us Request quote Reading list Switch to dark mode

    How to create layered navigation on custom page in Magento 2?

    Today I’ll explain how you can add layered navigation to a custom page. In this example I’ll create a module named Webkul_LayeredNavigation and on layerednavigation/index/index page I’ll show the products with layered navigation. Here I’ll only explain those code which are necessary for implementation of the layered navigation.

    P.S – You can check Webkul Layered Navigation Module

    First create di.xml with following code under Webkul/LayeredNavigation/etc/ folder,


    Then add following in the layout file which in my case is layerednavigation_index_index.xml under Webkul/LayeredNavigation/view/frontend/layout/ folder,


    In the above code I have added class page-products to the body tag to inherit the default styling.

    Now we will override the model files to get required data.

    Now create Layer.php under Webkul/LayeredNavigation/Model/ folder with following code,


    After that create Resolver.php under Webkul/LayeredNavigation/Model/Layer/ folder with following code,


    Then under Webkul/LayeredNavigation/Model/ResourceModel/Layer/Filter/ folder create Price.php file,


    Now we are done with the model and we will override the block to show proper data.

    Now create Navigation.php file under Webkul/LayeredNavigation/Block/ folder with following content,


    Then create State.php file under Webkul/LayeredNavigation/Block/Navigation/ folder with following code,

    Then under Webkul/LayeredNavigation/Block/Product/ folder create ListProduct.php and add following code,


    That’s it, we have overridden all the required files.

    Now you can check the front-end and it should display the layered navigation on left side,

    Happy coding 🙂

    . . .

    Comments (9)

    Add Your Comment

  • Jhonattan
    Hi!
    This is very useful!
    I’m having an issue with price filter on this custom layered navigation. Query is broken when I activate filtering by price. I see magento’s ORM is mixing wrong tables. Take a look this pastebin https://pastebin.com/3RCb3Byj
    Any help will be appreciated.
    Thanks!
  • Moses
    Thank you for sharing this code. Its working perfect.
    I do have a question though, Does the Class Preferences that you have declared in the di.xml is safe. Any Idea why this is not declared by Magento itself.
    • Sanjay Chouhan
      Yes it is safe.
  • sebastien
    Hi,
    Can you tell me which version you use ?
    I’m trying on 2.1.9 but when I use the ‘setup:d:compile’ command it gives error :

    Class Magento\Framework\Indexer\DimensionFactory does not exist (use in the Price.php)

    This class doesn’t exists in 2.1.9
    Thanks for your help.

    • Sanjay Chouhan
      Hi, just remove it from the constructor.
  • birjitsinh
    please help me not working with 2.2.5
  • Navin Bhudiya
    it gives error
    : Uncaught Error: Call to a member function getIdentities() on null in vendor/magento/module-catalog/Block/Category/View.php:179
    • Sanjay Chouhan
      Please let me know which version of Magento are you using?
  • Back to Top
    css.php
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just received your message and our expert will get back to you shortly.
    Send Again
    Close