0

I am using Magento 2.4.4CE and I have successfully added a jquery based JS file to a CMS page's header by using a cms_page_view_selectable_url_somename.xml file in my custom theme. I have the following line added in the head section to attach the JS file to the page:

<script src="Magento_Cms::js/somefunction.js"></script>

I know the file is being recognized by Magento as I am getting errors. The JS file that I added was working well on my Magento 1.7 cart with the same html elements that I added to M2.4.4. I am assuming there JS security implementations in M2.4 that are making this more difficult.

Any function call from the html elements on the page, such as onchange="ReCal()" results in the following error:

Uncaught ReferenceError: ReCal is not defined

Also on page load I am getting the following error:

Uncaught ReferenceError: ReCal is not defined at HTMLDivElement. (mathcalc.js:16:5) at HTMLDivElement.dispatch (jquery.js:5430:49) at elemData.handle (jquery.js:5234:47)

Here is the basic structure of the js file:

require(['jquery','jquery/ui'], function ($) {

    $(document).ready(function() {
        windowWidth = $( window ).width();
        $("#add-row").click(function () {
            
            //do something and it is working
        });
                            
        if(windowWidth > 767) {
            //do something and call another function
            ReCal();
            
        }
    });
    
    function ReCal() {
        //do some jquery based updates for input values on form
    }
});

I am a novice coder and I am trying to learn the proper way that Magento 2.3 onwards allows js execution. Any help or guidance would be greatly appreciated.

2 Answers 2

0

In your case you should understand about visibility scope of your code. You still can use global variables in code, but you need to properly define it. You can read more in https://www.w3schools.com/js/js_scope.asp

You can use document or window scope for define your custom method

require(['jquery', 'jquery/ui'], function ($) {
    'use strict';
    // ...
    document.ReCal = function() {
        // do some jquery based updates for input values on form
    }
});

Or you can define global variable before function scope and set global variable

let ReCal;
require(['jquery', 'jquery/ui'], function ($) {
    'use strict';
    // ...
    ReCal = function() {
        // do some jquery based updates for input values on form
    }
});
2
  • If I use the first example, and I declare the function as document.ReCal = function() {} how do I call that function from jquery global to that function within the same file?
    – Ryan A
    Commented Sep 4, 2022 at 0:48
  • You can use document.ReCal() to run the function. You can use browser console to play with scopes. Commented Sep 4, 2022 at 10:22
0

I think it's better to use the requireJs for it. Move your custom js file to theme/web/js. Go to your theme directory. app/design/frontend/Vendor/Theme/requirejs-config.js

var config = {
    map: {
        '*': {
            someJS: 'js/somefunction'
        }
    }
}

After that call it on your phtml.

require(['jquery'], function ($) {
    'use strict';
    $(document).ready(function() {
    windowWidth = $( window ).width();
    $("#add-row").click(function () {
        
        //do something and it is working
    });
                        
    if(windowWidth > 767) {
        //do something and call another function
        ReCal();
        
    }

function ReCal() { //do some jquery based updates for input values on form } });
});

You have to call "someJS" where to use it.

3
  • Thank you for your response. I am not using requireJs for this as it is on a singular CMS page. I am adding the js file using a custom xml file as mentioned in the original question. How would requireJs be used on one CMS page without the code loading on all the pages.
    – Ryan A
    Commented Aug 24, 2022 at 12:00
  • You have to add the js file inside <head> tag in XML. default.xml <?xml version="1.0"?> <head> <script src="Magento_Cms::js/somefunction.js"/> </head> <page ...> </page>
    – Aaron Wang
    Commented Aug 24, 2022 at 14:17
  • Can you please clarify how adding a file in default.xml will load the JS file only on the one CMS page? or how the file in app/design/frontend/Vendor/Theme/requirejs-config.js will only load it on the CMS page?
    – Ryan A
    Commented Sep 3, 2022 at 20:26

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.