16

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?

  • magento.stackexchange.com/questions/97184/… maybe helpful – Qaisar Satti Jan 21 '16 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 '16 at 4:51
  • @AlanStorm you want to add Jquery without using RequireJs? – Shaheer Ali Jan 21 '16 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 '16 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 }); – Shaheer Ali Jan 21 '16 at 5:43
18

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>
  • How does the flexslider javascript file get include into the HTML page and/or requireJS? – Alan Storm Jan 21 '16 at 5:34
  • You can add using require js.if you want i describe in detail – Pratik Jan 21 '16 at 5:39
  • @AlanStorm please accept answer if you are clear if not let me know i share more information :) – Pratik Jan 21 '16 at 5:59
  • 5
    Even though this works, the "jQuery is not defined" error still pops up every half dozen page refreshes. – themanwhoknowstheman Jan 26 '16 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 '16 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.