Memperluas / Menggantikan JS di Magento 2

34

Karena Magento2 menggunakan RequireJS untuk memuat skrip, dan tidak ada lagi folder skin , saya mengalami masalah:

Bagaimana saya bisa mengganti file JS modul Magento dengan versi modifikasi saya?

Misalnya - opc-checkout-method.js yang dimiliki oleh ekstensi Magento_Checkout. Itu tidak didefinisikan dalam file requireejs-config.js, sejauh yang saya bisa lihat.

Ekstensi saya dimuat setelah Magento_Checkout , sehingga data requireejs-config.js ditambahkan di akhir hasil file needsejs-config.

Atau haruskah saya melakukannya dengan cara lain, tanpa mengganti seluruh skrip?

DmitryR
sumber
1
Saya akan membayangkan Anda tidak harus mengganti file sebanyak mengganti fungsi pada objek yang dimuat oleh file.
Peter O'Callaghan

Jawaban:

93

Tidak ada lagi folder skin tetapi Anda masih bisa menggunakan tema.

Sebagai bukti konsep saya menggunakan Anda contoh dengan op-checkout-method.jsdan ini ini.

Prasyarat:

  • Magento2-beta11 diinstal
  • Tema default aktif (kosong).
  • Tidak ada file yang dihasilkan di pub/staticfolder (hapus folder pub / static / frontend)

Tindakan:

  • Menyalin op-checkout-method.jsfile dari lokasi modul app/code/Magento/Checkout/view/frontend/web/js/opc-checkout-method.jske tema kosongapp/design/frontend/Magento/blank/Magento_Checkout/web/js/opc-checkout-method.js
  • diedit file clone dan menambahkan console.log('something')atau alert('something')dalam _createfungsi mage.opcCheckoutMethodwidget.
  • cache browser dihapus.

Hasil:

  • Ketika halaman checkout dimuat, saya melihat peringatan saya ditampilkan atau teks masuk ke konsol.

Info Terkait:

Jika saya menjalankan dari cli php dev/tools/Magento/Tools/View/deploy.php(skrip yang menerbitkan sumber daya statis) file js baru saya akan ditempatkan dipub/static/frontend/Magento/blank/en_US/Magento_Checkout/js/opc-checkout-method.js

[EDIT]

Saya menemukan cara untuk melakukannya melalui modul.

Di [Namespace]/[Module]/view/frontend/requirejs-config.jstambahkan ini:

var config = {
    map: {
        '*': {
            'Magento_Checkout/js/opc-checkout-method':'[Namespace]_[Module]/js/opc-checkout-method'
        }
    }
};

Kemudian buat file [Namespace]/[Module]/view/frontend/web/js/opc-checkout-method.jsdengan konten Anda.

Untuk keperluan pengujian saya mengkloning file asli dan hanya menambahkan lagi console.logdalam _createfungsi.

Juga ingat untuk membuat ulang sumber daya publik untuk frontend.

Marius
sumber
Terima kasih, Marius! Apakah mungkin melakukan hal serupa di dalam ekstensi?
DmitryR
Saya tidak berpikir Anda van melakukan itu dari ekstensi. itu tidak mungkin di magento 1 kecuali Anda mengubah template checkout sepenuhnya. Tetapi saya akan mencari cara untuk melakukannya.
Marius
Sekali lagi terima kasih, Marius. Saya mencoba menerapkan checkout khusus, yang menimpa default, dan saya terjebak dengan JS menimpa.
DmitryR
1
@DryryR. Lihat pembaruan saya untuk jawabannya.
Marius
tempat untuk requireejs-config.js sekarang menjadi Vendor / Module / view / frontend / requireejs-config.js
Eugen Bogdanovich
11

Inilah dokumen resmi tentang memperluas / mengganti komponen JS default: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html

Umpan balik diterima!

Alex
sumber
3
Selamat datang di MagentoSE. Jawaban ini akan lebih bermanfaat bagi pengguna di masa depan jika Anda menambahkan jawabannya di sini, bukan hanya tautannya. Jika tautan rusak di masa mendatang, pencari tidak akan menemukan informasi yang Anda rujuk.
AreDubya
2
Itu poin yang adil tetapi kami menambahkan 301 pengalihan ketika topik bergerak sehingga risiko 404 diminimalkan.
Steve Johnson