Bagaimana cara menambahkan Block Specific JS (and CSS) - Cara _right_?

9

Jadi saya benar-benar menghabiskan berjam-jam di googling, membaca, belajar dll, tetapi tidak seorang pun (bahkan Alan Storm!) Telah mengatakan ini kepada saya. Tampaknya seluruh internet tertarik untuk menambahkan JS atau CSS ke halaman tertentu Magento 2, tetapi yang saya cari adalah menambahkan JS / CSS ke blok tertentu .

Jadi, inilah pertanyaan saya singkatnya:

Apa cara terbaik untuk menambahkan JS (dan juga CSS) ke blok tertentu , sehingga jika blok ada di halaman (*) JS / CSS dimuat, jika blok tidak ada, tidak ada CSS / JS? ?

* Ini berarti di mana saja suatu blok dapat diatur, pada halaman / template melalui layout.xml, pada halaman kustom dari modul saya, melalui metode toHtml dari suatu blok / halaman atau yang paling penting sebuah blok yang tertanam dalam WYSIWYG suatu kategori / deskripsi produk / Blok CMS / Halaman CMS.

Saya telah membaca BANYAK artikel Alan yang hebat (Kudos lagi untuk orang ini !!), belum lagi rim dari artikel lain di sekitar ini , namun saya merasa semua orang ingin menambahkan ke halaman, halaman tertentu, bukan di mana pun sebelumnya. blok digunakan.

Saya merasa saya akrab dengan berbagai teknik tetapi saya mungkin akan kehilangan sesuatu di sini jadi saya ingin konsensus dari masyarakat, dan mungkin juga sedikit tanda pos untuk semua front endtt untuk penuh stack devs di luar sana mencari pertanyaan serupa dan merenungkan pilihan seperti saya.

Sebelumnya, di Magento 1, saya akan melihat ke konstruktor blok, mendapatkan tata letak, mendapatkan referensi kepala dan memanggil addJs / addCss di sana, atau jika mungkin gunakan metode dalam tata letak.xml. Ini berarti bahwa JS "ditambahkan" ke daftar sumber daya pada konstruktor blok (sebelum level tema akan menampilkan blok kepala). Tapi ini sepertinya tidak mungkin sekarang.

Saya telah membaca tentang bagaimana cara menambahkan JS / CSS (ini bukan sederhana "bagaimana saya ???" ini lebih ringkas "apa cara yang benar / mag2 ???") dan saya akrab dengan ini teknik:

  • /view/[area[/layout/[default/page_id[.xml teknik, menggunakan <head></head>elemen root
  • Menambahkan blok Head ke modul saya, ditambahkan ke head.additional, dengan semacam logika tentang apakah blok saya dimuat
  • menggunakan \ Asset \ GroupedCollection dan \ Asset \ Repository Objects untuk menyuntikkan dari custructor halaman / Template (sepertinya ini tidak ork dengan blok), secara potensial urutan pemuatan ??
  • Menggunakan RequireJS dan menerapkan config needJS ke modul saya

Apakah saya melewatkan sesuatu ??

Orang percaya cara yang benar adalah dengan menggunakan perpustakaan RequireJS, dan atribut x-magento-init atau hanya sebuah skrip dengan require("my_module", function(){ ... })sintaks dalam skrip inline. Tapi ini nampak klunky bagiku? Saya harus mengatur skrip untuk memuat skrip, dipaksa untuk inline setidaknya beberapa JS saya, namun sepertinya cara yang paling tepat untuk mengatakan "ini blok saya, sekarang minta saya beberapa JS", dengan memasukkan ini ke dalam phtml saya.

Namun saya benar-benar ingin dapat melakukan ini melalui PHP, sebagai programmer backend / stack Saya idealnya ingin merangkum JS pergi dan (idealnya) memungkinkan tim front end saya untuk menulis ini seperti yang mereka inginkan. Singkatnya mengurus pemuatan (Back End Dev ke Frond End Dev "ini adalah phtml, ganti dalam tema jika Anda suka, juga heres file js, libs dependen dan heres css untuk blok").

Ini menyarankan __constructmetode dengan Dependansi yang Disuntikkan pada sistem Aset. Namun saya tidak bisa mendapatkan ini untuk bekerja, ini tampaknya dikonfirmasi dalam artikel cepat Alan Storms di sini: Magento Quickies: Magento 2: Menambahkan File Aset Frontend Programmatically

Catat tanda "Jadi, setiap pemikiran membuat blok yang membawa aset frontend mereka ada di luar jendela." ... kekecewaan :(

Terima kasih sudah meluangkan waktu untuk membaca dan mempertimbangkan . Saya menantikan tanggapan Anda!

PS> Jelas ini adalah StackExchange jadi saya akan menandai jawabannya sebagai jalan terbaik untuk apa yang saya coba capai (memblokir pemuatan sumber daya spesifik) namun saya akan berusaha juga untuk mendaftar sebagai refens di bagian bawah posting saya setiap dan semua jawaban yang menambah diskusi atau menyarankan solusi yang solid!

magento2 blocks javascript css cygnus digital
sumber

Jawaban:

5

Untuk js seharusnya mudah karena Magento 2 menggunakan require.js.
Jadi ini berarti Anda dapat memasukkan js on the fly saat Anda membutuhkannya.

Blok harus dirender (dalam kebanyakan kasus) oleh templat.
Jadi, Anda perlu menambahkan ini di templat Anda:

<script type="text/javascript">
    require([
        "jquery",
        .... //any other js dependencies you have
        "Namespace_Module/js/filename_here"
    ], function(){
        //some js code here. 
        //if you don't need any additional js code just have an empty function
    });
</script>

Sekarang buat file js Anda di view/adminhtml|frontend/web/js/filename_here.jsmana semua kode js Anda ada.

require.js akan tahu cara mengambil file Anda ketika diminta.

Untuk file css saya tidak tahu apakah itu mungkin.
File css harus menuju ke headbagian halaman, tetapi misalnya jika Anda memiliki blok di dalam konten halaman cms seperti ini {{block class="..." template="..."}}, ketika konten halaman cms harus diproses, html hingga saat itu sudah dirender jadi Anda tidak bisa menambahkan hal lain ke head block via php. Anda dapat mencoba menambahkannya di template seperti <style...tetapi bukan itu yang Anda inginkan (saya berasumsi).

Marius
sumber
Terima kasih Marius, saya menjelajahi rute needJS sebagai salah satu kepemilikan yang saya sebutkan di atas, tetapi terima kasih atas contoh singkatnya! Namun saya setuju itu tidak menawarkan solusi untuk masalah CSS, namun ini mungkin merupakan titik bisu karena kurang kompiler Magento dll. Juga, ini agak abstrak tapi saya kira kita bisa menggunakan requireJS untuk memuat JS kita yang pada gilirannya bisa menambahkan tautan ke stylesheet ke DOM, setidaknya asyncronous nya !!!
cygnus digital
Bahkan, saya menemukan ini di halaman requirejs, cara memuat CSS dengan RequireJS! : Requirejs.org/docs/faq-advanced.html#css
digital
@cygnusdigital. Bagus. Jadi masalah terpecahkan :)
Marius
Hai Marius, baik ya dan tidak, itu pasti kandidat yang baik untuk solusi, itu sesuai dengan persyaratan jadi saya berterima kasih atas masukan Anda, tapi saya mencari diskusi dan alternatif. Mungkin itu hanya saya menjadi dinosaurus namun saya merasa lebih tepat untuk memuat JS / CSS di dalam konstruktor, yaitu. "Jika blok dibangun / disertakan, tambahkan ini ke kepala." : DI saya bertanya-tanya apakah mungkin untuk menambahkan secara kondisional ke blok head.additional dengan cepat. (Yaitu menambahkan blok kepala dari modul saya ke head.additional pada tahap blok konstruktor).
cygnus digital
Anda dapat melakukannya dengan blok biasa yang ditambahkan melalui file tata letak, tetapi seperti yang saya jelaskan Anda tidak dapat melakukan ini untuk blok yang termasuk dalam isi halaman melalui {{block}}arahan, karena bagian kepala sudah dirender ketika kelas blok dipakai.
Marius