2

I'm using magento 2 and I'm trying to add this code into my Layout Update XML. 

<reference name="head">
  <action method="addItem">
    <type>skin_js</type><script>jsfilename.js</script>
  </action>
</reference>

But for some reason, my js doesn't get loaded on the home page.

what's wrong with my code ?

Improve this question
3
  • Is your js present under skin/frontend/<your_package>/<your_theme>/jsfilename.js ?
    – Raphael at Digital Pianism
    May 17, 2016 at 12:36
  • @alexcr make sure are you using magento-1 or magento-2? magento-2 doesn't have skin folder
    – Prashant Valanda
    May 17, 2016 at 12:41
  • you mean app/design/frontend/<your_package>/<your_theme>/jsfilename.js ? Yes it is ! and yes I'm using magento 2
    – alexcr
    May 17, 2016 at 12:43

4 Answers 4

Reset to default
1

I would not advise adding the JS via the XML anymore, Magento 2 best practices are to use Require JS.

Please see the official docs here and here - or my answer to a related question here

Require JS can be added via the template files with data-mage-init attributes (on the element to trigger the script) or a script tag (define the element to trigger the script).

<nav data-mage-init='{ "<component_name>": {...} }'></nav>

<!-- Or with the script tag -->


<script type="text/x-magento-init">
    {
        "#test": {
            "Magento_Cms/js/your-script-name-here": {
            }
        }
    }
</script>
Improve this answer
0

In Magento 2 The format will change
Please refer to below URL to add custom js in a head.

Add custom js in head in magento2?

Improve this answer
0

You can add only inside homepage using below code,

app/code/Vendor/Modulename/view/frontend/layout/cms_index_index.xml

cms_index_index.xml file,

<?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="Vendor_Modulename::css/styles.css"/>    
       <script src="Vendor_Modulename::js/custom.js"/>   
    </head>>
    <body>
       //body code
    </body>
</page>

Put css file at app/code/Vendor/Modulename/view/frontend/web/css/styles.css

Put js file at app/code/Vendor/Modulename/view/frontend/web/js/custom.js

Improve this answer
4
  • Have you heard of Layout Update XML
    – tread
    Dec 20, 2016 at 10:02
  • @StevieG, why have you downvote, please reason me.
    – Rakesh Jesadiya
    Dec 20, 2016 at 10:31
  • You are using custom code, the question is asking how to make the layout update via the admin section
    – tread
    Dec 20, 2016 at 11:55
  • @StevieG, but you have to inform user not do like down vote, Its usedful to many user using xml code
    – Rakesh Jesadiya
    Dec 20, 2016 at 11:55
0

Using below code you can add css and js:

Create cms_index_index.xml to add css and js only for homepage at app/code/Namesapce/Modulename/view/frontend/layout/cms_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>        
                 <css src="Namespace_Modulename::css/filename.css"/>    
                 <script type="text/javascript"  src="Namespace_Modulename::js/filename.js"/>   
            </head>        
    </page>

Add css file at app/code/Namesapce/Modulename/view/frontend/web/css/filename.css

Add js file at app/code/Namesapce/Modulename/view/frontend/web/js/filename.js

Improve this answer
4
  • yes but this is gonna insert me the js only for the home page ? or every page ? cause I only need it on the home page..
    – alexcr
    May 17, 2016 at 12:50
  • This will added to all page change default.xml file name to cms_index_index.xml it's only add to homepage
    – Prashant Valanda
    May 17, 2016 at 12:51
  • I don't think <head> should be inside <body>, just <head> is enough.
    – Ben Crook
    May 17, 2016 at 13:23
  • 1
    Yes right i have updated my code.
    – Prashant Valanda
    May 17, 2016 at 13:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.