Magento 2: Add CSS / JS to custom layout - only applied to single page

Question

I have a custom page layout for Home Page.

I created this custom layout this way:

app/design/frontend/Vendor/yourtheme/Magento_Theme/layouts.xml

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="custom">
        <label translate="true">custom layout</label>
    </layout>
</page_layouts>

app/design/frontend/Vendor/yourtheme/Magento_Theme/page_layout/custom.xml

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
    </referenceContainer>
</layout>

How can I add CSS only to this layout? (not through default_head_blocks.xml). This has to show up only on that page and only on that layout?

The only way that worked for me was through Admin interface via:

But, I would like to do this via XML. Is this possible?

You used to be able to do this in Magento 1 with add css with actions

<action method="addCss">
    <stylesheet>css/javcustom.css</stylesheet>
</action>

Is there something like that in Magento 2?

Answer 1

First we create a custom layout, after that we add custom CSS and JS to this custom layout.

Step-1 :Create layouts.xml file at app/code/VendoreName/CustomLayout/view/frontend and add below code.

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="customlayout">
        <label translate="true">Custom CMS Page</label>
    </layout>
</page_layouts>

File name must be layout id name. Now we create customlayout.xml

Step-2 : Create customlayout.xml file at app/code/VendoreName/CustomLayout/view/frontend/page_layout and add below code.

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="3columns"/>
    <referenceContainer name="page.wrapper">
        <container name="footer-bottom" as="footer-bottom" after="footer" label="Footer Bottom" htmlTag="footer" htmlClass="page-footer-bottom">
            <container name="footer-bottom-content" as="footer-bottom-content" htmlTag="div" htmlClass="footer content">
                <block class="Magento\Framework\View\Element\Template" name="report.bugs.bottom" template="Magento_Theme::html/bugreport.phtml"/>
            </container>
        </container>
    </referenceContainer>
</layout>

You can also add your custom block and phtml file also. which are shown in Layouts when custom layout is used.

Now we add CSS and Js to custom layout file

Step-3 : Create routes.xml file at app/code/VendoreName/CustomLayout/etc/frontend and add below code.

<?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 frontName="customlayout" id="customlayout">
            <module name="VendoreName_CustomLayout"/>
        </route>
    </router>
</config>

Step-4 : Create Index.php file at app/code/VendoreName/CustomLayout/Controller/Index and add below code.

<?php

namespace VendoreName\CustomLayout\Controller\Index;

use Magento\Framework\App\Action\Action;

class Index extends \Magento\Framework\App\Action\Action
{
    protected $resultPageFactory;
    protected $customerSession;

    public function __construct(
        \Magento\Framework\App\Action\Context $context,
        \Magento\Framework\View\Result\PageFactory $resultPageFactory
    ) {
        $this->resultPageFactory = $resultPageFactory;
        parent::__construct($context);
    }

    public function execute()
    {
        $resultPage = $this->resultPageFactory->create();
        return $resultPage;
    }
}

Step-5 : Create customlayout_index_index.xml file at app/code/VendoreName/CustomLayout/view/frontend/layout and add below code.

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="VendoreName_CustomLayout::css/my_custom_layout_css.css" />
        <script src="VendoreName_CustomLayout::js/my_custom_layout_js.js" />
    </head>
</page>

Here the file name must be like routename_controllername_actionname.xml and all characters must be in lowercase.

Add your css to app/code/VendoreName/CustomLayout/view/frontend/web/css/my_custom_layout_css.css

Add your Js to app/code/VendoreName/CustomLayout/view/frontend/web/js/my_custom_layout_js.js

Step-6 : Create events.xml file at app/code/VendoreName/CustomLayout/etc and add below 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="custom_layout_css_js_add" instance="VendoreName\CustomLayout\Observer\CustomLayoutHandler" />
    </event>
</config>

we need to add to css and js before page layout that's why we use layout_load_before event.

Step-7 : Create CustomLayoutHandler.php file at app/code/VendoreName/CustomLayout/Observer and add below code.

<?php

namespace VendoreName\CustomLayout\Observer;

class CustomLayoutHandler implements \Magento\Framework\Event\ObserverInterface
{
    public function __construct(
        \Magento\Framework\View\Result\Page $pageResult,
        \Magento\Cms\Model\Page $page
    ) {
        $this->_pageResult = $pageResult;
        $this->_page = $page;
    }

    public function execute(\Magento\Framework\Event\Observer $observer)
    {
        $layout = $observer->getData('layout');
        $currentPageLayout = $this->_pageResult->getConfig()->getPageLayout();
        //$currentPageLayout = $this->_page->getPageLayout();
        if ($currentPageLayout == "customlayout") {
            $layout->getUpdate()->addHandle('customlayout_index_index');
        }

    }
}

I Hope This Helps You.