如何使用mixins 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)。所描述的示例并未以任何方式解释如何重写窗口小部件功能。

Answers:


38

requirejs-config.js

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

路径/到/你的/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

编辑:我的答案不使用混合。据我所知,mixins仅适用于方法重写和属性。在您的情况下,直接在方法外部调用纯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文件来创建文件,并根据需要修改其内容。


拉斐尔(Raphael),很抱歉长时间没有响应。没有空闲时间。换句话说,没有正确的方法来重写小部件方法吗?只有完整完整的重写吗?我的意思是,如果magento更新现有文件-我们将需要更新重写。
zhartaunik '16

@zhartaunik完全可以使用mixins重写小部件方法。您遇到的问题是swatch-renderer文件没有任何方法,它是一个脚本。因此,我们不能使用mixins,因此必须进行完全重写。AFAIK是做到这一点的唯一方法
拉斐尔(Raphael)在Digital Pianism上

@RaphaelatDigitalPianism我一直在尝试做与您描述的相同的事情,但是不断得到Uncaught TypeError: base is not a constructor-为什么有任何想法?谢谢
汤姆·伯曼

您应该能够SwatchRenderer使用mixin 重写小部件,因为传递给的函数define在结尾return $.mage.SwatchRenderer;。我不知道在同一文件中定义的其他小部件SwatchRendererTooltip
晦涩的
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.