0

You can use jquery in phtml like this:

require([
    'jquery'
],function($) {
     $(document).ready(function() {
        /* Your logic */
     });  
 });

But how does the require know where to find jquery. I searched the whole codebase, but the path to the jquery file is nowhere defined in no requirejs-config.js file, so how does it know where the file is located?

4 Answers 4

2

There is no need for defined jquery paths or mappings in require-js configs. Because jquery is located directly in lib/web/jquery.js.
As such it will be present in the pub/static files directly within the locale directory. pub/static/Magento/luma/en_US/jquery.js.

As such the path jquery within the require of js components or phtml is just resolved on the same way like every other path e.g. to Magento_Catalog/js/gallery or something else.

0

Combination of composer and framework

Not been modified in a while but here for example is where the path was changed

https://github.com/magento/magento2/commit/98214d73ce4ab6d873786759c804b9994be82f29

1
  • I looked at the github site, but I still can't figure out, where jquery is defined so that it can be used anywhere in requirejs
    – Black
    Commented Mar 31, 2021 at 7:27
0

Magento framework already defined jquery at some place inside Magento Installation.
Please go though this tutorial to know more -
https://devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/js_init.html
Please let me know if you still have doubts.
For example - Here Jquery is defined and path is given.

define ([
    'jquery',
    'mage/gallery/gallery'
], function ($, Gallery) {

    $(function () { // to ensure that code evaluates on page load
        $('[data-role=example]')  // we expect that page contains markup <tag data-role="example">..</tag>
            .each(function (index, element) {
                Gallery({
                    options:  {},
                    data: [{
                        img: 'https://c2.staticflickr.com/8/7077/27935031965_facd03b4cb_b_d.jpg'
                    }],
                    fullscreen: {}
                }, element);  // 'element' is single DOM node.
            });
    });
});
1
  • "Magento framework already defined jquery at some place inside Magento Installation" Thats my question. How does require know where jquery is located?
    – Black
    Commented Mar 31, 2021 at 7:21
0

I figured it out. If you don't specify a script in requirejs and still try to load it, then magento searches for a script by that name in

pub/static/versionXXXXXXXXXX/frontend/**themeNamespace**/**ThemeName**/**language_code**/

So if you try to use this script:

require([
    'foobar'
],function($) {
     $(document).ready(function() {
        /* Your logic */
     });  
 });

but you never defined foobar in requirejs-config.js, then magento tries to load it from here (example)

pub/static/version1617131196/frontend/company/fresh/de_DE/foobar.js

If you look at the files in this folder, then you notice that the jquery.js file is located here.

1
  • Apologies. I also thought you were also asking how does it get there from lib Commented Mar 31, 2021 at 8:47

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.