ミックスインMagento 2.1.1でウィジェット機能を書き換える方法


17

我々は持っています swatch-renderer.js

このファイルには、いくつかのウィジェットがあります。

....
    $.widget('mage.SwatchRenderer', {
....

    /**
     * @private
     */
    _init: function () {
        if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '') {
            this._sortAttributes();
            this._RenderControls();
        } else {
            console.log('SwatchRenderer: No input data received');
        }
    },

    /**
     * @private
     */
    _sortAttributes: function () {
        this.options.jsonConfig.attributes = _.sortBy(this.options.jsonConfig.attributes, function (attribute) {
            return attribute.position;
        });
    },

その機能のいくつかを書き直したいと思います。

それを行う適切な方法は何ですか?

magentoライブラリの説明はもう実際のものではなく、別のアプローチを使用しているクラスにリンクされています(place-order.js / place-order-mixin.jsについて話している)。また、説明されている例では、ウィジェット関数を書き換える方法については何とか説明していません。

回答:


38

requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_Swatches/js/swatch-renderer': {
                'path/to/your/mixin': true
            }
        }
    }
};

path / to / your / mixin.js

define([
    'jquery'
], function ($) {
    'use strict';

    return function (widget) {

        $.widget('mage.SwatchRenderer', widget, {
            _Rebuild: function () {
                console.log('Hello from rebuild', arguments);
                return this._super();
            }
        });

        return $.mage.SwatchRenderer;
    }
});

3

編集:私の答えはミックスインを使用していません。私の知る限り、ミックスインはメソッドの書き換えとプロパティに対してのみ機能します。あなたの場合、メソッドの外部で直接呼び出される純粋なJSです。

モジュールを介して実行できます。

ではVendor/Module/view/frontend/requirejs-config.js、あなた以下を追加することができます。

var config = {
    map: {
        '*': {
            'Magento_Swatches/js/swatch-renderer':'Vendor_Module/js/swatch-renderer'
        }
    }
};

その後Vendor/Module/view/frontend/web/js/swatch-renderer.js、元のswatch-renderer.jsファイルをコピーしてファイルを作成し、目的に応じてその内容を変更できます。


ラファエル、長い間反応しないでごめんなさい。暇な時間がなかった。言い換えれば、ウィジェットメソッドを書き換える適切な方法はありませんか?完全な完全書き換えのみですか?つまり、magentoが既存のファイルを更新する場合、書き換えを更新する必要があります。
zhartaunik

@zhartaunikミックスインを使用してウィジェットメソッドを書き換えることは完全に可能です。あなたの場合の問題は、スウォッチレンダラーファイルにはメソッドがなく、単一のスクリプトであるということです。そのため、ミックスインを使用できないため、完全に書き直す必要があります。知る限りそれが唯一の方法です
デジタルピアニズムのラファエル

@RaphaelatDigitalPianism私はあなたが説明したのと同じことをやろうとしているが、継続的に得ようとしているUncaught TypeError: base is not a constructor。おかげで
トム・バーマン

SwatchRenderer渡される関数defineは最後に持っているため、ウィジェットをmixinで書き換えることができるはずreturn $.mage.SwatchRenderer;です。同じファイルで定義されている他のウィジェットについては知りませんSwatchRendererTooltip
不明な
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.