¿Cómo usar la biblioteca jquery en Magento 2?


26

Estoy creando un tema de Magento donde necesito incluir jQuery.

Cuando agrego esto <link src="js/jquery-1.7.1.js"/>en head. Está funcionando pero las funciones de JavaScript de Magento no están funcionando. ¿Cómo utilizar la biblioteca jQuery Magento 2 integrada en un tema personalizado?


jquery ya está agregado a m2. Si necesita jquery en su archivo phtml personalizado, úselo por
require.js

Sí, sé que quiero usar en un tema personalizado. Tengo un archivo que depende de la biblioteca jquery.
Qaisar Satti

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

puede agregar js externos utilizando <script src = "[Vendor_Ext] :: js / custom.js" />
Shaheer Ali

¿Desde cuándo incluyes js por linketiqueta? Tienes que usar la etiqueta de script
Negro

Respuestas:


52

Si está agregando su biblioteca js personalizada que no sea jQuery, entonces debe incluir el código js dentro de una función requerida como:

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

Ejemplos:

Dentro de la función require, puede acceder directamente a la funcionalidad jQuery en su lugar mediante el jQueryalias de forma abreviada o el $signo de dólar . Por ejemplo:

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

Aquí hay un ejemplo con el $alias:

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

¿Es posible incluir prototype.js?
Slimshadddyyy

@Vikram, sí, solo agrega el elemento 'prototipo' a la matriz que pasas para requerir la función ().
Roman Glushko

4

Jquery / JqueryUI han agregado en magento2. Puedes ver en lib / web / jquery

Para utilizar jquery o widget de llamada de magento. Desde tu archivo 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
Lo intenté y no funciona, ¿puedes colocar algo según el tema?
Qaisar Satti
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.