17

How can a third party developer add a jQuery library to Magento 2?

While Magento 2 includes a version of jQuery in their frontend themes, the jQuery object is not immediately available in the global namespace. I belive this is because Magento 2 uses RequireJS to pull in jQuery, and RequireJS won't load a module file until its needed.

This presents a problem for jQuery plugins. Normally, I'd include a plugin with HTML that looked something like this

<script type="text/javascript" src="http://magento-1-9-2-2.dev/js/commercebug/jquery-ui-1.8.custom/js/jquery.cookie.js"></script>

This, however, is not possible with Magento 2. Because the jquery.cookie.js file defines the jQuery plugin by using the global jQuery object, it will fail in Magento 2 with a jQuery is not defined error.

How should a front end developer include a standard jquery plugin library in Magento 2's front end application?

5
  • magento.stackexchange.com/questions/97184/… maybe helpful Jan 21, 2016 at 4:39
  • @QaisarSatti No, that's not helpful in this context? It shows how to use the main jquery library, and use Magento widget. It doesn't say anything about how to pull in a standard jquery plugin.
    – Alan Storm
    Jan 21, 2016 at 4:51
  • @AlanStorm you want to add Jquery without using RequireJs? Jan 21, 2016 at 5:28
  • @ShaheerAli No, I want to use the jQuery that ships with Magento 2, and use a third party jquery plugin that doesn't ship with Magento 2
    – Alan Storm
    Jan 21, 2016 at 5:35
  • @AlanStrom you need to put your third party plugin js code between the require js function in your js file like require([ 'jquery'], function($){ //your plugin code here }); Jan 21, 2016 at 5:43

4 Answers 4

20

Create requirejs-config.js Companyname\Modulename\view\frontend\requirejs-config.js add

var config = {
   map: {
       '*': {
           bannerslider: 'Companyname_Modulename/js/flexslider',
       }
   }
};

Your Js file in your module Companyname\Modulename\view\frontend\web\js\flexslider.js
You just add jquery lib using following syntax

<script type="text/javascript">
require(['jquery','bannerslider'],function($){
    $(window).load(function() {
        $('.flexslider-8').flexslider({
            animation: "fade",
            controlNav: "thumbnails",
            slideshowSpeed: 2000,
            minItems: 2,
            maxItems: 4
        });
    });
});
</script>

second example

<script type="text/javascript">
    require(['jquery'],function($){
        $(window).load(function() {
            alert('jquery working');
        });
    });
</script>
7
  • How does the flexslider javascript file get include into the HTML page and/or requireJS?
    – Alan Storm
    Jan 21, 2016 at 5:34
  • You can add using require js.if you want i describe in detail
    – Pratik
    Jan 21, 2016 at 5:39
  • @AlanStorm please accept answer if you are clear if not let me know i share more information :)
    – Pratik
    Jan 21, 2016 at 5:59
  • 5
    Even though this works, the "jQuery is not defined" error still pops up every half dozen page refreshes. Jan 26, 2016 at 17:35
  • 2
    Alan has done a great breakdown of the issue in his blog post: alanstorm.com/magento_2_and_requirejs
    – jzahedieh
    Apr 19, 2016 at 11:04
6

I quote the Magento Docs.

To build a dependency on the third-party plugin, specify a shim in the following configuration files:

In your requirejs-config.js:

var config = {
  "shim": {
     "3-rd-party-plugin": ["jquery"]
    }
  };

Then include your third party plugin code in your Theme or Module: "web/js/3-rd-party-plugin.js" like so:

!(function($){
  // plugin code
  // where $ == jQuery
})(jQuery);

This solution is favorable because you are including your plugin file without any kind of modification.Simply replace the js file when the plugin author updates or even use a cdn!

5

Best thing to do is use a Magento 2 Module or a Theme to include such plugins/libraries. It is the recommended way and the best practice.


Method 1 > THEME: If the javascript/jquery library is theme related (In order to change the look and feel of the system).

  • Place the custom component source file in one of the following location
    [theme_dir]/web/js/
  • Place your requirejs-config.js file in
    [theme_dir]

Method 2 > MODULE: If the javascript/jquery library is related to a particular business function or handles a Magento feature. It should go inside a module.

  • Place the custom component source file in one of the following location
    [module_dir]/view/frontend/web/js/

  • Place your requirejs-config.js file in
    [module_dir]/view/frontend/

Magento 2 strongly recommends not changing the source code of default Magento components and widgets. All customizations must be implemented in custom modules or themes.

4

Alan, jQuery UI Widget factory has a special case. To make AMD compatible please check the following link.

http://gregfranko.com/blog/registering-the-jqueryui-widget-factory-as-an-amd-module/

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.