Magento2 add js files via requirejs

Question

Been trying to figure out how to add some custom JS files with requirejs.

I've been successful in adding them via default_head_blocks.xml, however... in doing so... they get loaded before the jquery script that magento2 uses...

so I am wondering how I can use the requirejs to add a few .js files and make sure they are loaded AFTER the jquery library?

I read the documentation here:

http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/js-resources.html

but it's talking about modules and such, I don't have a module, I am just trying to add some jquery scripts on product pages and the home page.

Answer 1

simply use that in you js file all code inside that. this will load the jquery first. after that just add you script via default_head_blocks.xml that worked for and hope worked for you.

require([ 'jquery', 'jquery/ui'], function($){ //your js file code here });

this solution for theme

• M21: That looks really promising, I can see what its doing by the require... but I added that to the page, and have the js loaded in the default_head_blocks.xml - it didn't work.
• Qaisar Satti: require([ 'jquery', 'jquery/ui'], function($){ $(window).load(function() { $("#container1").twentytwenty(); });}); add it like that for unction
• M21: does that snippet have any dependencies? do I still need to have a module made, or use the require js somehow? - I put that snippet in the product details of the item that needs this script... and it still does not work.
• Qaisar Satti: if you load the js that are using the $ or jquery you need to add that in between require([ 'jquery', 'jquery/ui'], function($){ }); add between these {} to make it work
• M21: I tried it like: require([ 'jquery', 'jquery/ui'], function($){ $(window).load(function() { $(".twentytwenty-container").twentytwenty(); });});

Answer 2

From theme you can configuration require like in location app\design\frontend\[Vendor]\[theme]\[Vendor_Module]\web

var config = {
map: {
 '*': {
 //your require js lib here
 "jquery_2": "Magento_Theme/js/jquery/jquery2.min",
 "jcarousel": "Magento_Theme/js/jcarousel/jquery.jcarousel"
 }
},
shim: {
 //dependency third-party lib
 "jcarousel": {
 deps: [
 'jquery_2' //dependency jquery will load first
 ]
 }
},
paths: {
}
};

Do same way for module in location app\code\[Vendor]\[Module]\view\[area]

• M21: thanks for the reply, that's my question though, you say "Module" - I dont have a module?