Aggiunta di una libreria jQuery a Magento 2

Come può uno sviluppatore di terze parti aggiungere una libreria jQuery a Magento 2?

Mentre Magento 2 include una versione di jQuery nei loro temi frontend, l'oggetto jQuery non è immediatamente disponibile nello spazio dei nomi globale. Credo che ciò sia dovuto al fatto che Magento 2 utilizza RequireJS per estrarre jQuery e RequireJS non carica un file del modulo fino a quando non è necessario.

Ciò presenta un problema per i plugin jQuery. Normalmente, includerei un plug-in con HTML simile a questo

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

Ciò, tuttavia, non è possibile con Magento 2. Poiché il jquery.cookie.jsfile definisce il plug-in jQuery utilizzando l'oggetto jQuery globale, avrà esito negativo in Magento 2 con un jQuery is not definederrore.

Come dovrebbe uno sviluppatore front-end includere una libreria di plugin jquery standard nell'applicazione front-end di Magento 2?

Creare necessjs-config.js Nome azienda \ Nome modulo \ view \ frontend \ Requjs-config.js aggiungere

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

Il tuo file Js nel tuo modulo Nome azienda \ Nome modulo \ view \ frontend \ web \ js \ flexslider.js
Basta aggiungere jquery lib usando la sintassi seguente

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

secondo esempio

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

Cito il Magento Docs .

Per creare una dipendenza dal plug-in di terze parti, specificare uno shim nei seguenti file di configurazione:

Nel tuo requestjs-config.js:

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

Quindi includere il codice del plug-in di terze parti nel tema o modulo: "web / js / 3-rd-party-plugin.js" in questo modo:

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

Questa soluzione è favorevole perché stai includendo il tuo file plugin senza alcun tipo di modifica. Sostituisci semplicemente il file js quando l'autore del plugin si aggiorna o usi persino un cdn!

La cosa migliore da fare è usare un modulo Magento 2 o un tema per includere tali plugin / librerie. È il modo raccomandato e la migliore pratica .

Metodo 1> TEMA : se la libreria javascript / jquery è correlata al tema (per modificare l'aspetto del sistema).

• Posizionare il file di origine del componente personalizzato in una delle seguenti posizioni
  [theme_dir] / web / js /
• Inserisci il tuo file requestjs-config.js in
  [theme_dir]

Metodo 2> MODULO : se la libreria javascript / jquery è correlata a una particolare funzione aziendale o gestisce una funzione Magento. Dovrebbe andare all'interno di un modulo.

• Posiziona il file sorgente del componente personalizzato in una delle seguenti posizioni
  [module_dir] / view / frontend / web / js /

• Posiziona il tuo file requestjs-config.js in
  [module_dir] / view / frontend /

Magento 2 consiglia vivamente di non modificare il codice sorgente dei componenti e dei widget Magento predefiniti. Tutte le personalizzazioni devono essere implementate in moduli o temi personalizzati.

Alan, la fabbrica di widget dell'interfaccia utente di jQuery ha un caso speciale. Per rendere compatibile AMD, controlla il seguente link.

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