Magento 2:- How to call a js file on homepage?

magento.stackexchange https://magento.stackexchange.com/questions/97761

  •  09-12-2020
  •  | 
  •  

Question

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.

Was it helpful?

Solution

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>

OTHER TIPS

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>

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
    }
});

Please follow this-

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

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/
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top