Додавання бібліотеки 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?

Створіть addjs-config.js ім’я компанії \ ім'я модуля \ view \ frontend \ Requjs-config.js додати

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

Ваш Js-файл у вашому модулі Назва компанії \ Ім'я модуля \ 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 .

Щоб побудувати залежність від стороннього плагіна, вкажіть пробіл у таких файлах конфігурації:

У вашому Requjs-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 пов'язана з темою (для того, щоб змінити зовнішній вигляд системи).

• Помістіть вихідний файл спеціального компонента в одному з наступних місць
  [topic_dir] / web / js /
• Розмістіть файл Requjs-config.js у
  [topic_dir]

Спосіб 2> МОДУЛЬ : Якщо бібліотека javascript / jquery пов'язана з певною функцією бізнесу або обробляє функцію Magento. Він повинен зайти всередину модуля.

• Розмістіть вихідний файл спеціального компонента в одному з наступних місць
  [module_dir] / view / frontend / web / js /

• Розмістіть файл Requjs-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/