Hinzufügen einer jQuery-Bibliothek zu Magento 2

Wie kann ein Drittanbieter eine jQuery-Bibliothek zu Magento 2 hinzufügen?

Während Magento 2 eine Version von jQuery in die Frontend-Designs einbezieht, ist das jQuery-Objekt im globalen Namespace nicht sofort verfügbar. Ich glaube, das liegt daran, dass Magento 2 RequireJS verwendet, um jQuery zu laden, und RequireJS eine Moduldatei erst lädt, wenn sie benötigt wird.

Dies ist ein Problem für jQuery-Plugins. Normalerweise würde ich ein Plugin mit HTML einbinden, das ungefähr so ​​aussieht

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

Dies ist jedoch mit Magento 2 nicht möglich. Da die jquery.cookie.jsDatei das jQuery-Plugin mithilfe des globalen jQuery-Objekts definiert, schlägt dies in Magento 2 mit einem jQuery is not definedFehler fehl .

Wie sollte ein Front-End-Entwickler eine Standard-JQuery-Plugin-Bibliothek in die Front-End-Anwendung von Magento 2 einbinden?

Erstellen Sie requirejs-config.js Companyname \ Modulename \ view \ frontend \ requirejs-config.js add

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

Ihre Js-Datei in Ihrem Modul Firmenname \ Modulname \ view \ frontend \ web \ js \ flexslider.js Fügen
Sie einfach jquery lib mit der folgenden Syntax hinzu

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

zweites Beispiel

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

Ich zitiere die Magento Docs .

Geben Sie in den folgenden Konfigurationsdateien ein Shim an, um eine Abhängigkeit vom Plugin eines Drittanbieters zu erstellen:

In Ihrer requirejs-config.js:

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

Fügen Sie dann Ihren Drittanbieter-Plugin-Code in Ihr Theme oder Modul ein: "web / js / 3-rd-party-plugin.js" wie folgt:

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

Diese Lösung ist günstig, da Sie Ihre Plugin-Datei ohne jegliche Modifikation einbinden. Ersetzen Sie einfach die js-Datei, wenn der Plugin-Autor aktualisiert oder sogar eine CDN verwendet!

Verwenden Sie am besten ein Magento 2- Modul oder ein Theme , um solche Plugins / Bibliotheken einzuschließen. Dies ist der empfohlene Weg und die beste Vorgehensweise .

Methode 1> THEMA : Wenn die JavaScript / JQuery- Bibliothek themenbezogen ist (um das Erscheinungsbild des Systems zu ändern).

• Platzieren Sie die Quelldatei der benutzerdefinierten Komponente an einem der folgenden Speicherorte:
  [theme_dir] / web / js /
• Platziere deine requirejs-config.js Datei in
  [theme_dir]

Methode 2> MODUL : Wenn die JavaScript / JQuery- Bibliothek mit einer bestimmten Geschäftsfunktion zusammenhängt oder eine Magento-Funktion verarbeitet. Es sollte sich in einem Modul befinden.

• Platzieren Sie die Quelldatei der benutzerdefinierten Komponente an einem der folgenden Speicherorte:
  [module_dir] / view / frontend / web / js /

• Platzieren Sie Ihre requirejs-config.js- Datei in
  [module_dir] / view / frontend /

Magento 2 empfiehlt dringend, den Quellcode von Standard-Magento-Komponenten und -Widgets nicht zu ändern. Alle Anpassungen müssen in benutzerdefinierten Modulen oder Designs implementiert werden.

Alan, jQuery UI Widget Factory hat einen Sonderfall. Um AMD kompatibel zu machen, überprüfen Sie bitte den folgenden Link.

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