{"id":154405,"date":"2018-12-22T13:35:19","date_gmt":"2018-12-22T13:35:19","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=154405"},"modified":"2024-02-29T13:45:18","modified_gmt":"2024-02-29T13:45:18","slug":"how-to-create-layered-navigation-on-custom-page-in-magento-2","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/","title":{"rendered":"How to create layered navigation on custom page in Magento 2?"},"content":{"rendered":"\n

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.<\/p>\n\n\n\n

Here I’ll only explain those code which are necessary for implementation of the layered navigation.<\/p>\n\n\n\n

P.S<\/strong> – You can check Magento 2 Layered Navigation Extension<\/strong><\/a><\/p>\n\n\n\n

First create di.xml<\/strong>\u00a0with following code under Webkul\/LayeredNavigation\/etc\/<\/strong>\u00a0folder,<\/p>\n\n\n\n

<?xml version="1.0"?>\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="..\/..\/..\/..\/..\/lib\/internal\/Magento\/Framework\/ObjectManager\/etc\/config.xsd">\n    <preference for="Magento\\Catalog\\Model\\Layer\\ContextInterface" type="Magento\\Catalog\\Model\\Layer\\Context" \/>\n    <preference for="Magento\\Catalog\\Model\\Layer\\ItemCollectionProviderInterface" type="Magento\\Catalog\\Model\\Layer\\Category\\ItemCollectionProvider" \/>\n    <preference for="Magento\\Catalog\\Model\\Layer\\StateKeyInterface" type="Magento\\Catalog\\Model\\Layer\\Category\\StateKey" \/>\n    <preference for="Magento\\Catalog\\Model\\Layer\\CollectionFilterInterface" type="Magento\\Catalog\\Model\\Layer\\Category\\CollectionFilter" \/>\n    <preference for="Magento\\Catalog\\Model\\Layer\\FilterableAttributeListInterface" type="Magento\\Catalog\\Model\\Layer\\Category\\FilterableAttributeList" \/>\n    <preference for="Magento\\Catalog\\Model\\Layer\\AvailabilityFlagInterface" type="Magento\\Catalog\\Model\\Layer\\Category\\AvailabilityFlag" \/>\n    <preference for="Magento\\Catalog\\Model\\ResourceModel\\Layer\\Filter\\Price" type="Webkul\\LayeredNavigation\\Model\\ResourceModel\\Layer\\Filter\\Price" \/>\n<\/config><\/pre>\n\n\n\n
Then add following in the layout file which in my case is\u00a0layerednavigation_index_index.xml\u00a0<\/strong>under\u00a0Webkul\/LayeredNavigation\/view\/frontend\/layout\/<\/strong> folder,<\/p>\n\n\n\n
<?xml version="1.0"?>\n<page xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View\/Layout\/etc\/page_configuration.xsd">\n\t<body>\n        <attribute name="class" value="page-products"\/>\n        <referenceContainer name="content">\n            <block class="Webkul\\LayeredNavigation\\Block\\Product\\ListProduct" name="layerednavigation_index_index" as="product_list" template="Magento_Catalog::product\/list.phtml">\n                <container name="category.product.list.additional" as="additional" \/>\n                <block class="Magento\\Framework\\View\\Element\\RendererList" name="category.product.type.details.renderers" as="details.renderers">\n                    <block class="Magento\\Framework\\View\\Element\\Template" name="category.product.type.details.renderers.default" as="default"\/>\n                <\/block>\n                <block class="Magento\\Catalog\\Block\\Product\\ProductList\\Item\\Container" name="category.product.addto" as="addto">\n                    <block class="Magento\\Catalog\\Block\\Product\\ProductList\\Item\\AddTo\\Compare"\n                        name="category.product.addto.compare" as="compare"\n                        template="Magento_Catalog::product\/list\/addto\/compare.phtml"\/>\n                <\/block>\n                <block class="Magento\\Catalog\\Block\\Product\\ProductList\\Toolbar" name="product_list_toolbar" template="Magento_Catalog::product\/list\/toolbar.phtml">\n                    <block class="Magento\\Theme\\Block\\Html\\Pager" name="product_list_toolbar_pager"\/>\n                <\/block>\n                <action method="setToolbarBlockName">\n                    <argument name="name" xsi:type="string">product_list_toolbar<\/argument>\n                <\/action>\n            <\/block>\n        <\/referenceContainer>\n        <referenceContainer name="sidebar.main">\n            <block class="Webkul\\LayeredNavigation\\Block\\Navigation" name="catalog.leftnav" as="navigation" before="-" template="Magento_LayeredNavigation::layer\/view.phtml">\n                <block class="Webkul\\LayeredNavigation\\Block\\Navigation\\State" name="catalog.navigation.state" as="state" template="Magento_LayeredNavigation::layer\/state.phtml" \/>\n                <block class="Magento\\LayeredNavigation\\Block\\Navigation\\FilterRenderer" name="catalog.navigation.renderer" as="renderer" template="Magento_LayeredNavigation::layer\/filter.phtml">\n                  <arguments>\n                      <argument name="product_layer_view_model" xsi:type="object">Magento\\LayeredNavigation\\ViewModel\\Layer\\Filter<\/argument>\n                  <\/arguments>\n                <\/block>\n            <\/block>\n        <\/referenceContainer>\n        <referenceBlock name="layerednavigation_index_index">\n             <arguments>\n                  <argument name="viewModel" xsi:type="object">Magento\\Catalog\\ViewModel\\Product\\OptionsData<\/argument>\n             <\/arguments>\n        <\/referenceBlock>\n    <\/body>\n<\/page><\/pre>\n\n\n\n
In the above code I have added class page-products <\/strong>to the body tag<\/a> to inherit the default styling.<\/p>\n\n\n\n
Now we will override the model files to get required data.<\/p>\n\n\n\n
Now create Layer.php<\/strong>\u00a0under\u00a0Webkul\/LayeredNavigation\/Model\/<\/strong> folder with following code,<\/p>\n\n\n\n
<?php\nnamespace Webkul\\LayeredNavigation\\Model;\n\nuse Magento\\Catalog\\Api\\CategoryRepositoryInterface;\nuse Magento\\Catalog\\Model\\ResourceModel\\Product\\Attribute\\CollectionFactory as AttributeCollectionFactory;\nuse Magento\\Catalog\\Model\\ResourceModel\\Product\\CollectionFactory;\n\nclass Layer extends \\Magento\\Catalog\\Model\\Layer\n{\n    public function __construct(\n        \\Magento\\Catalog\\Model\\Layer\\ContextInterface $context,\n        \\Magento\\Catalog\\Model\\Layer\\StateFactory $layerStateFactory,\n        AttributeCollectionFactory $attributeCollectionFactory,\n        \\Magento\\Catalog\\Model\\ResourceModel\\Product $catalogProduct,\n        \\Magento\\Store\\Model\\StoreManagerInterface $storeManager,\n        \\Magento\\Framework\\Registry $registry,\n        CategoryRepositoryInterface $categoryRepository,\n        CollectionFactory $productCollectionFactory,\n        array $data = []\n    ) {\n        $this->productCollectionFactory = $productCollectionFactory;\n        parent::__construct(\n            $context,\n            $layerStateFactory,\n            $attributeCollectionFactory,\n            $catalogProduct,\n            $storeManager,\n            $registry,\n            $categoryRepository,\n            $data\n        );\n    }\n\n\tpublic function getProductCollection()\n\t{\n        if (isset($this->_productCollections['webkul_custom'])) {\n            $collection = $this->_productCollections['webkul_custom'];\n        } else {\n            \/\/here you assign your own custom collection of products\n            $collection = $this->productCollectionFactory->create();\n            $this->prepareProductCollection($collection);\n            $this->_productCollections['webkul_custom'] = $collection;\n        }\n\t\treturn $collection;\n\t}\n\n}<\/pre>\n\n\n\n
After that create\u00a0Resolver.php\u00a0<\/strong>under\u00a0Webkul\/LayeredNavigation\/Model\/Layer\/<\/strong> folder with following code,<\/p>\n\n\n\n
<?php\nnamespace Webkul\\LayeredNavigation\\Model\\Layer;\n\nclass Resolver extends \\Magento\\Catalog\\Model\\Layer\\Resolver\n{\n\tpublic function __construct(\n\t\t\\Magento\\Framework\\ObjectManagerInterface $objectManager,\n\t\t\\Webkul\\LayeredNavigation\\Model\\Layer $layer,\n\t\tarray $layersPool\n\t) {\n\t\t$this->layer = $layer;\n\t\tparent::__construct($objectManager, $layersPool);\n\t}\n\n\tpublic function create($layerType)\n\t{\n\t\t\n\t}\n}<\/pre>\n\n\n\n
Then under Webkul\/LayeredNavigation\/Model\/ResourceModel\/Layer\/Filter\/<\/strong> folder create\u00a0Price.php<\/strong> file,<\/p>\n\n\n\n
<?php\nnamespace Webkul\\LayeredNavigation\\Model\\ResourceModel\\Layer\\Filter;\n\nuse Magento\\Framework\\App\\Http\\Context;\nuse Magento\\Framework\\Indexer\\DimensionFactory;\nuse Magento\\Framework\\Search\\Request\\IndexScopeResolverInterface;\n\nclass Price extends \\Magento\\Catalog\\Model\\ResourceModel\\Layer\\Filter\\Price \n{\n    public function __construct(\n        \\Magento\\Framework\\Model\\ResourceModel\\Db\\Context $context,\n        \\Magento\\Framework\\Event\\ManagerInterface $eventManager,\n        \\Webkul\\LayeredNavigation\\Model\\Layer\\Resolver $layerResolver,\n        \\Magento\\Customer\\Model\\Session $session,\n        \\Magento\\Store\\Model\\StoreManagerInterface $storeManager,\n        $connectionName = null,\n        IndexScopeResolverInterface $priceTableResolver = null,\n        Context $httpContext = null,\n        DimensionFactory $dimensionFactory = null\n    ) {\n        parent::__construct($context, $eventManager, $layerResolver, $session, $storeManager, $connectionName, $priceTableResolver, $httpContext, $dimensionFactory);\n    }\n}<\/pre>\n\n\n\n
Now we are done with the model and we will override the block to show proper data.<\/p>\n\n\n\n
Now create\u00a0Navigation.php\u00a0<\/strong>file under\u00a0Webkul\/LayeredNavigation\/Block\/<\/strong>\u00a0folder with following content,<\/p>\n\n\n\n
<?php\nnamespace Webkul\\LayeredNavigation\\Block;\n\nclass Navigation extends \\Magento\\LayeredNavigation\\Block\\Navigation\n{\n\tpublic function __construct(\n\t\t\\Magento\\Framework\\View\\Element\\Template\\Context $context,\n\t\t\\Webkul\\LayeredNavigation\\Model\\Layer\\Resolver $layerResolver,\n\t\t\\Magento\\Catalog\\Model\\Layer\\FilterList $filterList,\n\t\t\\Magento\\Catalog\\Model\\Layer\\AvailabilityFlagInterface $visibilityFlag,\n\t\tarray $data = []\n\t) {\n\t\tparent::__construct($context, $layerResolver, $filterList,\n\t\t\t$visibilityFlag);\n\t}\n}<\/pre>\n\n\n\n
Then create\u00a0State.php<\/strong>\u00a0file under\u00a0Webkul\/LayeredNavigation\/Block\/Navigation\/<\/strong> folder with following code,<\/p>\n\n\n\n
<?php\nnamespace Webkul\\LayeredNavigation\\Block\\Navigation;\n\nclass State extends \\Magento\\LayeredNavigation\\Block\\Navigation\\State\n{\n\u00a0\u00a0\u00a0\u00a0public function __construct(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\\Magento\\Framework\\View\\Element\\Template\\Context $context,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\\Webkul\\LayeredNavigation\\Model\\Layer\\Resolver $layerResolver,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0array $data = []\n\u00a0\u00a0\u00a0\u00a0) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0parent::__construct($context, $layerResolver, $data);\n}\n}<\/pre>\n\n\n\n
Then under\u00a0Webkul\/LayeredNavigation\/Block\/Product\/\u00a0<\/strong>folder create\u00a0ListProduct.php<\/strong>\u00a0and add following code,<\/p>\n\n\n\n
<?php\nnamespace Webkul\\LayeredNavigation\\Block\\Product;\n\nclass ListProduct extends \\Magento\\Catalog\\Block\\Product\\ListProduct\n{\n\tpublic function __construct(\n\t\t\\Magento\\Catalog\\Block\\Product\\Context $context,\n\t\t\\Magento\\Framework\\Data\\Helper\\PostHelper $postDataHelper,\n\t\t\\Webkul\\LayeredNavigation\\Model\\Layer\\Resolver $layerResolver,\n\t\t\\Magento\\Catalog\\Api\\CategoryRepositoryInterface $categoryRepository,\n\t\t\\Magento\\Framework\\Url\\Helper\\Data $urlHelper,\n\t\tarray $data = []\n\t) {\n\t\tparent::__construct($context, $postDataHelper, $layerResolver,\n\t\t\t$categoryRepository, $urlHelper, $data);\n\t}\n}<\/pre>\n\n\n\n
That’s it, we have overridden all the required files.<\/p>\n\n\n\n
Now you can check the front-end and it should display the layered navigation on left side,<\/p>\n\n\n\n
\"Custom<\/figure>\n\n\n\n
Happy coding \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
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 Magento 2 Layered […]<\/a><\/p>\n","protected":false},"author":201,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[302,1],"tags":[7942,7943,7941],"class_list":["post-154405","post","type-post","status-publish","format-standard","hentry","category-magento2","category-uncategorized","tag-custom-product-collection","tag-layered-navigation-for-custom-page","tag-magento-2-layered-navigation"],"yoast_head":"\nHow to create layered navigation on custom page in Magento 2? - Webkul Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create layered navigation on custom page in Magento 2? - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"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 Magento 2 Layered [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-12-22T13:35:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-02-29T13:45:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_505.png\" \/>\n<meta name=\"author\" content=\"Sanjay Chouhan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sanjay Chouhan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/\"},\"author\":{\"name\":\"Sanjay Chouhan\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462\"},\"headline\":\"How to create layered navigation on custom page in Magento 2?\",\"datePublished\":\"2018-12-22T13:35:19+00:00\",\"dateModified\":\"2024-02-29T13:45:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/\"},\"wordCount\":262,\"commentCount\":8,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_505.png\",\"keywords\":[\"custom product collection\",\"layered navigation for custom page\",\"Magento 2 layered navigation\"],\"articleSection\":[\"Magento2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/\",\"url\":\"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/\",\"name\":\"How to create layered navigation on custom page in Magento 2? - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_505.png\",\"datePublished\":\"2018-12-22T13:35:19+00:00\",\"dateModified\":\"2024-02-29T13:45:18+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_505.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_505.png\",\"width\":1299,\"height\":655},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create layered navigation on custom page in Magento 2?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462\",\"name\":\"Sanjay Chouhan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Sanjay Chouhan\"},\"sameAs\":[\"https:\/\/www.instagram.com\/sanjaychouhansc\/\",\"https:\/\/in.linkedin.com\/in\/scchouhansanjay\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/sanjay-chouhan180\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create layered navigation on custom page in Magento 2? - Webkul Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/","og_locale":"en_US","og_type":"article","og_title":"How to create layered navigation on custom page in Magento 2? - Webkul Blog","og_description":"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 Magento 2 Layered [...]","og_url":"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2018-12-22T13:35:19+00:00","article_modified_time":"2024-02-29T13:45:18+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_505.png","type":"","width":"","height":""}],"author":"Sanjay Chouhan","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Sanjay Chouhan","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/"},"author":{"name":"Sanjay Chouhan","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462"},"headline":"How to create layered navigation on custom page in Magento 2?","datePublished":"2018-12-22T13:35:19+00:00","dateModified":"2024-02-29T13:45:18+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/"},"wordCount":262,"commentCount":8,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_505.png","keywords":["custom product collection","layered navigation for custom page","Magento 2 layered navigation"],"articleSection":["Magento2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/","url":"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/","name":"How to create layered navigation on custom page in Magento 2? - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_505.png","datePublished":"2018-12-22T13:35:19+00:00","dateModified":"2024-02-29T13:45:18+00:00","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_505.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2018\/12\/Screenshot_505.png","width":1299,"height":655},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/how-to-create-layered-navigation-on-custom-page-in-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create layered navigation on custom page in Magento 2?"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/645580979f637b0e355deea21bd07462","name":"Sanjay Chouhan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cd6ee19f99bd1fcafef819135529c952d7c875d06fedd9fd4c4eb0996bafc1bd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Sanjay Chouhan"},"sameAs":["https:\/\/www.instagram.com\/sanjaychouhansc\/","https:\/\/in.linkedin.com\/in\/scchouhansanjay"],"url":"https:\/\/webkul.com\/blog\/author\/sanjay-chouhan180\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/154405","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/201"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=154405"}],"version-history":[{"count":8,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/154405\/revisions"}],"predecessor-version":[{"id":425405,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/154405\/revisions\/425405"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=154405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=154405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=154405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}