JS Widget: dua Widget kustom diperpanjang dengan induk yang sama Widget Magento 2

Prasyarat

Saya memiliki 2 widget khusus yang memperpanjang widget induk yang sama.

• Widget induk: Magento_ConfigurableProduct/js/configurable
• Widget Khusus Pertama: Vendor_AModule/js/configurable
• Widget Kustom Kedua: Vendor_BModule/js/configurable

Widget Khusus Pertama require-config.js:

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

JS Widget Kustom Pertama:

define([
    'jquery',
    'mage/translate',
    'Magento_ConfigurableProduct/js/configurable'
], function ($) {
    $.widget('vendor.configurable_awidget', $.mage.configurable, {
        /**
         * {@inheritDoc}
         */
        _configureElement: function (element) {
            this._super(element);
            alert('Custom widget A is triggered!');
        }
    });

    return $.vendor.configurable_awidget;
});

Widget Kustom Kedua require-config.js:

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

Widget Kustom Kedua JS:

define([
    'jquery',
    'mage/translate',
    'Magento_ConfigurableProduct/js/configurable'
], function ($) {
    $.widget('vendor.configurable_bwidget', $.mage.configurable, {
        /**
         * {@inheritDoc}
         */
        _configureElement: function (element) {
            this._super(element);
            alert('Custom widget B is triggered!');
        }
    });

    return $.vendor.configurable_bwidget;
});

Langkah-langkah mereproduksi

Saya membuka halaman muka produk yang dapat dikonfigurasi.

Hasil yang diharapkan

Saya melihat keduanya Custom widget B is triggered!dan Custom widget A is triggered!waspada.

Hasil Aktual

Saya hanya melihat Custom widget B is triggered!waspada.

Pertanyaan

Bagaimana seharusnya kode membuat halaman depan produk yang dapat dikonfigurasi menampilkan peringatan kedua widget?

Magento 2 memiliki fitur yang kurang dikenal yang disebut need-js mixinyang berguna untuk memperluas modul js dari berbagai tempat.

Anda requirejs-config.jsakan terlihat seperti:

var config = {
    'config': {
        'mixins': {
            'Magento_ConfigurableProduct/js/configurable': {
                'Vendor_AModule/js/configurable': true
            }
        }
    }
};

File js akan menjadi:

define([
    'jquery',
    'mage/translate'
], function ($) {

    return function (widget) {
        $.widget('vendor.configurable_awidget', widget, {
            /**
             * {@inheritDoc}
             */
            _configureElement: function (element) {
                this._super(element);
                alert('Custom widget A is triggered!');
            }
        });
        return $.vendor.configurable_awidget;
    };
});

Js ini mengembalikan fungsi yang mengambil modul target sebagai argumen dan mengembalikan versi yang diperluas. Dengan cara ini Anda dapat memperluas widget di tempat yang berbeda tanpa mengesampingkan yang tidak diinginkan.

Pastikan Modul khusus dimuat setelah yang lain

<sequence> tag untuk memastikan bahwa file yang diperlukan dari komponen lain sudah dimuat ketika komponen Anda dimuat

module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_BModule" setup_version="1.0.1">
        <sequence>
            <module name="Vendor_AModule"/>
        </sequence>
    </module>
</config>

Kami bisa check-in app/etc/config.php. Modul khusus Anda harus "lebih rendah" daripada yang lain.

<?php
return array (
  'modules' => 
  array (
    ......
    'Magento_ConfigurableProduct' => 1,
    ......
    'Vendor_AModule' => 1,
    ......
    'Vendor_BModule' => 1,
    ......
  ),
);

Kami dapat menghapus modul khusus dari setup_moduletabel. Dan kemudian, jalankan perintah upgrade setup lagi untuk memesan ulang urutan modul.

Kami perlu memastikan js kustom adalah "tingkat lebih rendah" dari yang lain di requirejs-config.js.

pub / static / _requirejs / frontend / Magento / luma / en_US / requireejs-config.js

(function(require){

    ......

    (function() {

        var config = {
            map: {
                '*': {
                    configurable: 'Magento_ConfigurableProduct/js/configurable'
                }
            }
        };
        require.config(config);
    })();

    ......



    (function() {
        var config = {
            map: {
                '*': {
                    configurable: 'Vendor_AModule/js/configurable'
                }
            }
        };
        require.config(config);
    })();

    .....

    (function() {
        var config = {
            map: {
                '*': {
                    configurable : 'Vendor_BModule/js/configurable'
                }
            }
        };
        require.config(config);
    })();

    ......

})(require);

Deklarasikan Modul B

Karena widget A telah "diganti" widget Magento default sudah. Jadi, di Modul B, kita perlu memuat widget A dan "menimpanya" .

app / code / Vendor / BModule / view / frontend / requireejs-config.js

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

app / code / Vendor / BModule / view / frontend / web / js / configurable.js

define([
    'jquery',
    'mage/translate',
    'Vendor_AModule/js/configurable' // Module A widget
], function ($) {
    $.widget('vendor.configurable_bwidget', $.vendor.configurable_awidget, {
        /**
         * {@inheritDoc}
         */
        _configureElement: function (element) {
            this._super(element);
            alert('Custom widget B is triggered!');
        }
    });

    return $.vendor.configurable_bwidget;
});

Bagaimanapun, kita perlu menjalankan penyebaran konten statis lagi.

Kita dapat membaca lebih lanjut di sini: https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/#using-_super-and-_superapply-to-access-parents