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 ?
4 Answers 4
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>
In Magento 2 The format will change
Please refer to below URL to add custom js in a head.
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 XMLtread– tread2016年12月20日 10:02:10 +00:00Commented Dec 20, 2016 at 10:02 -
@StevieG, why have you downvote, please reason me.Rakesh Jesadiya– Rakesh Jesadiya2016年12月20日 10:31:40 +00:00Commented Dec 20, 2016 at 10:31
-
You are using custom code, the question is asking how to make the layout update via the
adminsectiontread– tread2016年12月20日 11:55:03 +00:00Commented 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 codeRakesh Jesadiya– Rakesh Jesadiya2016年12月20日 11:55:57 +00:00Commented Dec 20, 2016 at 11:55
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– alexcr2016年05月17日 12:50:05 +00:00Commented 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 homepagePrashant Valanda– Prashant Valanda2016年05月17日 12:51:01 +00:00Commented May 17, 2016 at 12:51
-
I don't think <head> should be inside <body>, just <head> is enough.Ben Crook– Ben Crook2016年05月17日 13:23:03 +00:00Commented May 17, 2016 at 13:23
-
1Yes right i have updated my code.Prashant Valanda– Prashant Valanda2016年05月17日 13:25:14 +00:00Commented May 17, 2016 at 13:25
skin/frontend/<your_package>/<your_theme>/jsfilename.js?