1

I've followed the DevDoc on How to Add a JavaScript Module (Magento 2.2) and it works fine. However, I can't get it to work on my Magento site homepage. I added

/app/code/Learning/Js/view/frontend/layout/cms_index_index.xml

with the same code as the sample catalog_product_view.xml and I can see that the relevant code appears in my homepage source viewed from a browser. However, the JavaScript fails to run.

catalog_product_view.xml / cms_index_index.xml

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" template="Learning_Js::hello.phtml" />
        </referenceContainer>
    </body>
    </page>

You can view the test site homepage at http://magento.onlinekit.co.uk/ and the working Module at http://magento.onlinekit.co.uk/surridge-adult-century-3-4-sleeve-cricket-shirt (it displays a 'Hello World' alert).

Any help would be appreciated.

Improve this question

2 Answers 2

Reset to default
0

Find this script and remove or disabled from homepage: <script type="text/x-magento-init" src="js/hello-world.js"></script>

Improve this answer
2
  • That piece of code was a remnant from an earlier attempt to use custom js; I thought I'd removed it from my theme. The custom module is now working. Thanks Kunj.
    – Ukebloke
    Jun 7, 2018 at 7:51
  • Welcome, it was stopping to main.js to execute other text/x-magento-init and data-mage-init because of no JSON data in that <script type="text/x-magento-init" src="js/hello-world.js"></script>.
    – kunj
    Jun 7, 2018 at 9:00
1

Don't add js directly in XML, you will directly redirect you to the infinite errors !

The best way to add js in Theme is within requirejs

Here is how to add it:

Supposing that your js file is: myfile.js

app/design/{Vendor}/{theme}/requirejs-config.js

var config = {
    map: {
        '*': {
            myscript: 'js/myfile'
        }
    }
};

app/design/{Vendor}/{theme}/web/js/myfile.js

define(['jquery'], function($){
   "use strict";
       return function myscript()
       {
           alert('hello myscript');
           //put all your myfile js code here
       }
});

app/design/{Vendor}/{theme}/Magento_Theme/templates/{yourfile}.phtml

<script type="text/javascript">
    require(['jquery', 'myscript'], function($, myscript) {
        myscript();
    });
</script>

Info: don't forget to :

  • clean the cache

  • clean var/view_preprocessed content

  • clean pub/static content

  • deploy the static content = php bin/magento setup:static-content:deploy -f

Improve this answer
1
  • Please re-read my original question. I stated that I'm using a Magento DevDoc example, which uses RequireJs. All I'm asking is why it doesn't work on the homepage, but works on a product catalog page.
    – Ukebloke
    Jun 7, 2018 at 7:26

Your Answer

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

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