Change order of JavaScript files in head

Question 1

I add a custom JavaScript file with the following code:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
 <head>
 <link src="VendorNamespace_Module::someJs.js"/>
 </head>
</page>

My problem is that this js file requires jQuery, but it is loaded before the jQuery JavaScript file (when I look at the head section of my html, jQuery.js comes after someJs.js). How can I change this order so that my file is loaded afterwards?

Question 2

You don't need to change the order. you just have to declare that your script depends on jquery.
Make your someJs.js file look like this

define([
 'jquery'
 //you can add here any other dependencies you have
], function($) {
 ...your file content here
});

[EDIT]
If the js is from an source you cannot modify, like a third party module you can just create your own module that contains a js file with this content

require([
 'jquery',
 'VendorNamespace_Module/someJs'
]);

then include that file in the layout instead of VendorNamespace_Module/someJs.js.
This should load jquery before the vendor js.

But on the side note...if you got a third party module that has a js file that does not start with require or define then it might be something wrong with the module.

Question 3

What if this file comes from some module that is a composer dependency and I can not edit it? Or what would be if it comes from some external resource?

Question 4

you got me here. I don't know yet how to do this. If I find something I will let you know.

Question 5

Thank you. If you take a look at rearrange elements in this docs: devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/… maybe it is possible to get this working with the move? But I don't know if there are containers for that.

Question 6

See my edit. Maybe it helps.

Question 7

Not exactly what I am looking for, but seems to be a safe workaround for me.

Marius 199k55 gold badges431 silver badges837 bronze badges · Accepted Answer · 2016-02-18 12:05:10Z

You don't need to change the order. you just have to declare that your script depends on jquery.
Make your someJs.js file look like this

define([
 'jquery'
 //you can add here any other dependencies you have
], function($) {
 ...your file content here
});

[EDIT]
If the js is from an source you cannot modify, like a third party module you can just create your own module that contains a js file with this content

require([
 'jquery',
 'VendorNamespace_Module/someJs'
]);

then include that file in the layout instead of VendorNamespace_Module/someJs.js.
This should load jquery before the vendor js.

But on the side note...if you got a third party module that has a js file that does not start with require or define then it might be something wrong with the module.

What if this file comes from some module that is a composer dependency and I can not edit it? Or what would be if it comes from some external resource?
you got me here. I don't know yet how to do this. If I find something I will let you know.
Thank you. If you take a look at rearrange elements in this docs: devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/… maybe it is possible to get this working with the move? But I don't know if there are containers for that.
Not exactly what I am looking for, but seems to be a safe workaround for me.

Stack Exchange Network

Change order of JavaScript files in head

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Hot Network Questions

Change order of JavaScript files in head

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Linked

Related

Hot Network Questions