JS 위젯 : 두 개의 사용자 정의 위젯이 동일한 상위 위젯 마 젠토 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테이블 에서 커스텀 모듈을 제거 할 수 있습니다 . 그런 다음 setup upgrade 명령을 다시 실행하여 모듈 순서를 다시 정렬하십시오.

우리는 커스텀 js가 다른 것보다 "낮은 수준"인지 확인해야합니다 requirejs-config.js.

pub / static / _requirejs / frontend / 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);

모듈 B 선언

A 위젯이 기본 Magento 위젯을 "재정의"했기 때문에. 따라서 모듈 B에서 A 위젯을로드하고 "재정의"해야합니다 .

app / code / Vendor / BModule / view / frontend / requirejs-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;
});

결국 정적 콘텐츠 배포를 다시 실행해야합니다.

우리는 여기에서 더 읽을 수 있습니다 : https://learn.jquery.com/jquery-ui/widget-factory/extending-widgets/#using-_super-and-_superapply-to-access-parents