Wie verwende ich die jquery Bibliothek in Magento 2?


26

Ich erstelle ein Magento-Theme, in das ich jQuery einbinden muss.

Als ich fügen Sie diese <link src="js/jquery-1.7.1.js"/>in head. Es funktioniert, aber die Javascript-Funktionen von Magento funktionieren nicht. Wie verwende ich die in jQuery integrierte Magento 2-Bibliothek für ein benutzerdefiniertes Thema?


jQuery ist bereits zu m2 hinzugefügt. Wenn Sie in Ihrer benutzerdefinierten HTML-Datei eine Abfrage benötigen, verwenden Sie diese von require.js
Shaheer Ali,

Ja, ich weiß, dass ich in benutzerdefinierten Thema verwenden möchten .. Ich habe Datei, die abhängig von JQuery-Bibliothek sind.
Qaisar Satti

1
use require (['jquery', 'jquery / ui'], function ($) {}
Shaheer Ali

Sie können externe js hinzufügen, indem Sie <script src = "[Vendor_Ext] :: js / custom.js" />
Shaheer Ali

Seit wann schließt du js per linkTag ein ??? Sie müssen Skript-Tag verwenden
Schwarz

Antworten:


52

Wenn Sie eine andere benutzerdefinierte js-Bibliothek als jQuery hinzufügen, müssen Sie den js-Code in die Funktion require einfügen:

 require(['jquery', 'jquery/ui'], function($){ 
     //your js code here  
 });

Beispiele:

Innerhalb der Funktion require können Sie direkt auf die vorhandene jQuery-Funktionalität zugreifen, indem Sie entweder jQueryden Kurznamen alias, das Dollarzeichen $, verwenden. Beispielsweise:

require(['jquery', 'jquery/ui'], function($){
  jQuery(document).ready( function() {
    alert("Page loaded.");
  });
});

Hier ist ein Beispiel mit dem $Alias:

require(['jquery', 'jquery/ui'], function($){
  $(document).ready( function() {
    alert("Page loaded.");
  });
});

Ist es möglich, prototype.js einzubinden?
Slimshadddyyy

@ Vikram, Yeah, füge einfach das Element 'prototype' zu dem Array hinzu, das du übergeben hast, um die Funktion () zu benötigen.
Roman Glushko

4

Jquery / JqueryUI haben in magento2 hinzugefügt. Sie können in lib / web / jquery sehen

Um jQuery zu verwenden oder Widget von Magento aufzurufen. Aus deiner js Datei

define([
  'jquery',
  'jquery/ui',
  'mage/<widget.name>' found in /lib/web/mage dir
], function($){

$.widget('<your_namespace>.<your_widget_name>', $.mage.<widget.name>, {  CODE HERE... });

return $.<your_namespace>.<your_widget_name>;

});

3
Ich habe das ausprobiert und es funktioniert nicht. Kannst du etwas nach Thema platzieren?
Qaisar Satti
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.