Bagaimana cara memuat file modul js kustom di magento 2?


9

Saya telah membuat modul slider banner untuk magento 2. Saya telah memanggil file JS menggunakan cara berikut dan berfungsi dengan baik. Di kelas blok saya membuat fungsi berikut

public function getBaseJs($fileName){

        return $this->_storeManager->getStore()->getBaseUrl(
                \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
            ).'bannerslider/js/'.$fileName;
    }

dan fungsi ini disebut dalam bannerslider.phtmlfile dengan cara sebagai berikut.

<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery-1.7.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery.flexslider.js') ?>"></script>

Tapi, menurut mekanisme ketergantungan jQuery dari require.jsBagaimana saya bisa melakukannya?

Jawaban:


29

Akhirnya, saya mendapatkan solusi untuk permintaan saya. Saya ingin membagikannya secara terperinci seperti di bawah ini.

masukkan deskripsi gambar di sini

Langkah 1: Tambahkan file js modul Anda di bawah<Vendor>/<Module_Name>/view/<area>/web/js/

misalnya <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

Langkah 2: Buat requirejs-config.jsfile di bawah<Vendor>/<Module_Name>/view/<area>/

misalnya <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js

Tambahkan kode berikut ke requirejs-config.js

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

Catatan: Anda dapat menetapkan nama objek sesuai pilihan Anda. Dalam kasus saya, saya telah menetapkan sebagai bannersliderdan tidak menambahkan ekstensi .js ke nama file diVendorName_ModuleName/js/flexslider

Langkah 3: Panggil file functionjs Anda dalam .phtmlfile sebagai cara 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>

Ini bekerja dengan baik untuk saya.

Jejak: Gunakan Nettab untuk melihat URL yang diminta dari file js dimuat atau tidak.

masukkan deskripsi gambar di sini


4
lebih baik menggunakan 'domReady!' plugin daripada $ (window) .load (), misalnya memerlukan (['jquery', 'bannerslider', 'domReady!], function ($) {... kode dieksekusi hanya setelah dom load})
KAndy

Ya, itu akan sangat berguna.
Praful Rajput

@KAndy itu tergantung, jika Anda ingin skrip dieksekusi terakhir, bukankah lebih baik menggunakan $ (jendela)? bukankah itu membuat skrip dijalankan tidak hanya ketika DOM dibaca, tetapi ketika semua skrip dieksekusi?
Lachezar Raychev

Dan cara itu tidak berfungsi untuk saya ... kata static / adminhtml / Magento / backend / en_US / gift.js 404 (Tidak Ditemukan) Saya telah membersihkan cache dan pub / static ... bot nggak .. tidak berfungsi
Lachezar Raychev

awal itu, itu berfungsi ... domReady! tidak berfungsi ... bagaimana saya bisa memberitahu skrip untuk dijalankan setelah semua skrip lain dimuat, atau yang tidak ada dalam metodologi magent2 saat ini?
Lachezar Raychev

4

Cara saya adalah:

Langkah 1

Sertakan file javascript basis ekstensi menggunakan instruksi tata letak.

Langkah 2

Memerlukan file javascript ekstensi lainnya dari file dasar dengan RequireJS:

require(
    [
      'jquery', 
      '{VendorName}_{ModuleName}{path_to_js_file/relative_to/view/web/no_js_at_end}'
     // ex. Magento/Ui/view/base/web/js/grid/sticky/sticky.js
     // became Magento_Ui/js/grid/sticky/stick
    ], 
    function($, someOtherLibrary) {
        // custom code here...
    );
});

1
mendapat kesalahan yang diperlukan tidak didefinisikan, karena js saya dimuat sebelum requireejs
pria sederhana 17
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.