Skip to main content
added 298 characters in body
Source Link
Rafael Corrêa Gomes
  • 13.7k
  • 14
  • 91
  • 181

You just need to add these files:

ModuleVendor/ModuleName/view/frontend/layout/default.xml

or

ModuleVendor/ModuleName/view/frontend/layout/<frontName>_<controllerName>_<actionName>.xml

File content:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="ModuleVendor_ModuleName/js/my_js.js"/>
    </head>
</page>

JS file:

ModuleVendor/ModuleName/view/frontend/web/js/my_js.js

JS Content:

require([
    "jquery"
], function($){
//<![CDATA[
    $(document).ready(function() {
        console.log('jquery loaded with success!');
    });
//]]>
});

To add some controller or block you can add the JS content above using a PHTML:

<referenceContainer name="before.body.end">
    <block class="\Magento\Framework\View\Element\Template" template="Namespace_Modulename::my_js.phtml" name="my_js"/>
</referenceContainer>

You just need to add these files:

ModuleVendor/ModuleName/view/frontend/layout/default.xml

or

ModuleVendor/ModuleName/view/frontend/layout/<frontName>_<controllerName>_<actionName>.xml

File content:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="ModuleVendor_ModuleName/js/my_js.js"/>
    </head>
</page>

JS file:

ModuleVendor/ModuleName/view/frontend/web/js/my_js.js

JS Content:

require([
    "jquery"
], function($){
//<![CDATA[
    $(document).ready(function() {
        console.log('jquery loaded with success!');
    });
//]]>
});

You just need to add these files:

ModuleVendor/ModuleName/view/frontend/layout/default.xml

or

ModuleVendor/ModuleName/view/frontend/layout/<frontName>_<controllerName>_<actionName>.xml

File content:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="ModuleVendor_ModuleName/js/my_js.js"/>
    </head>
</page>

JS file:

ModuleVendor/ModuleName/view/frontend/web/js/my_js.js

JS Content:

require([
    "jquery"
], function($){
//<![CDATA[
    $(document).ready(function() {
        console.log('jquery loaded with success!');
    });
//]]>
});

To add some controller or block you can add the JS content above using a PHTML:

<referenceContainer name="before.body.end">
    <block class="\Magento\Framework\View\Element\Template" template="Namespace_Modulename::my_js.phtml" name="my_js"/>
</referenceContainer>
Source Link
Rafael Corrêa Gomes
  • 13.7k
  • 14
  • 91
  • 181

You just need to add these files:

ModuleVendor/ModuleName/view/frontend/layout/default.xml

or

ModuleVendor/ModuleName/view/frontend/layout/<frontName>_<controllerName>_<actionName>.xml

File content:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="ModuleVendor_ModuleName/js/my_js.js"/>
    </head>
</page>

JS file:

ModuleVendor/ModuleName/view/frontend/web/js/my_js.js

JS Content:

require([
    "jquery"
], function($){
//<![CDATA[
    $(document).ready(function() {
        console.log('jquery loaded with success!');
    });
//]]>
});