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:


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.

2 Answers 2


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

  • 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.
    – M21
    Feb 4, 2016 at 14:57
  • require([ 'jquery', 'jquery/ui'], function($){ $(window).load(function() { $("#container1").twentytwenty(); });}); add it like that for unction Feb 4, 2016 at 16:56
  • 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.
    – M21
    Feb 4, 2016 at 18:07
  • 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 Feb 4, 2016 at 18:17
  • I tried it like: require([ 'jquery', 'jquery/ui'], function($){ $(window).load(function() { $(".twentytwenty-container").twentytwenty(); });});
    – M21
    Feb 4, 2016 at 18:20

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]

  • thanks for the reply, that's my question though, you say "Module" - I dont have a module?
    – M21
    Feb 4, 2016 at 2:06

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.