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

16

Как сторонний разработчик может добавить библиотеку 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?

magento2 javascript jquery Алан Сторм
источник
magento.stackexchange.com/questions/97184/... может быть полезно
Кайсар Сатти
@QaisarSatti Нет, это не помогает в этом контексте? Он показывает, как использовать основную библиотеку jquery и использовать виджет Magento. В нем ничего не говорится о том, как использовать стандартный плагин jquery.
Алан Сторм
@AlanStorm вы хотите добавить Jquery без использования RequireJs?
Шахир Али
@ShaheerAli Нет, я хочу использовать jQuery, который поставляется с Magento 2, и использовать сторонний плагин jquery, который не поставляется с Magento 2
Alan Storm
@AlanStrom вам нужно поместить js-код плагина стороннего производителя между функцией require js в вашем js-файле, например require (['jquery'], function ($) {// код вашего плагина здесь});
Шахир Али

Ответы:

19

Создайте 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>
Pratik
источник
Как файл javascript flexslider включается в HTML-страницу и / или требует JS?
Алан Сторм
Вы можете добавить, используя require js.if, если вы хотите, я опишу подробно
Pratik
@AlanStorm, пожалуйста, примите ответ, если вы уверены, если не дайте мне знать, я делюсь дополнительной информацией :)
Pratik
5
Даже при том, что это работает, ошибка «jQuery не определен» все еще появляется каждые полдюжины обновлений страницы.
Themanwhoknowstheman
2
Алан сделал большой разброс
jzahedieh
6

Я цитирую 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!

копье
источник
5

Лучше всего использовать модуль 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. Все настройки должны быть реализованы в пользовательских модулях или темах.

Дилхан Мадуранга
источник