Como usar a biblioteca jquery no Magento 2?


26

Estou criando um tema Magento onde preciso incluir o jQuery.

Quando eu adicione <link src="js/jquery-1.7.1.js"/>no head. Está funcionando, mas as funções javascript do Magento não estão funcionando. Como usar a biblioteca jQuery embutida no Magento 2 em um tema personalizado?


jquery já foi adicionado ao m2. Se você precisa de jQuery em seu arquivo phtml personalizado, em seguida, usá-lo por require.js
Shaheer Ali

Sim, eu sei que eu quero usar no tema personalizado .. Eu tenho um arquivo que depende da biblioteca jquery.
Qaisar Satti 14/01

11
use require (['jquery', 'jquery / ui'], função ($) {}
Shaheer Ali 14/01/16

você pode adicionar js externos usando <script src = "[Vendor_Ext] :: js / custom.js" />
Shaheer Ali

Desde quando você inclui js por linktag ??? Você precisa usar a tag script
Black

Respostas:


52

Se você estiver adicionando sua biblioteca js personalizada que não seja o jQuery, precisará incluir o código js dentro da função require como:

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

Exemplos:

Dentro da função require, você pode acessar diretamente a funcionalidade do jQuery usando um jQueryou outro apelido abreviado, o $sinal de cifrão . Por exemplo:

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

Aqui está um exemplo com o $alias:

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

É possível incluir prototype.js?
Slimshadddyyy

@ Vikram, Sim, basta adicionar o elemento 'prototype' à matriz que você passa para a função require ().
Roman Glushko

4

Jquery / JqueryUI foram adicionados no magento2. Você pode ver em lib / web / jquery

Para usar o jquery ou o widget de chamada do magento. Do seu arquivo 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
Eu tentei isso e não está funcionando, você pode colocar algo de acordo com o tema.
Qaisar Satti 14/01
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.