วิดเจ็ต JS: วิดเจ็ตที่กำหนดเองสองตัวขยายพาเรนต์ Widget Magento 2 เดียวกัน

เงื่อนไข

ฉันมี 2 วิดเจ็ตที่กำหนดเองที่ขยายวิดเจ็ตหลักเดียวกัน

• วิดเจ็ตหลัก: Magento_ConfigurableProduct/js/configurable
• วิดเจ็ตที่กำหนดเองครั้งแรก: Vendor_AModule/js/configurable
• วิดเจ็ตที่กำหนดเองที่สอง: Vendor_BModule/js/configurable

วิดเจ็ตที่กำหนดเองครั้งแรกrequire-config.js:

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

วิดเจ็ตที่กำหนดเองครั้งแรก JS:

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

วิดเจ็ตที่กำหนดเองที่สองrequire-config.js:

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

วิดเจ็ตที่กำหนดเองที่สอง 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;
});

ขั้นตอนในการทำซ้ำ

ฉันเปิดหน้าส่วนกำหนดค่าผลิตภัณฑ์

ผลลัพธ์ที่คาดหวัง

ฉันเห็นทั้งคู่Custom widget B is triggered!และCustom widget A is triggered!ตื่นตัว

ผลลัพธ์ที่แท้จริง

ฉันเห็นการCustom widget B is triggered!แจ้งเตือนเท่านั้น

คำถาม

รหัสควรทำให้หน้าส่วนผลิตภัณฑ์ที่สามารถกำหนดค่าได้แสดงการแจ้งเตือนของทั้งสองวิดเจ็ตอย่างไร

Magento 2 มีคุณสมบัติที่รู้จักกันน้อยกว่าที่เรียกว่า require-js mixinซึ่งมีประโยชน์สำหรับการขยายโมดูล js จากหลาย ๆ ที่

คุณrequirejs-config.jsควรมีลักษณะดังนี้:

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

ไฟล์ js จะเป็น:

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 นี้คืนค่าฟังก์ชันที่ใช้โมดูลเป้าหมายเป็นอาร์กิวเมนต์และส่งคืนเวอร์ชันที่ขยายเพิ่ม วิธีนี้คุณสามารถขยายวิดเจ็ตในที่ต่าง ๆ ได้โดยไม่ต้องมีการลบล้าง

ตรวจสอบให้แน่ใจว่าโมดูลที่กำหนดเองโหลดหลังจากที่อื่น ๆ

<sequence> แท็กเพื่อให้แน่ใจว่าไฟล์ที่ต้องการจากส่วนประกอบอื่นถูกโหลดแล้วเมื่อส่วนประกอบของคุณโหลด

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>

app/etc/config.phpเราสามารถตรวจสอบใน โมดูลที่กำหนดเองของคุณควร "ระดับต่ำกว่า" อื่น ๆ

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

เราสามารถลบโมดูลที่กำหนดเองจากsetup_moduleตาราง จากนั้นให้เรียกใช้คำสั่งอัปเกรดการตั้งค่าอีกครั้งเพื่อจัดลำดับลำดับของโมดูลอีกครั้ง

เราจำเป็นต้องตรวจสอบให้แน่ใจ js ที่กำหนดเองคือ "ระดับที่ต่ำกว่า" กว่าคนอื่น ๆ requirejs-config.jsใน

ผับ / คงที่ / _requirejs / ส่วนหน้า / วีโอไอพี / ลู / th / requirejs-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);

ประกาศโมดูล B

เนื่องจากวิดเจ็ต A คือ "แทนที่" วิดเจ็ต Magento เริ่มต้นอยู่แล้ว ดังนั้นในโมดูล B เราต้องโหลดวิดเจ็ตและ "แทนที่" มัน

app / รหัส / ผู้ขาย / BModule / view / ส่วนหน้า / requirejs-config.js

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

app / รหัส / ผู้ขาย / BModule / view / ส่วนหน้า / เว็บ / 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;
});

ท้ายที่สุดเราจำเป็นต้องเรียกใช้การปรับใช้เนื้อหาแบบคงที่อีกครั้ง

เราสามารถอ่านเพิ่มเติมได้ที่นี่: https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/#using-_super-and-_superapply-to-access-parents