Reading list Switch to dark mode

    How to set a theme on a specific route or page in Magento 2

    Updated 27 October 2022

    Here you learn about how to set a theme on a specific route or page in Magento 2. Sometimes we have installed any theme on our front end and we need to check a page on the luma or blank theme while debugging any issue with the layout or functionality this might help you to do so.

    Here we have a module named Webkul_Debug with routes.xml in Webkul/Debug/etc/frontend/routes.xml

    <?xml version="1.0"?>
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
        <router id="standard">
            <route id="debug" frontName="debug">
                <module name="Webkul_Debug"/>
            </route>
        </router>
    </config>

    Then we create a controller to test the theme Webkul/Debug/Controller/Index/Index.php

    <?php declare(strict_types=1);
    
    namespace Webkul\Debug\Controller\Index;
    
    use Magento\Framework\App\Action\HttpGetActionInterface;
    use Magento\Framework\View\Result\Page;
    use Magento\Framework\View\Result\PageFactory;
    
    class Index implements HttpGetActionInterface
    {
        /** @var PageFactory */
        private PageFactory $pageFactory;
    
        /**
         * Index constructor.
         * @param PageFactory $pageFactory
         */
        public function __construct(
            PageFactory $pageFactory
        ) {
            $this->pageFactory = $pageFactory;
        }
    
        /**
         * @return Page
         */
        public function execute(): Page
        {
            return $this->pageFactory->create();
        }
    }

    Then we create an events.xml file to capture the layout load before event Webkul/Debug/etc/events.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <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="webkul_debug_set_theme_for_debug" instance="Webkul\Debug\Observer\SetThemeForDebug"/>
        </event>
    </config>

    Then we create an observer file for our event named “webkul_debug_set_theme_for_debug” SetThemeForDebug.php Path : “Webkul/Debug/Observer/SetThemeForDebug.php”

    Searching for an experienced
    Magento 2 Company ?
    Find out More
    <?php declare(strict_types=1);
    
    namespace Webkul\Debug\Observer;
    
    use Magento\Framework\App\Request\Http;
    use Magento\Framework\Event\Observer;
    use Magento\Framework\Event\ObserverInterface;
    use Magento\Framework\View\DesignInterface;
    
    class SetThemeForDebug implements ObserverInterface
    {
        /** @var Http */
        private Http $request;
    
        /** @var DesignInterface  */
        private DesignInterface $design;
    
        /**
         * @param Http $request
         * @param DesignInterface $design
         */
        public function __construct(
            Http $request,
            DesignInterface $design
        ) {
            $this->request = $request;
            $this->design = $design;
        }
    
        /**
         * @param Observer $observer
         */
        public function execute(Observer $observer): void
        {
            $pathInfo = $this->request->getPathInfo();
    
            if (substr($pathInfo, 0, 8) === '/debug') {
                $this->design->setDesignTheme('Magento/blank');
            }
        }
    }

    In the “setDesignTheme” function you can set any theme just like we passed the “Magento/blank” theme in the above code. And you can also change the condition on which the theme applies.

    So that’s how to set a theme on a specific route or page. Now we can see the blank theme on our created route “{base_url}/debug” as shown in the below screenshot.

    How to set a theme on a specific route or page

    Here you check our other blogs:

    https://webkul.com/blog/magento-2-how-to-configure-and-customize-system-xml/

    https://webkul.com/blog/how-to-show-product-stock-remaining-items-in-magento-2/

    Here you can check all about Magento 2 themes configuration, and development.

    https://developer.adobe.com/commerce/frontend-core/guide/themes/

    Please feel free to ask any questions we will try to answer them.

    . . .

    Leave a Comment

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


    Be the first to comment.

    Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home