2

I need to create a extension which adds a class to the body tag.

The class should be defined in the magento 2 backend in the extension settings.

How can I do this?

2
  • Do you want to add single class or multiple class with comma separated in the backend extension settings? May 20 at 8:35
  • What have you tried already? May 20 at 8:55

1 Answer 1

2

You can achieve your requirement by following steps:

Step 1. Create registration.php under

app/code/M2Expert/Classes/registration.php

with below content:

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'M2Expert_Classes',
    __DIR__
);

Step 2. Create module.xml under

app/code/M2Expert/Classes/etc/module.xml

with below content:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="M2Expert_Classes" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Backend"/>
        </sequence>
    </module>
</config>

Step 3. Create system.xml under

app/code/M2Expert/Classes/etc/adminhtml/system.xml

with below content:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="m2expert" translate="label" sortOrder="10">
            <label>Mage 2 Expert</label>
        </tab>
        <section id="m2expert" translate="label" sortOrder="130" showInDefault="1" showInWebsite="1" showInStore="1">
            <class>separator-top</class>
            <label>Body Class</label>
            <tab>m2expert</tab>
            <resource>M2Expert_Classes::class_config</resource>
            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0">
                <label>General Configuration</label>
                <field id="enable" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                    <label>Enable</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
                <field id="classes" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="0" showInStore="0">
                    <label>Classes</label>
                    <comment>These classes will be added to body tag on the frontend.</comment>
                    <depends>
                        <field id="m2expert/general/enable">1</field>
                    </depends>
                </field>
            </group>
        </section>
    </system>
</config>

Step 4. Create events.xml under

app/code/M2Expert/Classes/etc/frontend/events.xml

with below content:

<?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="m2expert_add_body_class" instance="M2Expert\Classes\Observer\AddClassToBody" />
    </event>
</config>

Step 5. Create AddClassToBody.php under

app/code/M2Expert/Classes/Observer/AddClassToBody.php

with below content:

<?php
namespace M2Expert\Classes\Observer;

use Magento\Framework\View\Page\Config as PageConfig;
use Magento\Framework\Event\ObserverInterface;

class AddClassToBody implements ObserverInterface
{
    protected $pageConfig;

    protected $scopeConfig;

    public function __construct(
        PageConfig $pageConfig,
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
    ) {
        $this->pageConfig = $pageConfig;
        $this->scopeConfig = $scopeConfig;
    }

    public function execute(\Magento\Framework\Event\Observer $observer)
    {
        if (!$this->isEnabled()) {
            return;
        }

        if ($classes = $this->getClasses()) {
            foreach (explode(',', $classes) as $class) {
                $this->pageConfig->addBodyClass($class);
            }
        }        
    }

    private function isEnabled()
    {
        return $this->scopeConfig->getValue("m2expert/general/enable", \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
    }

    private function getClasses()
    {
        return $this->scopeConfig->getValue("m2expert/general/classes", \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
    }
}

Thats it! Now goto extension settings enable the module and put single or multiple classes(with comma separated) and use it!

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.