0

I have created under app/code/vendor/theme/view/frontend/layout/defaul.xml an file called default.xml and i have following content in it:

<?xml version="1.0"?>
<page xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
      <head>
        <!-- Add js using link tag-->
        <script src="js/main.js"/>
   </head>
<referenceContainer name="content">
    <block class="Steiner\Josef\Block\Mage" template="Steiner_Josef::contact_right.phtml"></block>
</referenceContainer>
</page>

It shows me the PHTML file correctly but the js/main.js it cant be found. I put the js file under app/code/vendor/theme/web/js/main.js and I have the following content:

    define(["jquery"], function($) {
    "use strict";

    // Here your custom code...
    console.log("Hola");
  });

after clearing cache, flush, etc. nothing seems to work what I am doing wrong?

1
  • You have to add code in default_head_blocks.xml, Check my updated answer. Mar 3, 2020 at 15:01

2 Answers 2

0

Add below code to in

app/design/frontend/Vendor/Theme/Magento_Theme/layout/default_head_blocks.xml

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

app/design/frontend/Vendor/Theme/web/js/main.js

require(['jquery'], function($){ 
    /* Code... */ 
    console.log("Hola");
})

and run the below commands.

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy -f

Clear the cache and check.

3
  • seems not to work, maybe i have forgot some further steps , do you know any good resource to research? Mar 3, 2020 at 13:30
  • I have updated my answer, Please check Mar 3, 2020 at 14:33
  • i will check it out tomorrow in the morning Mar 3, 2020 at 16:10
0

The best way to add js file is with requirejs

Here is a full example.

Supposing your js file is: myfile.js

  1. app/design/frontend/GWtheme/gw/requirejs-config.js
var config = {
    map: {
        '*': {
            myscript: 'js/myfile'
        }
    }
};
  1. app/design/frontend/GWtheme/gw/web/js/myfile.js
define(['jquery'], function($){
   "use strict";
       return function myscript()
       {
           alert("OKKKK!");
       }
});

Now we have to load our js in phtml, supposing we want to call it in yourfile.phtml

  1. app/design/frontend/GWtheme/gw/Magento_Theme/templates/{yourfile}.phtml
<script type="text/javascript">
    require(['jquery', 'myscript'], function($, myscript) {
        myscript();
    });
</script>

If you want to load that js in all pages, you just have to do this:

  1. app/design/frontend/GWtheme/gw/requirejs-config.js
var config = {
    deps: [
        'js/myfile.js'
    ],
};

Important: 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

4
  • what to do if i have the Mismatched anonymous define() module error? Mar 4, 2020 at 9:05
  • You have encountered this error in my solution ?
    – PЯINCƎ
    Mar 4, 2020 at 9:11
  • yea, i got this error never before Mar 4, 2020 at 9:13
  • Try step 1, 2, 3 without the 4, don't forget the important step
    – PЯINCƎ
    Mar 4, 2020 at 9:18

Your Answer

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

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