Bagaimana cara menggunakan perpustakaan jquery di Magento 2?


26

Saya membuat tema Magento di mana saya harus memasukkan jQuery.

Ketika saya menambahkan ini <link src="js/jquery-1.7.1.js"/>di head. Ini berfungsi tetapi fungsi javascript Magento tidak berfungsi. Bagaimana cara menggunakan Magento 2 yang dibangun di perpustakaan jQuery pada tema khusus?


jquery sudah ditambahkan ke m2. Jika Anda memerlukan jquery dalam file phtml khusus Anda, lalu gunakan dengan memerlukan.js
— Shaheer Ali

ya saya tahu bahwa saya ingin menggunakan tema khusus .. saya punya file yang bergantung pada pustaka jquery.
— Qaisar Satti

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

Anda dapat menambahkan jnal ekstra dengan menggunakan <script src = "[Vendor_Ext] :: js / custom.js" />
— Shaheer Ali

Sejak kapan Anda memasukkan js dengan linktag ??? Anda harus menggunakan tag skrip
— Black

Jawaban:


52

Jika Anda menambahkan pustaka js kustom Anda selain jQuery maka Anda harus memasukkan kode js di dalamnya yang memerlukan fungsi seperti:

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

Contoh:

Di dalam fungsi yang diperlukan, Anda dapat langsung mengakses fungsionalitas jQuery di tempat dengan menggunakan salah satu jQueryatau bentuk singkatnya, $tanda dolar . Sebagai contoh:

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

Berikut ini adalah contoh dengan $alias:

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

Apakah mungkin untuk memasukkan prototype.js?
— Slimshadddyyy

@ Vikram, Ya, tambahkan saja elemen 'prototipe' ke array yang Anda lewati untuk membutuhkan fungsi ().
— Roman Glushko

4

Jquery / JqueryUI telah menambahkan di magento2. Anda dapat melihat di lib / web / jquery

Untuk menggunakan jquery atau widget panggilan Magento. Dari file js Anda

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
Saya sudah mencobanya dan ternyata tidak berfungsi bisakah Anda menempatkan sesuatu sesuai tema.
— Qaisar Satti
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.