5

I want to call a js file on homepage only how to to do that. Right now i am calling

<head><link src="js/myfile.js"/></head>

But it is calling for all page and give error js error on other pages. I am creating a custom theme.

2
  • It's very strange request for me. Can you describe more why you need only js on this page
    – KAndy
    Commented Jan 18, 2016 at 8:58
  • @KAndy i got the solution myself will answer soon Commented Jan 18, 2016 at 9:00

5 Answers 5

5

there are two way to do it.

1.first you add it from admin panel. content->page -> edit page in design tab Layout Update XML

    <head><script src="js/myfile.js"/></head>
  1. if your js is based on some js library.

app/design/frontend/yourspacename/yourtheme/Magento_Cms/layout/cms_index_index.xml

 <head><script src="js/myfile.js"/></head>
9
  • 1
    Sadly i got error adding from admin panel. Please correct the XML data and try again. Element 'head': This element is not expected. Expected is one of ( referenceContainer, container, update, move )
    – Volvox
    Commented Oct 18, 2016 at 13:06
  • @Volvox you are adding this in design tab? Commented Oct 18, 2016 at 13:11
  • if this is not working add it with <head><link src="js/myfile.js"/></head> Commented Oct 18, 2016 at 13:27
  • Yes, this error appear when I add <head><link src="js/myfile.js"/></head> in Layout Update XML on Design tab. Maybe it does not work in new versions, because here magento.stackexchange.com/questions/126646/… someone gave similar solution, and got similar response.
    – Volvox
    Commented Oct 18, 2016 at 13:38
  • @Volvox i tested it with 2.0. maybe version reasoning Commented Oct 18, 2016 at 16:50
2

You can call your js only on home page by adding cms_index_index.xml file into your layout directory and your module directory structure should be

app/code/YOUR_NAMESPACE/YOUR_MODULENAME/view/frontend/layout/

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head><link src="js/myfile.js"/></head> 
</page>
2
  • i am creating a custom theme. Commented Jan 18, 2016 at 5:41
  • Where do you put the js file? And if you put it in your theme under web/js how do you reference it there?
    – Scott
    Commented Jun 29, 2018 at 17:39
2

If you want to include a javascript file from your theme into a cms page or block, you can use the built in x-magento-init system. This will remove the need to use xml or placing anything in the head of the page.

Inside of the cms block or page, place in these lines:

<script type="text/x-magento-init">
{
    "*": {
         "Magento_Theme/js/custom-file": {}
    }
}
</script>

This is unique to Magento 2 and is a way of initializing Javascript by Magento and not the browser. Alan Storm goes into depth on this issue here. But the basic idea is you have Magento trigger off the execution of Javascript.

You pass in the DOM node you want to target (in this case we are targeting the whole page with *). You then pass in the path to the file you want to include. For us, we are passing in Magento_Theme/js/custom-file which will resolve to:

app/design/frontend/{Namespace}/{theme}/Magento_Theme/web/js/custom-file.js

Note that you are using the Magento shorthand here, where the path ditches the .js file ext and then web dir, this can trip you up sometimes.

Inside the custom file you need to use require JS in the file to prevent conflicts. There are a few different ways to do this, but this works for me:

define([
    'jquery'
], function ($) {
    return function () {
        // Your code here
    }
});
1

Please follow this-

<head>
<script src="Namespace_Modulename::js/theViewer.min.js"/>
0

If you are creating a custom module, and you want to add your JS file you can do as @Keyur suggests.

If you want to include it from a custom Theme, do the following:

1) Add your JS file in app/design/frontend/Kapisharp/wildernessx-theme/Magento_Theme/web/js/your_new_js_file.js

2) Create file app/design/frontend/{COMPANY}/{THEME_NAME}/Magento_Theme/layout/cms_index_index.xml

3) Add the following in the file:

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

4) I had to run setup:static-content:deploy and set permissions to server writable folders as well.

bin/magento setup:static-content:deploy -f
##### Don't run the following command in a production environment. Research the best permissions approach in your scenario. This is for local environments only
chmod -R 777 pub/static generated/ var/ app/etc/

Your Answer

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

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