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

881 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

  235. Reading your article has greatly helped me, and I agree with you. But I still have some questions. Can you help me? I will pay attention to your answer. thank you.

    Reply

  251. Greetings, have tried to subscribe to this websites rss feed but I am having a bit of a problem. Can anyone kindly tell me what to do? “강남안마” ’Nice post.Very useful info specifically the last part 🙂 Thank you and good luck.

    Reply

  297. Hi! This post couldn’t be written any better!
    Reading through this post reminds me of my old room mate!
    He always kept chatting about this. I will forward this post
    to him. Pretty sure he will have a good read. Thank you for sharing!

    Reply

  309. Good day! This is kind of off topic but I need some advice from an established blog.
    Is it tough to set up your own blog? I’m not
    very techincal but I can figure things out pretty fast. I’m thinking about creating my own but I’m not sure where to begin. Do you have any points or suggestions?
    With thanks

    Reply

  386. I’m always looking for web sites that sell real bags. I’ve purchased several bags over the last year. actually the bags are always perfect, the shipping time is very prompt, and the communication is excellent. including the I highly recommend this site to anyone who’s looking for real bags. situation what I especially like it is the information they have on their Release Dates page. This really helps me stay in tune with what’s going on in the world of bags.
    https://www.louisvuittonsoutlet.com https://www.louisvuittonsoutlet.com/

    Reply

  391. I received my shoes yesterday. This is the first time ordering shoes from this website and I am definitely satisfied with them. and even I would give this website a 20 on a scale from 1-10 and would certainly recommend this site to all. exactly like the I will definitely be purchasing more items in the future. an invaluable It has been a pleasure.
    cheap jordans for sale https://www.cheapjordansstore.com/

    Reply

  404. I received my jordans yesterday. This is the first time ordering shoes from this website and I am definitely satisfied with them. or it may be I would give this website a 20 on a scale from 1-10 and would certainly recommend this site to all. exactly like the I will definitely be purchasing more items in the future. direction It has been a pleasure.
    authentic cheap jordans https://www.cheapsneakeronline.com/

    Reply

  405. I received my jordans yesterday. This is the first time ordering shoes from this website and I am definitely satisfied with them. or simply I would give this website a 20 on a scale from 1-10 and would certainly recommend this site to all. including the I will definitely be purchasing more items in the future. regardless It has been a pleasure.
    cheap jordans for men https://www.retrocheapjordansshoes.com/

    Reply

  407. I received my jordans yesterday. This is the first time ordering shoes from this website and I am definitely satisfied with them. nor I would give this website a 20 on a scale from 1-10 and would certainly recommend this site to all. appreciate the I will definitely be purchasing more items in the future. no matter what It has been a pleasure.
    cheap retro jordans https://www.cheapretrojordansshoes.com/

    Reply

  411. I received my jordans yesterday. This is the first time ordering shoes from this website and I am definitely satisfied with them. also known as I would give this website a 20 on a scale from 1-10 and would certainly recommend this site to all. choose the I will definitely be purchasing more items in the future. anyway It has been a pleasure.
    cheap real jordans https://www.realjordansshoes.com/

    Reply

  413. I received my jordans yesterday. This is the first time ordering shoes from this website and I am definitely satisfied with them. or alternatively I would give this website a 20 on a scale from 1-10 and would certainly recommend this site to all. including I will definitely be purchasing more items in the future. in any event It has been a pleasure.
    cheap jordans for sale https://www.realcheapjordan.com/

    Reply

  416. I received my jordans yesterday. This is the first time ordering shoes from this website and I am definitely satisfied with them. or I would give this website a 20 on a scale from 1-10 and would certainly recommend this site to all. most notably the I will definitely be purchasing more items in the future. no matter what It has been a pleasure.
    cheap jordans online https://www.cheaprealjordan.com/

    Reply

  535. Good blog you’ve got here.. Itís hard to find good quality writing like yours nowadays. I seriously appreciate individuals like you! Take care!!

    Reply