Magento2 - Cara memperluas widget jQuery (configureable.js)


16

Saya membuat ekstensi yang menggantikan label opsi yang dapat dikonfigurasi default 'Pilih Opsi ...' dengan nama atribut, misalnya 'Pilih Warna ...'.

Bagaimana saya bisa memperpanjang (tidak menimpa!) Widget jQuery configurable.js dan hanya memodifikasi baris ini?

Saya tahu dari dokumentasi bahwa saya bisa mengganti widget jQuery, jadi saya lakukan:

define([
    'jquery',
    'jquery/ui',
    'configurable' // usually widget can be found in /lib/web/mage dir
], function($){

    $.widget('silvan.configurable', $.mage.configurable, {

    });

    return $.silvan.configurable;
});

Bagaimana saya bisa menginisialisasi file ini? Haruskah saya memuatnya melalui requireejs-config? Fungsi peta hanya untuk meng-override kan?

Apakah mungkin untuk hanya memodifikasi baris ini? Disebut dari fungsi ini:

_fillSelect: function (element) {}

Jawaban:


27

Pertama, Anda perlu memastikan, bahwa modul Anda memiliki Magento_ConfigurableProducturutan module.xml:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_ModuleName" setup_version="1.0.0">
        <sequence>
            <module name="Magento_ConfigurableProduct"/>
        </sequence>
    </module>
</config>

Pastikan untuk membuat ulang daftar komponen config.php, jika tidak urutannya akan diabaikan ( http://devdocs.magento.com/guides/v2.2/extension-dev-guide/build/module-load-order.html )

Kemudian tambahkan requirejs-config.jsfile dalam view/frontenddirektori dengan kode:

var config = {
    map: {
        '*': {
            configurable: 'Vendor_ModuleName/js/configurable'
        }
    }
};

Akhirnya tambahkan configurable.jsfile dalam view/frontend/web/jsdirektori dengan:

define([
    'jquery',
    'jquery/ui',
    'Magento_ConfigurableProduct/js/configurable'
], function($){

    $.widget('silvan.configurable', $.mage.configurable, {
        //code you want to override
    });

    return $.silvan.configurable;
});

Anda tidak dapat memodifikasi satu baris, tetapi Anda dapat memodifikasi satu fungsi di dalamnya.


Bagaimana cara memodifikasi fungsi? Bagaimana cara memanggil orang tua?
Alex

Anda dapat memanggil fungsi selain yang Anda modifikasi seperti itu adalah bagian dari widget Anda. Anda silvan.configurablesecara otomatis mewarisi semua dari orangtua.
Bartłomiej Szubert

2
Ini bekerja dengan baik, terima kasih @Ideo! Bounty akan diberikan dalam 7 jam (batas stackexchange). @Alex Anda dapat memanggil orang tua dengan menggunakan this._super (); fungsi. Lihat: learn.jquery.com/jquery-ui/widget-factory/extending-widgets/…
Silvan

apakah ada hal lain yang harus dilakukan? karena file kustom saya tidak akan dimuat ... apakah itu tepat seperti yang dijelaskan di atas :-(
roman204

1
Ini sangat bagus! @ roman204 Saya mendapat masalah yang sama: pastikan Anda memiliki "urutan" simpul dalam file module.xml Anda. Maka penting untuk memuat kembali urutan modul. Satu-satunya cara untuk melakukannya saat ini adalah untuk menonaktifkan dan mengaktifkan kembali modul tempat Anda meletakkan "urutan" dalam file module.xml. (Info lebih lanjut: lihat bagian biru pada halaman ini: devdocs.magento.com/guides/v2.2/extension-dev-guide/build/… )
Stijn Duynslaeger - Echron
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.