Programmatically adding a class to the page body
Posted on 1/18/2018
If you ever need to programmatically add a class to the body tag of your Magento stores, you’ll need to setup an event observer for the layout_load_before
event. Within your observer you’ll then want to add Magento\Framework\View\Page\Config
as a dependency, you’ll then use the addBodyClass
method to add your class.
See below for a more detailed example. In my example, I’m adding the class customer-logged-in
to the body when a customer is logged in.
Event: layout_load_before
File: 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_add_body_class" instance="Vendor\Module\Observer\AddClassToBody" /> </event> </config>
File: Observer/AddClassToBody.php
<?php namespace Vendor\Module\Observer; use Magento\Customer\Model\Session as CustomerSession; use Magento\Framework\View\Page\Config as PageConfig; use Magento\Framework\Event\ObserverInterface; class AddClassToBody implements ObserverInterface { /** @var PageConfig */ protected $pageConfig; /** @var CustomerSession */ protected $customerSession; public function __construct(PageConfig $pageConfig, CustomerSession $customerSession) { $this->pageConfig = $pageConfig; $this->customerSession = $customerSession; } public function execute(\Magento\Framework\Event\Observer $observer) { if (!$this->customerSession->isLoggedIn()) { return; } $this->pageConfig->addBodyClass('customer-logged-in'); } }
Tip: Some class names in Magento are not very help when you’re using the use
statement. I’ll often use an alias to refer to classes see below:
Example:
Directly using Magento\Customer\Model\Session
in my constructor is long winded. But also, when using the use
statement simply putting Session
doesn’t mean too much either.
Instead I’ll do this: use Magento\Customer\Model\Session as CustomerSession;
. Immediately it’s clear what the class is doing.
Another example: use Magento\Framework\View\Page\Config as PageConfig;
. Config
doesn’t mean anything useful, however PageConfig
is much more meaningful as it provides that extra bit of context into what the class does.