Magento 2 : Category Page Layout in Magento

We will create a new category page layout and use that layout using the custom category attributes in Magento 2.

Why would you need to add a custom layout to a category?
1. To add your custom css for specific page.
2. Insert more page information.
3. To add custom JS to the page, such as GTM script.

We will use events and observers to add a custom layout to the category page. We will use the layout_load_before because there is no other point to append a custom layout until the page is rendered.

Please follow the below steps.

Step 1: Create a custom module then add below files in that created module. For example assume that i have created “Magemonkeys/CategoryLayout”.

Step 2: Create InstallData.php at app/code/Magemonkeys/CategoryLayout/Setup/
Here we create the custom category attribute code as shown below:

<?php
namespace Magemonkeys\CategoryLayout\Setup;

use Magento\Eav\Setup\EavSetupFactory;
use Magento\Framework\Setup\InstallDataInterface;
use Magento\Framework\Setup\ModuleContextInterface;
use Magento\Framework\Setup\ModuleDataSetupInterface;

class InstallData implements InstallDataInterface {
	private $eavSetupFactory;

	public function __construct(EavSetupFactory $eavSetupFactory) {
		$this->eavSetupFactory = $eavSetupFactory;
	}

	public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context) {
		$eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
		$eavSetup->addAttribute(\Magento\Catalog\Model\Category::ENTITY, 'new_layout', [
			'type' => 'int',
			'label' => 'New Layout',
			'input' => 'boolean',
			'source' => 'Magento\Eav\Model\Entity\Attribute\Source\Boolean',
			'visible' => true,
			'default' => '0',
			'required' => false,
			'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
			'group' => 'Display Settings',
		]);
	}
}

<?php

namespace Magemonkeys\CategoryLayout\Setup;

use Magento\Eav\Setup\EavSetupFactory;

use Magento\Framework\Setup\InstallDataInterface;

use Magento\Framework\Setup\ModuleContextInterface;

use Magento\Framework\Setup\ModuleDataSetupInterface;

class InstallData implements InstallDataInterface {

private $eavSetupFactory;

public function __construct(EavSetupFactory $eavSetupFactory) {

$this->eavSetupFactory = $eavSetupFactory;

}

public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context) {

$eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);

$eavSetup->addAttribute(\Magento\Catalog\Model\Category::ENTITY, 'new_layout', [

'type' => 'int',

'label' => 'New Layout',

'input' => 'boolean',

'source' => 'Magento\Eav\Model\Entity\Attribute\Source\Boolean',

'visible' => true,

'default' => '0',

'required' => false,

'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,

'group' => 'Display Settings',

]);

}

Step 3: Create category_form.xml at app/code/Magemonkeys/CategoryLayout/view/adminhtml/ui_component/

Here we display the Custom Category attribute on the Display Settings tab in the Admin Side Category View page:

<?xml version="1.0"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="display_settings">
        <field name="new_layout">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">boolean</item>
                    <item name="formElement" xsi:type="string">checkbox</item>
                    <item name="label" xsi:type="string" translate="true">Custom Layout</item>
                    <item name="prefer" xsi:type="string">toggle</item>
                    <item name="valueMap" xsi:type="array">
                        <item name="true" xsi:type="string">1</item>
                        <item name="false" xsi:type="string">0</item>
                    </item>
                    <item name="default" xsi:type="number">0</item>
                </item>
            </argument>
        </field>
    </fieldset>
</form>

<?xml version="1.0"?>

<item name="dataType" xsi:type="string">boolean</item>

<item name="formElement" xsi:type="string">checkbox</item>

<item name="label" xsi:type="string" translate="true">Custom Layout</item>

<item name="prefer" xsi:type="string">toggle</item>

</item>

</item>

</argument>

</field>

</fieldset>

</form>

Now you can check this layout in the admin panel configuration.

Step 4: Create events.xml at app/code/Magemonkeys/CategoryLayout/etc/frontend/

Here we use the layout_load_before code.

<?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="category_custom_layout" instance="Magemonkeys\CategoryLayout\Observer\Categorycustomlayout" />
    </event>
</config>

<?xml version="1.0"?>

</event>

</config>

Step 5: Create Categorycustomlayout.php at app/code/Magemonkeys/CategoryLayout/Observer/
Here we check the category attribute is enabled/disabled and add the layout handle for page layout.

<?php

namespace Magemonkeys\CategoryLayout\Observer;

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

class Categorycustomlayout 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 */
		if ($category->getCustomLayout()) {
			$layout = $observer->getLayout();
			$layout->getUpdate()->addHandle('catalog_category_custom_view');
		} else {
			return true;
		}
	}
}

<?php

namespace Magemonkeys\CategoryLayout\Observer;

use Magento\Framework\Event\Observer;

use Magento\Framework\Event\ObserverInterface;

use Magento\Framework\Registry;

class Categorycustomlayout 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 */

if ($category->getCustomLayout()) {

$layout = $observer->getLayout();

$layout->getUpdate()->addHandle('catalog_category_custom_view');

} else {

return true;

}

Step 6: Create catalog_category_custom_view.xml at app/code/Magemonkeys/CategoryLayout/view/frontend/layout/

Here we remove the sidebar wishlist and custom class.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
    	<attribute name="class" value="catalog_category_custom_view" />
        <referenceBlock name="wishlist_sidebar" remove="true" />
    </body>
</page>

<?xml version="1.0"?>

<body>

</body>

</page>

Apply some CSS for styling and you’ll have your new page layout with new customised content a couple of times.

Fill the below form if you have any Magento programming need.

Make your site sales-friendly by optimizing the search box
The search box is the most underrated functionality that is...
Why should you have a Magento support agency?
Managing and customizing Magento site can be a daunting task,...
Hire Magento Developers as Per Your Flexibility and Requirements
Having an in-house eCommerce developer is very costly, and it...
5 Mistakes in Magneto are killing your conversion rates!!
Have you wonder why your conversions are less compare to...
Is your eCommerce well maintained?
According to a research, around 68% of eCommerce stores are...

Author Info

Hire B. Darji

Fill the form & Get Installation Support