Gunakan memerlukan-config.js untuk memuat file yang diperlukan di semua halaman

9

Saya tahu cara menggunakan require-config.jsdalam tema khusus, tetapi saya ingin menggunakan file javascript khusus ( myfile.js) di semua halaman. Di direktori mana saya harus menambahkan require-config.jsdan bagaimana menggunakannya, sehingga akan berfungsi sebagaimana mestinya?

Tolong, jangan merujuk ke halaman Resmi Magento.

Anitr
sumber
Anda dapat langsung memanggil js di dalam tata letak tag kepala xml dan Anda mendapat js di setiap halaman.
Rakesh Jesadiya
Terima kasih atas jawaban Anda. Tetapi jika saya ingin menggunakan memerlukan-config dan memuat file dengan itu, tidak seperti di Magento 1?
Anitr
Ini juga mendukung di Magento 2 Anda dapat memeriksa file tata letak folder-modul / default_head_block.xml
Rakesh Jesadiya
Ya saya tahu. Tapi, saya ingin menggunakan memerlukan-config.js dengan cara yang benar.
Anitr

Jawaban:

17

requirejs-config.jsgunakan untuk membuat pemetaan sumber daya JavaScript . Kita dapat menemukan semua memerlukan konfigurasi di bawah: pub/static/_requirejs.

Sejauh yang saya tahu, cara yang benar untuk memuat skrip khusus kami melalui Persyaratan Js: menggunakan template untuk memanggil skrip kami . Kami akan membuat template baru dengan Magento\Framework\View\Element\Templatekelas bloknya.

Jika kami ingin memuat file js di semua halaman dan tidak ingin membuat modul baru, blok kami harus merujuk ke before.body.endatauafter.body.start container di default.xml- modul Tema Magento.

masukkan deskripsi gambar di sini

app / design / frontend / Vendor / Theme / Magento_Theme / layout / default.xml

<?xml version="1.0"?>

<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">

    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Template" name="custom.js" template="Magento_Theme::custom_js.phtml"/>
    </referenceContainer>

</page>

aplikasi / desain / antarmuka / Vendor / Tema / requireejs-config.js

var config = {
    map: {
        '*': {
            customScript:'Magento_Theme/js/customscript'
        }
    }
};

aplikasi / desain / antarmuka / Vendor / Tema / Magento_Theme / web / js / customscript.js

define('jquery', function($) {

    //Your code here
    //alert('Here');

    }(jQuery)
);

Template kami akan memanggil skrip kami: app / design / frontend / Vendor / Theme / Magento_Theme / templates / custom_js.phtml

<script>// <![CDATA[
    require([
        'jquery',
        'customScript'
    ], function ($, script) {
        //Your code here
        //alert('Here');
    });
    // ]]>
</script>

Hapus Magento Cache dan jalankan penyebaran konten statis: php bin/magento setup:static-content:deploy

Khoa TruongDinh
sumber
Saya memanggil skrip saya \app\design\frontend\Enim\blank\Magento_CatalogWidget\templates\product\widget\content\grid.phtml, tetapi saya memiliki requireejs-config.js dan skrip di folder Theme (app / design / frontend / Vendor / Theme / requireejs-config.js). Apakah ini ok? Masalahnya adalah saya memanggil skrip saya dari berbagai tempat.
Anitr
Script Anda hanya memengaruhi ketika templat templa‌​tes\product\widget\c‌​ontent\grid.phtmldipanggil.
Khoa TruongDinh
Ya, tidak apa-apa - masalahnya ada pada yang itu: magento.stackexchange.com/questions/149019/… , saya ingin tahu apakah masalah ini terhubung dengan panggilan panggil yang diperlukan.
Anitr
@KhoaTruongDinh Saya sedikit bingung dengan ini. Saya belum diuji dengan benar, tetapi apakah saya benar dalam berpikir bahwa fungsi dalam custom_js.phtmldiperlakukan sebagai panggilan balik biasa, dilakukan setelah eksekusi kode yang terkandung di dalamnya customscript.js? Atau apakah saya perlu menjalankan kode yang dinyatakan customscript.jsdari dalam fungsi di custom_js.phtml?
Joshua Flood
1
@KhoaTruongDinh Saya juga bertanya-tanya mengapa jawaban Iveta menyatakan bahwa Anda after.body.startharus diubah before.body.end?
Joshua Flood
5

File Requirejs-config: app / code / Vendor / Module / view / frontend / requireejs-config.js

var config = {
    paths: {            
         'myfile': "Vendor_Modulename/js/myfile"
      },   
    shim: {
    'myfile': {
        deps: ['jquery']
    }
  }
} 

File js Anda harus di: app / code / Vendor / Module / view / frontend / web / js / myfile.js

Sekarang Anda dapat menggunakan di mana saja dalam file template Anda dengan metode di bawah ini:

<srcipt>
 require(["jquery","myfile"],function($,myfile){
     $(document).ready(function(){
        //call your js here...
     })
 })
</script>
Rakesh Jesadiya
sumber
Ya itu benar. Tapi saya bertanya apakah ada yang tahu bagaimana menggunakannya di folder Tema, tidak tergantung pada Modul - itu harus dimuat di halaman, tidak hanya pada satu modul.
Anitr
Anda dapat menggunakannya dalam folder tema juga, cukup panggil script di atas dan Anda dapat menggunakan js Anda
Rakesh Jesadiya
tolong beri tahu saya jika Anda memiliki masalah
Rakesh Jesadiya
Berhasil, terima kasih. Tapi tetap saja, saya mengalami masalah pada beberapa hal lain: magento.stackexchange.com/questions/149019/…
Anitr
Hai, Tolong beri tahu saya ke mana harus meletakkan file langkah1?
Priya
2

Ada versi yang lebih mudah digunakan deps. Ketergantungan pada requirejs-config.js akan memuat file Anda saat memuat requirejs sendiri (di mana-mana di toko). Berikut ini adalah contoh bagaimana seharusnya requirejs-config.js Anda :

var config = {
    // When load 'requirejs' always load the following files also
    deps: [
        'common-js'
    ],

    // Library file path.
    paths: {
        'common-js': 'js/Your-File-Name'
    },

    // The rest of your config file ...
Andrei
sumber
1

Sebagai pendekatan alternatif untuk rekomendasi Khoa, yang merupakan praktik dev Magento yang sangat baik, Anda dapat menempelkan JavaScript di file .phtml seperti ini:

<srcipt>
require(["jquery"],function($){
 $(document).ready(function(){
    your script here...
 })
});
</script>

Kemudian tautkan file phtml Anda dari default.xml seperti yang dijelaskan dalam jawaban Khoa, meskipun saya akan merekomendasikan untuk menambahkannya ke before.body.end. Dan, panggil skrip JS Anda dari dalam copyright.phtml , seperti ini:

<script>
jQuery(document).ready(function($) {
..call your script here ..
});
</script>

copyright.phtml dimuat di setiap halaman, bahkan di halaman seperti checkout, tempat footer dihilangkan.

Iveta Allogenes
sumber