Bagaimana cara memuat file modul js kustom di magento 2?

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?

magento2 magento2-dev-beta requirejs

— Praful Rajput
sumber

Jawaban:

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

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.

— Praful Rajput
sumber

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

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...
    );
});

— Mage2.PRO
sumber

mendapat kesalahan yang diperlukan tidak didefinisikan, karena js saya dimuat sebelum requireejs

— pria sederhana 17