1

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 ?

  • Is your js present under skin/frontend/<your_package>/<your_theme>/jsfilename.js ? – Raphael at Digital Pianism May 17 '16 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 '16 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 '16 at 12:43
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?

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

  • Have you heard of Layout Update XML – Stevie G Dec 20 '16 at 10:02
  • @StevieG, why have you downvote, please reason me. – Rakesh Jesadiya Dec 20 '16 at 10:31
  • You are using custom code, the question is asking how to make the layout update via the admin section – Stevie G Dec 20 '16 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 '16 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

  • 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 '16 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 '16 at 12:51
  • I don't think <head> should be inside <body>, just <head> is enough. – Ben Crook May 17 '16 at 13:23
  • 1
    Yes right i have updated my code. – Prashant Valanda May 17 '16 at 13:25
0

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>

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.