Menambahkan Perpustakaan jQuery ke Magento 2

16

Bagaimana pengembang pihak ketiga menambahkan perpustakaan jQuery ke Magento 2?

Sementara Magento 2 menyertakan versi jQuery dalam tema frontend mereka, objek jQuery tidak segera tersedia di namespace global. Saya percaya ini karena Magento 2 menggunakan RequireJS untuk menarik jQuery, dan RequireJS tidak akan memuat file modul hingga dibutuhkan.

Ini menyajikan masalah untuk plugin jQuery. Biasanya, saya akan menyertakan plugin dengan HTML yang terlihat seperti ini

<script type="text/javascript" src="http://magento-1-9-2-2.dev/js/commercebug/jquery-ui-1.8.custom/js/jquery.cookie.js"></script>

Ini, bagaimanapun, tidak mungkin dengan Magento 2. Karena jquery.cookie.jsfile mendefinisikan plugin jQuery dengan menggunakan objek global jQuery, itu akan gagal di Magento 2 dengan jQuery is not definedkesalahan.

Bagaimana seharusnya seorang pengembang front-end menyertakan pustaka plugin jquery standar dalam aplikasi ujung depan Magento 2?

magento2 javascript jquery Alan Storm
sumber
magento.stackexchange.com/questions/97184/... mungkin membantu
Qaisar Satti
@QaisarSatti Tidak, itu tidak membantu dalam konteks ini? Ini menunjukkan cara menggunakan perpustakaan jquery utama, dan menggunakan widget Magento. Itu tidak mengatakan apa-apa tentang cara menarik plugin jquery standar.
Alan Storm
@AlanStorm Anda ingin menambahkan Jquery tanpa menggunakan RequireJs?
Shaheer Ali
@ShaheerAli Tidak, saya ingin menggunakan jQuery yang dikirimkan bersama Magento 2, dan menggunakan plugin jquery pihak ketiga yang tidak dikirimkan bersama Magento 2
Alan Storm
@AlanStrom Anda harus meletakkan kode js plugin pihak ketiga Anda di antara fungsi js yang diperlukan dalam file js Anda seperti require (['jquery'], function ($) {// kode plugin Anda di sini});
Shaheer Ali

Jawaban:

19

Buat Requirejs-config.js Companyname \ Modulename \ view \ frontend \ requireejs-config.js tambahkan 

var config = {
   map: {
       '*': {
           bannerslider: 'Companyname_Modulename/js/flexslider',
       }
   }
};

File Js Anda di modul Companyname \ Modulename \ view \ frontend \ web \ js \ flexslider.js
Anda cukup menambahkan jquery lib menggunakan sintaks berikut

<script type="text/javascript">
require(['jquery','bannerslider'],function($){
    $(window).load(function() {
        $('.flexslider-8').flexslider({
            animation: "fade",
            controlNav: "thumbnails",
            slideshowSpeed: 2000,
            minItems: 2,
            maxItems: 4
        });
    });
});
</script>

contoh kedua 

<script type="text/javascript">
    require(['jquery'],function($){
        $(window).load(function() {
            alert('jquery working');
        });
    });
</script>
Pratik
sumber
Bagaimana file javascript flexslider dimasukkan ke dalam halaman HTML dan / atau membutuhkan JS?
Alan Storm
Anda dapat menambahkan menggunakan membutuhkan js.jika Anda ingin saya jelaskan secara mendetail
Pratik
@AlanStorm tolong terima jawaban jika Anda jelas jika tidak beri tahu saya berbagi informasi lebih lanjut :)
Pratik
5
Meskipun ini berfungsi, kesalahan "jQuery tidak didefinisikan" masih muncul setiap setengah lusin halaman diperbarui.
themanwhoknowstheman
2
Alan telah melakukan perincian besar-besaran terhadap masalah ini dalam posting blognya: alanstorm.com/magento_2_and_requirejs
jzahedieh
6

Saya mengutip Magento Docs .

Untuk membangun ketergantungan pada plugin pihak ketiga, tentukan shim di file konfigurasi berikut:

Di requirejs-config.js Anda:

var config = {
  "shim": {
     "3-rd-party-plugin": ["jquery"]
    }
  };

Kemudian masukkan kode plugin pihak ketiga Anda di Tema atau Modul Anda: "web / js / 3-rd-party-plugin.js" seperti:

!(function($){
  // plugin code
  // where $ == jQuery
})(jQuery);

Solusi ini menguntungkan karena Anda memasukkan file plugin Anda tanpa modifikasi apa pun. Cukup ganti file js ketika pembuat plugin memperbarui atau bahkan menggunakan cdn!

Tombak
sumber
5

Hal terbaik untuk dilakukan adalah menggunakan Modul Magento 2 atau Tema untuk menyertakan plugin / pustaka tersebut. Ini adalah cara yang disarankan dan praktik terbaik .

Metode 1> TEMA : Jika pustaka javascript / jquery terkait tema (Untuk mengubah tampilan dan nuansa sistem).

  • Tempatkan file sumber komponen khusus di salah satu lokasi berikut
    [theme_dir] / web / js /
  • Tempatkan file requirejs-config.js Anda di
    [theme_dir]

Metode 2> MODUL : Jika perpustakaan javascript / jquery terkait dengan fungsi bisnis tertentu atau menangani fitur Magento. Itu harus masuk ke dalam modul.

  • Tempatkan file sumber komponen khusus di salah satu lokasi berikut
    [module_dir] / view / frontend / web / js /

  • Tempatkan file Requirejs-Config.js Anda
    [module_dir] / view / frontend /

Magento 2 sangat menyarankan untuk tidak mengubah kode sumber komponen dan widget Magento default. Semua penyesuaian harus diimplementasikan dalam modul atau tema khusus.

Dilhan Maduranga
sumber