Display Layered Navigation on a CMS Page in Magento

Table of Contents

  1. Introduction
  2. Why Layered Navigation Matters
  3. Creating a Custom Module
  4. Creating the Layout XML File
  5. Assigning the Layout Update to Your CMS Page
  6. Ensuring Layered Navigation Works Correctly
  7. Enabling and Deploying Your Module
  8. Conclusion
  9. FAQ

Introduction

Are you struggling to add layered navigation to your Magento CMS page? If so, you're not alone. Many Magento users face challenges in incorporating this crucial feature, which allows customers to filter products based on different attributes directly on content-managed pages. Layered navigation is a powerful tool that enhances user experience by making it easier for customers to find the products they need. In this blog post, we'll walk you through a step-by-step guide on how to display layered navigation on your Magento CMS page using a custom module. By the end of this article, you'll have a clear understanding of how to seamlessly integrate this feature into your Magento store.

Why Layered Navigation Matters

Layered navigation significantly improves the shopping experience by enabling users to filter products based on attributes such as price, color, size, and brand. This feature is especially useful for stores with a vast inventory, allowing customers to quickly narrow down their choices. Implementing effective layered navigation can lead to higher conversion rates, as it simplifies the product search process, making it more likely that visitors find and purchase the products they want.

Creating a Custom Module

To begin, you'll need to create a custom module that will manage the layered navigation logic on your CMS page. Follow these steps to set up your module:

Directory Structure

First, create the necessary directory structure for your custom module. This structure should be under the app/code directory and follow Magento's naming conventions. Your directory structure should look like this:

app/code/YourVendor/LayeredNavigation/

module.xml

Inside your module directory, create a module.xml file to register your module. Place the following content into this file:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="YourVendor_LayeredNavigation" setup_version="1.0.0">
    </module>
</config>

registration.php

Next, create a registration.php file to register the module with Magento:

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'YourVendor_LayeredNavigation',
    __DIR__
);

Creating the Layout XML File

Magento uses layout XML files to determine how different parts of your store are displayed. You'll need to create a layout XML file to specify how and where the layered navigation should appear on your CMS page.

cms_page_view.xml

Create a layout XML file named cms_page_view.xml under the following directory:

app/code/YourVendor/LayeredNavigation/view/frontend/layout/

Add the following content to cms_page_view.xml:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\LayeredNavigation\Block\Navigation\State" name="layered.navigation.state" before="product_list" template="Magento_LayeredNavigation::layer/state.phtml"/>
            <block class="Magento\LayeredNavigation\Block\Navigation" name="catalog.leftnav" before="-" template="Magento_LayeredNavigation::layer/view.phtml"/>
        </referenceContainer>
    </body>
</page>

Assigning the Layout Update to Your CMS Page

With your layout XML file in place, the next step is to assign this layout update to your specific CMS page. Follow these steps:

  1. Navigate to Content > Pages in the Magento admin panel.
  2. Select the CMS page you want to edit.
  3. Go to the Design tab.
  4. In the Layout Update XML field, add the following code:
<referenceContainer name="sidebar.main">
    <block class="YourVendor\LayeredNavigation\Block\CustomNavigation" name="custom.layered.navigation" template="YourVendor_LayeredNavigation::layer/view.phtml"/>
</referenceContainer>

Ensuring Layered Navigation Works Correctly

Sometimes, the layered navigation might not work out of the box due to the CMS page's reliance on product collections and filters, which are typically associated with category or search results pages. You might need to extend the block class to ensure it operates correctly.

Creating a Custom Block (if necessary)

To handle the product collection and filtering logic, create a custom block class if required. The specific implementation will depend on your requirements.

Overriding the Template

You may need to override the default view.phtml file to customize it for your CMS page. Place the customized template in the following directory:

app/code/YourVendor/LayeredNavigation/view/frontend/templates/layer/

Enabling and Deploying Your Module

Finally, enable your custom module and deploy static content to reflect these changes:

  1. Enable your module:

    php bin/magento module:enable YourVendor_LayeredNavigation
    php bin/magento setup:upgrade
    
  2. Deploy static content:

    php bin/magento setup:static-content:deploy
    

Conclusion

Adding layered navigation to a Magento CMS page can significantly enhance the user experience by allowing customers to filter products based on various attributes directly from content-managed pages. By following the steps outlined in this guide, you can create a custom module to manage layered navigation on your CMS page, improving the shopping experience for your customers and potentially increasing your conversion rates.

FAQ

How do I add layered navigation to a CMS page in Magento?

To add layered navigation to a CMS page, create a custom module, define the layout XML, and assign the layout update to your CMS page. Ensure that the layered navigation works correctly by possibly extending the block class and overriding the default template as needed.

Why is layered navigation not working on my CMS page?

Layered navigation might not work on CMS pages out of the box because it typically relies on product collections and filters associated with category or search results pages. You may need to extend the block class and customize the template to ensure it functions correctly on CMS pages.

Can I customize the appearance of layered navigation on my Magento CMS page?

Yes, you can customize the appearance by overriding the default view.phtml template file and placing your customized template in the appropriate directory within your custom module.

Seamless content creation—Powered by our content engine.