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.

0

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

  • 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 '18 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 '18 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

  • 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 '18 at 7:26

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.