Menambahkan Perpustakaan jQuery ke Magento 2

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?

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>

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!

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.

Alan, pabrik Widget jQuery UI memiliki kasus khusus. Untuk membuat AMD kompatibel, periksa tautan berikut.

http://gregfranko.com/blog/registering-the-jqueryui-widget-factory-as-an-amd-module/