Hinzufügen einer jQuery-Bibliothek zu Magento 2

16

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?

Alan Storm
quelle
magento.stackexchange.com/questions/97184/… vielleicht hilfreich
Qaisar Satti
@QaisarSatti Nein, das ist in diesem Zusammenhang nicht hilfreich? Es zeigt, wie Sie die jquery-Hauptbibliothek und das Magento-Widget verwenden. Es sagt nichts darüber aus, wie man ein Standard-JQuery-Plugin einbindet.
Alan Storm
@AlanStorm Sie möchten Jquery hinzufügen, ohne RequireJs zu verwenden?
Shaheer Ali
@ShaheerAli Nein, ich möchte die mit Magento 2 gelieferte jQuery verwenden und ein Drittanbieter-jquery-Plugin verwenden, das nicht mit Magento 2 geliefert wird
Alan Storm
@AlanStrom Sie müssen Ihren Plugin-JS-Code eines Drittanbieters zwischen die Funktion require js in Ihrer JS-Datei stellen, z. B. require (['jquery'], function ($) {// Ihr Plugin-Code hier});
Shaheer Ali

Antworten:

19

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>
Pratik
quelle
Wie wird die FlexSlider-Javascript-Datei in die HTML-Seite und / oder das RequiredJS eingebunden?
Alan Storm
Sie können mit erfordern hinzufügen. Wenn Sie möchten, beschreibe ich im Detail
Pratik
@ AlanStorm akzeptieren Sie bitte Antwort, wenn Sie klar sind, wenn nicht lassen Sie mich wissen, ich teile weitere Informationen :)
Pratik
5
Obwohl dies funktioniert, wird der Fehler "jQuery ist nicht definiert" nach jeweils einem halben Dutzend Seitenaktualisierungen angezeigt.
themanwhoknowstheman
2
Alan hat das Problem in seinem Blogbeitrag gut
aufgeschlüsselt
6

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!

Lanze
quelle
5

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.

Dilhan Maduranga
quelle