RAJEEV K TOMY

Music | Magento | Malayalee

Magento 2: How Can Add Js/Css Through Layout Update XML File

Magento 2 introduced <head /> and <body /> nodes which we can use in our layout update xml file in order to change it’s contents. However this raises lot of confusions. Here I would like to discuss about a loosely coupled feature (or bug ?) which we can see if tries to add js/css via layout update xml file. Following code will add a js into our page.
File : app\code\Namespace\Module\view\frontend\layout\something_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="Namespace_Module::test.js" />
    </head>
</page>

If you are in developer mode and after you cache is cleaned , then after loading you specific page you will see your test.js file in page source. Now the same result we can achieve using following XML update.

Update 1 : Using <script /> Node.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Namespace_Module::test.js" />
    </head>
</page>

Update 2 : Using <css /> Node.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Namespace_Module::test.js" />
    </head>
</page>

Both these changes will assert test.js into your page source. Wait .. did <css /> node worked to add a js file ? The answer is Yes. You can interchangably use any of <link />, <script /> or <css /> in order to add a js or css file.

ie, you can use <script /> node in order to add a CSS file and you can use <css /> node in order to add a JS file, which may arise confusion among developers.

What is your opinion regarding this ? Please let me know through comment section.

Prev post Magento 2: What is Default Controller
Next post Magento 2: How to Check Product is New or Not

Rajeev K Tomy

Related Posts

232 thoughts on “Magento 2: How Can Add Js/Css Through Layout Update XML File”

  106. Everything information about medication. Some are medicines that help people when doctors prescribe. https://avodart.science/# where to buy generic avodart without prescription
    Comprehensive side effect and adverse reaction information. Everything about medicine.

    Reply

  143. All trends of medicament. earch our drug database.
    cheap ed drugs
    Some are medicines that help people when doctors prescribe. Learn about the side effects, dosages, and interactions.

    Reply

  149. Comprehensive side effect and adverse reaction information. drug information and news for professionals and consumers.
    https://edonlinefast.com treatments for ed
    Long-Term Effects. Some are medicines that help people when doctors prescribe.

    Reply

  182. drug information and news for professionals and consumers. Learn about the side effects, dosages, and interactions.
    sildenafil usa
    Learn about the side effects, dosages, and interactions. Generic Name.

    Reply

Leave a Reply

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

Back to top