Dodanie biblioteki jQuery do Magento 2

W jaki sposób zewnętrzny programista może dodać bibliotekę jQuery do Magento 2?

Podczas gdy Magento 2 zawiera wersję jQuery w swoich motywach frontendowych, obiekt jQuery nie jest natychmiast dostępny w globalnej przestrzeni nazw. Wierzę, że dzieje się tak, ponieważ Magento 2 używa RequireJS do pobrania jQuery, a RequireJS nie załaduje pliku modułu, dopóki nie będzie potrzebny.

Stanowi to problem dla wtyczek jQuery. Zwykle dołączam wtyczkę z HTML, która wygląda mniej więcej tak

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

Nie jest to jednak możliwe w przypadku Magento 2. Ponieważ jquery.cookie.jsplik definiuje wtyczkę jQuery za pomocą globalnego obiektu jQuery, zakończy się niepowodzeniem w Magento 2 z jQuery is not definedbłędem.

W jaki sposób programista powinien dołączyć standardową bibliotekę wtyczek jquery do aplikacji frontonu Magento 2?

Utwórz addjj-config.js Nazwa firmy \ Modulename \ view \ frontend \ requjs-config.js dodaj

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

Twój plik Js w module Nazwa firmy \ Nazwa modułu \ widok \ frontend \ web \ js \ flexslider.js
Po prostu dodajesz bibliotekę jquery przy użyciu następującej składni

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

drugi przykład

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

Cytuję Dokumenty Magento .

Aby zbudować zależność od wtyczki innej firmy, określ podkładkę w następujących plikach konfiguracyjnych:

W pliku Requjs-config.js:

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

Następnie dołącz swój kod wtyczki innej firmy do motywu lub modułu: „web / js / 3-rd-party-plugin.js” w następujący sposób:

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

To rozwiązanie jest korzystne, ponieważ dołączasz plik wtyczki bez żadnych modyfikacji. Po prostu zamień plik js, gdy autor wtyczki zaktualizuje lub nawet użyj cdn!

Najlepiej jest użyć Magento 2 modułu lub motywu, aby dołączyć takie wtyczki / biblioteki. Jest to zalecany sposób i najlepsza praktyka .

Metoda 1> TEMAT : Jeśli biblioteka javascript / jquery jest powiązana z tematem (w celu zmiany wyglądu i działania systemu).

• Umieść niestandardowy plik źródłowy komponentu w jednej z następujących lokalizacji
  [katalog_dysku] / web / js /
• Umieść swój plik wymagań.js-config.js plik w
  [katalog_dysku]

Metoda 2> MODUŁ : Jeśli biblioteka javascript / jquery jest powiązana z określoną funkcją biznesową lub obsługuje funkcję Magento. Powinien wejść do modułu.

• Umieść niestandardowy plik źródłowy komponentu w jednej z następujących lokalizacji
  [katalog_modułu] / view / frontend / web / js /

• Umieść plik Requjs-config.js w
  [katalog_modułu] / view / frontend /

Magento 2 zdecydowanie nie zaleca zmiany kodu źródłowego domyślnych komponentów i widżetów Magento. Wszystkie dostosowania muszą być zaimplementowane w niestandardowych modułach lub motywach.

Alan, fabryka widgetów jQuery ma specjalny przypadek. Aby zapewnić zgodność z AMD, sprawdź poniższy link.

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