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.

  • It's very strange request for me. Can you describe more why you need only js on this page – KAndy Jan 18 '16 at 8:58
  • @KAndy i got the solution myself will answer soon – Qaisar Satti Jan 18 '16 at 9:00
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_inde_index.xml

 <head><script src="js/myfile.js"/></head>
  • 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 Oct 18 '16 at 13:06
  • @Volvox you are adding this in design tab? – Qaisar Satti Oct 18 '16 at 13:11
  • if this is not working add it with <head><link src="js/myfile.js"/></head> – Qaisar Satti Oct 18 '16 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 Oct 18 '16 at 13:38
  • @Volvox i tested it with 2.0. maybe version reasoning – Qaisar Satti Oct 18 '16 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>
  • i am creating a custom theme. – Qaisar Satti Jan 18 '16 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 Jun 29 '18 at 17:39
1

Please follow this-

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

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
    }
});
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, privacy policy and cookie policy

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