4

I tried so may things but unable to add the CSS & JS files for each Static CMS pages. I know if CSS can be added in cms_page_view.xml but this will reflect in all pages.

is there anyway to add different CSS files for different static pages.

5

You can add Layout Update XML update

GOTO ADMIN -> Content -> Pages -> Edit page -> Design -> Layout Update XML

With the content :

<head>
  <css src="Namespace_YourModule::css/styles.css"/>
</head>

Then there is a bug in Magento 2, you need to override the default Magento 2 vendor/magento/framework/View/Layout/etc/page_layout.xsd validation file.

A workaround, not a clean solution, but waiting Magento 2 to allow override xsd files

app/code/Vendor/Module/etc/di.xml

<preference for="Magento\Framework\View\Model\Layout\Update\Validator" type="Vendor\Module\Model\Layout\Update\Validator" />

app/code/Vendor/Module/etc/page_layout.xsd

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
    <xs:include schemaLocation="urn:magento:framework:View/Layout/etc/elements.xsd"/>
    <xs:include schemaLocation="urn:magento:framework:View/Layout/etc/head.xsd"/>
    <xs:include schemaLocation="urn:magento:framework:View/Layout/etc/body.xsd"/>

    <xs:complexType name="pageLayoutType">
        <xs:sequence minOccurs="0" maxOccurs="unbounded">
            <xs:element ref="referenceContainer" minOccurs="0" maxOccurs="unbounded"/>
            <xs:element ref="container" minOccurs="0" maxOccurs="unbounded"/>
            <xs:element ref="update" minOccurs="0" maxOccurs="unbounded"/>
            <xs:element ref="move" minOccurs="0" maxOccurs="unbounded"/>
            <xs:element name="head" type="headType" minOccurs="0" maxOccurs="unbounded"/>
            <xs:element name="body" type="bodyType" minOccurs="0" maxOccurs="unbounded"/>
        </xs:sequence>
    </xs:complexType>

    <xs:element name="layout" type="pageLayoutType">
        <xs:unique name="containerKey">
            <xs:selector xpath=".//container"/>
            <xs:field xpath="@name"/>
        </xs:unique>
    </xs:element>
</xs:schema>

app/code/Vendor/Module/Model/Layout/Update/Validator.php

<?php
namespace Hublot\Setup\Model\Layout\Update;

use Magento\Framework\Config\Dom\UrnResolver;

class Validator extends \Magento\Framework\View\Model\Layout\Update\Validator
{
    const LAYOUT_SCHEMA_PAGE_HANDLE = 'page_layout';

    const LAYOUT_SCHEMA_MERGED = 'layout_merged';

    /**
     * @param \Magento\Framework\Config\DomFactory $domConfigFactory
     * @param \Magento\Framework\Config\Dom\UrnResolver $urnResolver
     */
    public function __construct(
        \Magento\Framework\Config\DomFactory $domConfigFactory,
        UrnResolver $urnResolver
    ) {
        $this->_domConfigFactory = $domConfigFactory;
        $this->_initMessageTemplates();
        $this->_xsdSchemas = [
            self::LAYOUT_SCHEMA_PAGE_HANDLE => $urnResolver->getRealPath(
                'urn:hublot:module:Hublot_Setup:etc/page_layout.xsd'
            ),
            self::LAYOUT_SCHEMA_MERGED => $urnResolver->getRealPath(
                'urn:magento:framework:View/Layout/etc/layout_merged.xsd'
            ),
        ];
    }
}
0

You can add custom css like below:
make an entry in layout file

 <page>   
        <head>
                <css src="css/ie-9.css" ie_condition="IE 9" />
                <css src="Magento_Catalog::css/custom.css" />
                <css src="Custom_SampleModule::css/custom.css"/>
            </head>
   </page>
0

I found that Franck Garnier's does not quite work on 2.1.16.

I had to change the last file, Validator.php, a bit to get it to work as follows.

namespace Vendor\CmsLayoutFix\Model\Layout\Update;

use Magento\Framework\App\ObjectManager;
use Magento\Framework\Config\Dom\UrnResolver;
use Magento\Framework\Config\DomFactory;
use Magento\Framework\Config\ValidationStateInterface;

class Validator extends \Magento\Framework\View\Model\Layout\Update\Validator
{
    const LAYOUT_SCHEMA_PAGE_HANDLE = 'page_layout';

    const LAYOUT_SCHEMA_MERGED = 'layout_merged';

    private $validationState;

    public function __construct(
        DomFactory $domConfigFactory,
        UrnResolver $urnResolver,
        ValidationStateInterface $validationState = null
    ) {
        parent::__construct($domConfigFactory, $urnResolver);
        $this->_xsdSchemas = [
            self::LAYOUT_SCHEMA_PAGE_HANDLE => $urnResolver->getRealPath(
                'urn:vendor:module:Vendor_CmsLayoutFix:etc/page_layout.xsd'
            ),
            self::LAYOUT_SCHEMA_MERGED => $urnResolver->getRealPath(
                'urn:magento:framework:View/Layout/etc/layout_merged.xsd'
            ),
        ];
    }
}

WHERE:

vendor = Vendor

module = CmsLayoutFix

-1

In magento all CMS pages have an option of Layout Update XML update .Just Call your Custom code there also add CSS or JS .

Admin CMS Pages

GOTO ADMIN -> Content -> Pages -> Edit page -> Design -> Layout Update XML

add below call

<head>
  <css src="Namespace_YourModule::css/styles.css"/>
</head>
  • this works in page layout configuration not in Layout Update XML , hope you checked... – Mohammad Mujassam Jul 21 '16 at 4:44
  • It is working fine I have tested this code . just remove "Namespace_YourModule::" and set in to "Layout Update XML" and refresh you Cache so you can show in that page only. – Hitesh Vaghasiya Jul 21 '16 at 18:59
  • 1
    Please correct the XML data and try again. Element 'head': This element is not expected. Expected is one of ( referenceContainer, container, update, move ). Line: 1 this we will get if we put anything else apart from above four Element. I am using magento 2.0.7 – Mohammad Mujassam Jul 22 '16 at 4:40
  • 1
    Yeah, this worked for me. Just remember to flush the cache after you change the layout for the cms page to pickup the change. – Dallas Clarke Dec 13 '17 at 3:23

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.