जेएस विजेट: दो कस्टम विजेट ने एक ही मूल विजेट विजेट 2 को बढ़ाया

Question

शर्त लगाना

मेरे पास 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!अलर्ट देखता हूं ।

सवाल

दोनों विजेट्स के विन्यास योग्य उत्पाद दृश्यपटल पृष्ठ को प्रदर्शित करने के लिए कोड कैसा होना चाहिए?

Answer 1

Magento 2 में एक कम ज्ञात विशेषता है, जिसे mixinकई स्थानों से js मॉड्यूल के विस्तार के लिए उपयोगी js-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 एक फ़ंक्शन देता है जो लक्ष्य मॉड्यूल को एक तर्क के रूप में लेता है और विस्तारित संस्करण लौटाता है। इस तरह से आप बिना किसी ओवरराइड किए अलग जगह पर विजेट को बढ़ा सकते हैं।

Comments

महान! उपयोगी जानकारी। धन्यवाद। मैं भूल गयाmixin

— खोआ ट्रोंगडिन्ह

मैं केवल AWidgetआपके कोड में देख सकता हूं कि आवेदन कैसे करें BWidget?

— रेंडी एको प्रस्थीयो

BWidgetके रूप में ही लागू किया जाएगा AWidget।

— एरोन एलन

धन्यवाद सर, मैंने आपका कोड लागू कर दिया है और यह काम करता है कि इसे क्या करना चाहिए।

— रेंडी एको प्रस्थीयो

@AaronAllen, +1 अच्छी जानकारी।

— राकेश जेसादिया

Answer 2

सुनिश्चित करें कि कस्टम मॉड्यूल दूसरों के बाद लोड किया गया है

<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 / दृश्यपटल / Magento / लुमा / en_US / 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);

मॉड्यूल बी घोषित करें

क्योंकि A विजेट पहले से ही डिफ़ॉल्ट Magento विजेट "ओवरराइड" हो गया था। इसलिए, मॉड्यूल बी में, हमें ए विजेट को लोड करने और इसे "ओवरराइड" करने की आवश्यकता है ।

एप्लिकेशन / कोड / विक्रेता / BModule / देखें / दृश्यपटल / requirejs-config.js

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

एप्लिकेशन / कोड / विक्रेता / BModule / देखें / दृश्यपटल / वेब / 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

Comments

आपके उत्तर के लिए धन्यवाद। मैंने किसी दिन इस पद्धति को लागू किया है, और हां, इसने काम किया। लेकिन फिर, मैं अपने आप को एक ऐसी समस्या में पाता हूँ जहाँ AModule BModule से स्वतंत्र होना चाहिए, ताकि जब मैं AModule को अक्षम करूं, तो BModule को अभी भी काम करना चाहिए, इसके विपरीत। यहाँ वह जगह है जहाँ आपका जवाब दुर्भाग्य से इस समस्या को संभाल नहीं सकता है।

— रेंडी एको प्रस्थीयो