Bagaimana cara menambahkan file JS di frontend untuk semua halaman

38

Saya telah membaca 3 halaman Hasil Google tentang cara memuat file JS untuk semua halaman dan masih tidak dapat melakukannya.

Saya punya beberapa keraguan, semoga seseorang dapat membersihkannya.

Apakah saya perlu membuat modul di dalamnya app/codedengan requirejs-config.js? Atau saya bisa memasukkan requirejs-config.jstema saya ke dalam?
Apa yang harus saya masukkan ke dalam requirejs-config.js?
Seperti apa kode itu di dalam .jsfile saya ? Saya melihat bahwa Anda tidak dapat menggunakan jQuery document.readydan Anda harus memilikidefine([
Apa yang harus saya masukkan ke dalam define([?
Jika saya punya modul jQuery pihak ketiga, apakah saya harus mengeditnya agar berfungsi?
Apakah saya perlu meletakkan xml di suatu tempat untuk memberi tahu magento bahwa file my.js ada?
Jika saya membuat modul di dalamnya app/codedengan semua kode js di sana, apakah itu akan memasukkan semua barang di semua halaman? Bagaimana saya bisa mencapainya?

magento2 javascript requirejs Prashant Akash
sumber

65

Untuk memuat main.jsfile khusus pada semua halaman (dengan cara RequireJS) ini adalah cara yang baik:

1) Buat main.js

Buat main.jsdi dalam folder tema

<theme_dir>/web/js/main.js

dengan konten ini:

define([
  "jquery"
], 
function($) {
  "use strict";

  // Here your custom code...
  console.log('Hola');

});

Singkatnya : kami mendeklarasikan dependensi di awal, mis"jquery" . Kami mendefinisikan sebagai parameter fungsi, nama variabel untuk menggunakan dependensi dalam fungsi, misalnya "jquery" --> $. Kami memasukkan semua kode khusus kami ke dalam function($) { ... }.

2) Nyatakan main.js dengan sebuah requirejs-config.jsfile

Membuat requirejs-config.js file di dalam folder tema:

<theme_dir>/requirejs-config.js

dengan konten ini:

var config = {

  // When load 'requirejs' always load the following files also
  deps: [
    "js/main"
  ]

};

"js/main"adalah jalan menuju kebiasaan kita main.js. Ekstensi ".js" tidak diperlukan.

Kami requirejs-config.js akan digabung dengan yang requirejs-config.jsditentukan di Magento.

PersyaratanJS akan memuat main.js file , pada setiap halaman, menyelesaikan dependensi dan memuat file dengan cara async.

Opsional: Termasuk perpustakaan pihak ketiga

Ini adalah cara untuk memasukkan perpustakaan pihak ketiga.

1) Tambahkan perpustakaan di web/js:

<theme_dir>/web/js/vendor/jquery/slick.min.js

2) Buka requirejs-config.jsdan tambahkan konten ini:

var config = {

  deps: [
    "js/main"
  ],

  // Paths defines associations from library name (used to include the library,
  // for example when using "define") and the library file path.
  paths: {
    'slick': 'js/vendor/jquery/slick.min',
  },

  // Shim: when you're loading your dependencies, requirejs loads them all
  // concurrently. You need to set up a shim to tell requirejs that the library
  // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
  // on jQuery).
  // Exports: if the library is not AMD aware, you need to tell requirejs what 
  // to look for so it knows the script has loaded correctly. You can do this with an 
  // "exports" entry in your shim. The value must be a variable defined within
  // the library.
  shim: {
    'slick': {
      deps: ['jquery'],
      exports: 'jQuery.fn.slick',
    }
  }

};

Terlihat lebih rumit dari apa sebenarnya.

3) Tambahkan ketergantungan dalam main.js:

define([
  'jquery',
  'slick'
], 
function($) {

  // ...

});

Andrea
sumber

Hai, dapatkah Anda memberi tahu jika saya harus memasukkan bootstrap.js di sini. Bagaimana saya bisa menambahkannya agar bootstrap berfungsi dengan baik di tema saya. Terima kasih!

anujeet

1

@anujeet Anda dapat memasukkan bootstrap.jsdengan cara yang sama saya sertakan slick.jsdalam contoh di atas. Untuk nilai shim Anda dapat mencoba menggunakan ini 'bootstrap': { deps: ["jquery"], exports: '$.fn.popover' }:, seperti yang dijelaskan di sini: stackoverflow.com/a/13556882/3763649

Andrea

Lihat saya butuhkan-config.js

var config = {  	deps: [ 		"js/animate", 		"js/incase", 		"js/confetti" 	],     paths: { 		"jquery.bootstrap":"js/bootstrap.min"     },     shim:{       'jquery.bootstrap':{ 		'deps':['jquery']       }     } };   require(["jquery",'jquery.bootstrap', 'jquery/ui', 'jquery/validate', 'mage/validation/validation', 'domReady!']);

Minicart saya berhenti berfungsi dengan ini

anujeet

@ anujeet Lebih baik Anda membuka pertanyaan lain dengan masalah ini, melaporkan Anda memerlukan-config.js dan jika Anda memiliki beberapa kesalahan di konsol javascript. Jika Anda menautkan pertanyaan Anda di sini, saya dengan senang hati akan membantu Anda :)

Andrea

ketika memasukkan lebih banyak js, saya memiliki kesalahan "js / ScrollMagic.min", "js / debug.addIndicators.min"

yavonz15

7

Gandakan file:

app / code / Magento / Theme / view / frontend / layout / default_head_blocks.xml

Untuk

app / code / your_vendor / your_theme /Magento_Theme/layout/default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add local resources -->
        <css src="css/my-styles.css"/>

        <!-- The following two ways to add local JavaScript files are equal -->
        <script src="Magento_Catalog::js/sample1.js"/>
        <link src="js/sample.js"/>

        <!-- Add external resources -->
        <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
        <link src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" /> 
    </head>
</page>

Untuk informasi lebih lanjut:

http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/layouts/xml-manage.html

Semoga berhasil!

BTW membaca resmi devdocs frontend dari magento untuk mendapatkan dasar :)

Goldy
sumber

Karena skrip Bootstrap membutuhkan JQuery untuk diinisialisasi, termasuk di dalamnya tidak akan berfungsi. Baca dokumen resmi ini . untuk info lebih lanjut. :)

VS

6

Anda dapat menambahkan file JS menggunakan xml seperti di bawah ini. Ini akan menambahkan js di semua halaman.

Dengan modul khusus:

Buat default.xmlfile di modul Anda.

app/code/vendor_name/module_name/view/frontend/layout/default.xml

<?xml version="1.0"?>
<page xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    <head>
        <!-- Add js using link tag-->
        <link src="js/script.js"/>

        <!-- Add js-->
        <script src="Vendor_Module::js/script.js"/>

        <!-- Add external js -->
        <script src="https://apis.google.com/js/platform.js" src_type="url" />
   </head>
</page>

SCC
sumber

2

Metode menambahkan js menggunakan default_head_blocks.xmlfile tidak akan berfungsi untuk plugin JQuery pihak ke-3. Jadi, jika Anda ingin menambahkan plugin JQuery khusus dan menggunakannya, Anda harus menggunakannyarequirejs-config.js file.

Untuk menjawab pertanyaan Anda satu per satu:

1) & 2) Anda tidak perlu membuat modul untuk menambahkan requirejs-config.jsfile. Anda bisa menambahkannya di lokasi ini:

app/design/frontend/<Vendor>/<theme>/requirejs-config.js

Lihat jawaban ini untuk membuat requirejs-config.jsfile yang tepat .

3) Anda harus membuat daftar dependensi file js Anda sebelum menulis skrip.

require([
  'jquery',
  'jquery/ui'
], function($){
   // ... Your code here
});

Kode di atas mengatakan bahwa Anda akan memerlukan jquery dan jquery ui untuk skrip Anda.

4) Anda tidak perlu menggunakan define([kecuali Anda membuat plugin javascript.

5) Tidak, Anda tidak perlu mengeditnya tetapi Anda harus menentukan ketergantungannya menggunakan requirejs-config.jsfile. Jika Anda memiliki owl.carousel.min.jsdi <vendor>/<theme>/web/js/owl.carousel.min.js, Anda requirejs-config.jsfile yang akan terlihat seperti ini:

var config = {
    map: {
        '*': {
            owlCarouselTheme: 'js/owl.carousel.min'
        }
    },
    shim: {
        owlCarouselTheme: ['jquery']
    }
};

Dalam kode di atas, harap diingat bahwa tidak ada .jsfile. Dan sekarang menggunakannya di js Anda

require(['jquery', 'owlCarouselTheme'],function($){
    $(document).ready(function() {
        $(".footer.links").addClass("owl-carousel").owlCarousel({items: 1});
    });
})

Jika semuanya berfungsi dengan baik, Anda harus memiliki tautan footer di slider.

6) & 7) Cukup gunakan metode yang disarankan oleh @Goldy untuk menambahkan js Anda. Ini akan menambahkan file js Anda ke semua halaman.

Untuk bacaan lebih lanjut, Anda dapat melihat posting ini

Semoga ini membantu.

VS
sumber

1

Ini adalah bagaimana saya menambahkan perpustakaan dotdotdot di tema khusus magento2 saya.

1. Unduh dan tambahkan Js Library di tema Anda mengikuti jalur:

// app/design/frontend/Namespace/themename/web/js/jquery.dotdotdot.min.js

2. Buat file requirejs tema sebagai follow dan biarkan requirejs tahu pustaka yang baru ditambahkan.

// app/design/frontend/Namespace/themename/requirejs-config.js
var config = {
   map: {
       '*': {
           dotdotdot: 'js/jquery.dotdotdot.min',
       }
   }
};

3. Gunakan perpustakaan yang ditambahkan di file js utama tema Anda sebagai berikut:

// app/design/frontend/Namespace/themename/web/js/main.js
require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
    $(window).load(function() {
        //custom js code
        /* $(".product-item-name").each(function(){
            $(this).dotdotdot(); 
        }); */
    });
});

4. dan sertakan file js tema Anda di kepala situs Anda sebagai berikut:

// app/design/frontend/Namespace/themename/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/main.js"/> 
    </head>
</page>

Anda dapat menambahkan perpustakaan JS eksternal dan file khusus pada setiap halaman di magento2.

saiid
sumber

Saya telah mencoba ini adalah sisi admin, js akan datang dengan benar tetapi hasil yang diharapkan tidak akan datang

Naveenbos

Jawaban bagus. Akan mencobanya. Apakah ada cara untuk menentukan halaman tertentu di mana file js diperlukan.?

Mohammed Joraid

Untuk halaman tertentu, pindahkan konten "default_head_blocks.xml" dalam contoh di atas ke file tata letak spesifik Anda. Misalnya dalam hal halaman detail produk, tambahkan xml itu di app / design / frontend / Namespace / themename / Magento_Catalog / layout / catalog_product_view.xml

saiid

Bagaimana cara menambahkan file JS di frontend untuk semua halaman

Jawaban:

Opsional: Termasuk perpustakaan pihak ketiga