2

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.

0

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

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 '16 at 2:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.