জেএস উইজেট: দুটি কাস্টম উইজেট একই প্যারেন্ট উইজেট ম্যাজেন্টো 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'
        }
    }
};

প্রথম কাস্টম উইজেট জেএস:

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

দ্বিতীয় কাস্টম উইজেট জেএস:

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

ধাপ পুনর্গঠন কর

আমি একটি কনফিগারযোগ্য পণ্য সম্মুখভাগ পৃষ্ঠা খুলি open

প্রত্যাশিত ফলাফল

আমি উভয় Custom widget B is triggered!এবং Custom widget A is triggered!সতর্কতা দেখতে ।

আসল ফলাফল

আমি কেবল Custom widget B is triggered!সতর্কতা দেখি ।

প্রশ্ন

উভয় উইজেটের কনফিগারযোগ্য পণ্য সম্মুখভাগ পৃষ্ঠা সতর্কতা প্রদর্শন করার কোডটি কীভাবে হওয়া উচিত?

Answer 1

ম্যাজেন্টো 2 এর একটি প্রয়োজনীয়-জেএস নামক একটি কম পরিচিত বৈশিষ্ট্য রয়েছে যা mixinএকাধিক জায়গা থেকে জেএস মডিউল বাড়ানোর জন্য দরকারী।

আপনার requirejs-config.jsদেখতে হবে:

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

জেএস ফাইলটি তখন হবে:

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

এই জেএস একটি ফাংশন দেয় যা লক্ষ্য মডিউলটিকে আর্গুমেন্ট হিসাবে গ্রহণ করে এবং প্রসারিত সংস্করণ দেয় returns এভাবে আপনি অনাকাঙ্ক্ষিত ওভাররাইড ছাড়াই বিভিন্ন জায়গায় উইজেট প্রসারিত করতে পারেন।

Comments

গ্রেট! সহায়ক তথ্য। ধন্যবাদ. আমি ভুলে গেছিmixin

— খোয়া ট্রুংডিনহ

আমি কেবল AWidgetআপনার কোডে দেখতে পাচ্ছি , কিভাবে আবেদন করব BWidget?

— রেন্ডি একো প্রাস্তিও

BWidgetহিসাবে বাস্তবায়ন করা হবে AWidget।

— অ্যারন অ্যালেন

আপনাকে ধন্যবাদ স্যার, আমি আপনার কোডটি প্রয়োগ করেছি এবং এটি করা উচিত এর মতো কাজ করে।

— রেন্ডি একো প্রশস্তিও

অ্যারোন অ্যালেন, +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টেবিল থেকে কাস্টম মডিউল সরাতে পারি । এবং তারপরে, মডিউল সিকোয়েন্সটিকে পুনরায় অর্ডার করতে আবার সেটআপ আপগ্রেড কমান্ডটি চালান।

আমাদের এটি নিশ্চিত করা দরকার যে কাস্টম জেএসগুলি অন্যদের তুলনায় "নিম্ন স্তরের" requirejs-config.js।

পাব / স্ট্যাটিক / _requirejs / ফ্রন্টএন্ড / Magento / Luma / 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);

মডিউল বি

কারণ একটি উইজেট ইতিমধ্যে ডিফল্ট ম্যাজেন্টো উইজেটটিকে "ওভাররাইড" করা হয়েছিল। সুতরাং, মডিউল বিতে, আমাদের এ উইজেটটি লোড করতে হবে এবং এটি "ওভাররাইড" করতে হবে ।

অ্যাপ্লিকেশন / কোড / বিক্রেতা / 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 অক্ষম করি তখন BMDule এখনও কাজ করা উচিত, তদ্বিপরীত। দুর্ভাগ্যক্রমে আপনার উত্তর এই সমস্যাটি পরিচালনা করতে পারে না এমন এখানে।

— রেন্ডি ইকো প্রসিটিও