How to use different layouts for different category levels.

Sometimes we need to use different layouts or structures based on category levels. For this, we can able to use different layouts based on different category levels.

Solution: To create different layout structures for different categories develop layout files under the Magento_Catalog.

One option would be adding a layout handle based on the category depth with an observer on the layout_load_before event. That would allow layout updates based on category depth using an xml file like catalog_category_view_level_{{level}}.xml

For this

Create
Vendor/Module/etc/frontend/events.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="layout_load_before">
        <observer name="vendor_module_layout_load_before" instance="Vendor\Module\Observer\CategoryDepthLayout" />
    </event>
</config>

Vendor/Module/Observer/CategoryDepthLayout.php

<?php

namespace Vendor\Module\Observer;

use Magento\Framework\Registry;
use Magento\Framework\Event\ObserverInterface;
use Magento\Framework\Event\Observer;

class CategoryDepthLayout implements ObserverInterface
{
    const ACTION_NAME = 'catalog_category_view';

    /** @var Registry */
    private $registry;

    public function __construct(
        Registry $registry
    ) {
        $this->registry = $registry;
    }

    public function execute(Observer $observer)
    {
        if ($observer->getFullActionName() !== self::ACTION_NAME) {
            return;
        }

        $category = $this->registry->registry('current_category');

        /** @var \Magento\Framework\View\Layout $layout */
        $layout = $observer->getLayout();
        $layout->getUpdate()->addHandle(self::ACTION_NAME . '_level_' . $category->getLevel());
    }
}

Then create a category layout file in the design folder.

EX: Magento_Catalog/layout/catalog_category_view_level_2.xml
Add the sections we need for category level 2
Same method can be use for any level of categories.

Thank you.

Leave a comment

Your email address will not be published. Required fields are marked *