Добавление библиотеки jQuery в Magento 2

Как сторонний разработчик может добавить библиотеку jQuery в Magento 2?

Хотя Magento 2 включает версию jQuery в свои темы веб- интерфейса, объект jQuery не сразу доступен в глобальном пространстве имен. Я верю, что это связано с тем, что Magento 2 использует RequireJS для загрузки jQuery, а RequireJS не будет загружать файл модуля, пока он не понадобится.

Это представляет проблему для плагинов jQuery. Обычно я бы включил плагин с HTML, который выглядел примерно так

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

Это, однако, невозможно в Magento 2. Поскольку jquery.cookie.jsфайл определяет плагин jQuery с помощью глобального объекта jQuery, в Magento 2 произойдет сбой с jQuery is not definedошибкой.

Как разработчик внешнего интерфейса должен включать стандартную библиотеку плагинов jquery в приложение внешнего интерфейса Magento 2?

Создайте requirejs-config.js Название компании \ Modulename \ view \ frontend \ requirejs-config.js add

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

Ваш Js-файл в вашем модуле Companyname \ Modulename \ view \ frontend \ web \ js \ flexslider.js
Вы просто добавляете jquery lib, используя следующий синтаксис

<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>

второй пример

<script type="text/javascript">
    require(['jquery'],function($){
        $(window).load(function() {
            alert('jquery working');
        });
    });
</script>

Я цитирую Magento Docs .

Чтобы построить зависимость от стороннего плагина, укажите прокладку в следующих файлах конфигурации:

В вашем requirejs-config.js:

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

Затем включите код вашего стороннего плагина в свою тему или модуль: «web / js / 3-rd-party-plugin.js», например, так:

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

Это решение выгодно, потому что вы включаете ваш файл плагина без каких-либо изменений. Просто замените файл js при обновлении автора плагина или даже используйте cdn!

Лучше всего использовать модуль Magento 2 или тему для включения таких плагинов / библиотек. Это рекомендуемый способ и лучшая практика .

Метод 1> ТЕМА : Если библиотека javascript / jquery связана с темой (для изменения внешнего вида системы).

• Поместите исходный файл пользовательского компонента в одну из следующих
  папок [theme_dir] / web / js /
• Поместите файл requirejs-config.js в
  [theme_dir]

Метод 2> МОДУЛЬ : Если библиотека javascript / jquery связана с определенной бизнес-функцией или обрабатывает функцию Magento. Это должно идти внутри модуля.

• Поместите исходный файл пользовательского компонента в одно из следующих мест:
  [module_dir] / view / frontend / web / js /

• Поместите файл requirejs-config.js в
  [module_dir] / view / frontend /

Magento 2 настоятельно рекомендует не изменять исходный код стандартных компонентов и виджетов Magento. Все настройки должны быть реализованы в пользовательских модулях или темах.

Алан, JQuery UI Фабрика виджетов имеет особый случай. Чтобы сделать AMD совместимым, пожалуйста, проверьте следующую ссылку.

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