Comment utiliser la bibliothèque jquery dans Magento 2?


26

Je crée un thème Magento où je dois inclure jQuery.

Quand j'ajoute cela <link src="js/jquery-1.7.1.js"/>dans head. Cela fonctionne, mais les fonctions javascript de Magento ne fonctionnent pas. Comment utiliser la bibliothèque jQuery intégrée à Magento 2 sur un thème personnalisé?


jquery est déjà ajouté au m2. Si vous avez besoin de jquery dans votre fichier phtml personnalisé, utilisez-le par require.js
Shaheer Ali

oui je sais que je veux utiliser dans un thème personnalisé .. j'ai un fichier qui dépend de la bibliothèque jquery.
Qaisar Satti

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

vous pouvez ajouter des js supplémentaires en utilisant <script src = "[Vendor_Ext] :: js / custom.js" />
Shaheer Ali

Depuis quand incluez-vous js par linktag ??? Vous devez utiliser la balise de script
Black

Réponses:


52

Si vous ajoutez votre bibliothèque js personnalisée autre que jQuery, vous devez inclure le code js à l'intérieur de la fonction require comme:

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

Exemples:

Dans la fonction require, vous pouvez accéder directement à la fonctionnalité jQuery en utilisant l'un jQueryou l' autre de ses alias abrégés, le $signe dollar . Par exemple:

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

Voici un exemple avec l' $alias:

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

Est-il possible d'inclure prototype.js?
Slimshadddyyy

@Vikram, Ouais, ajoutez simplement l'élément 'prototype' au tableau que vous passez pour exiger la fonction ().
Roman Glushko du

4

Jquery / JqueryUI ont ajouté dans magento2. Vous pouvez voir dans lib / web / jquery

Pour utiliser jquery ou appeler le widget de magento. Depuis votre fichier js

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
j'ai essayé et ça ne marche pas pouvez-vous placer quelque chose selon le thème.
Qaisar Satti
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.