Widget Widget: hai Widget tùy chỉnh được mở rộng cùng cha mẹ Widget Magento 2

Điều kiện tiên quyết

Tôi có 2 widget tùy chỉnh mở rộng cùng widget cha.

• Tiện ích phụ huynh: Magento_ConfigurableProduct/js/configurable
• Widget tùy chỉnh đầu tiên: Vendor_AModule/js/configurable
• Widget tùy chỉnh thứ hai: Vendor_BModule/js/configurable

Widget tùy chỉnh đầu tiên require-config.js:

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

JS tùy chỉnh widget đầu tiên:

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 tùy chỉnh thứ hai require-config.js:

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

JS Widget tùy chỉnh thứ hai:

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;
});

Các bước để tái sản xuất

Tôi mở một trang frontend sản phẩm cấu hình.

Kết quả mong đợi

Tôi thấy cả hai Custom widget B is triggered!và Custom widget A is triggered!cảnh giác.

Kết quả thực tế

Tôi chỉ thấy Custom widget B is triggered!cảnh giác.

Câu hỏi

Làm thế nào mã phải làm cho trang frontend sản phẩm có thể cấu hình hiển thị cảnh báo của cả hai widget?

Magento 2 có một tính năng ít được biết đến gọi là request-js mixinrất hữu ích cho việc mở rộng mô-đun js từ nhiều nơi.

Bạn requirejs-config.jssẽ trông giống như:

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

Tệp js sau đó sẽ là:

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 này trả về một hàm lấy mô đun đích làm đối số và trả về phiên bản mở rộng. Bằng cách này, bạn có thể mở rộng tiện ích ở những nơi khác nhau mà không cần ghi đè.

Đảm bảo Mô-đun tùy chỉnh được tải sau khi người khác

<sequence> để đảm bảo rằng các tệp cần thiết từ các thành phần khác đã được tải khi thành phần của bạn tải

mô-đun

<?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>

Chúng tôi có thể kiểm tra app/etc/config.php. Mô-đun tùy chỉnh của bạn phải ở mức "thấp hơn" so với các mô-đun khác.

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

Chúng ta có thể loại bỏ các mô-đun tùy chỉnh từ setup_modulebảng. Và sau đó, chạy lại lệnh nâng cấp thiết lập để sắp xếp lại chuỗi mô-đun.

Chúng tôi cần đảm bảo js tùy chỉnh là "cấp thấp hơn" so với những người khác requirejs-config.js.

pub / static / _requirejs / frontend / Magento / luma / en_US / allowjs-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);

Khai báo mô-đun B

Bởi vì tiện ích A đã bị "ghi đè" tiện ích Magento mặc định. Vì vậy, trong Mô-đun B, chúng ta cần tải tiện ích A và "ghi đè" nó .

ứng dụng / mã / Nhà cung cấp / BModule / view / frontend / allowjs-config.js

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

ứng dụng / mã / Nhà cung cấp / BModule / view / frontend / web / js / configureable.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;
});

Rốt cuộc, chúng ta cần chạy lại triển khai nội dung tĩnh.

Chúng tôi có thể đọc thêm tại đây: https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/#USE-_super-and-_superapply-to-access-parents