Как переписать функцию виджета с помощью миксинов 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). И описанные примеры не объясняют, как переписать функции виджета.

zhartaunik
источник

Ответы:

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

Edit: мой ответ не использует Примеси. Насколько мне известно, 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файл и изменив его содержимое в зависимости от того, что вы хотите сделать.

Рафаэль в цифровом пианизме
источник
Рафаэль , прости, что долго не отвечал. Свободного времени не было. Другими словами, нет правильного способа переписать методы виджета? Только полную полную переписать? Я имею в виду, что если magento обновит существующий файл - нам нужно будет обновить нашу перезапись.
Жартауник
@zhartaunik полностью возможно переписать методы виджетов, используя mixins. Проблема в вашем случае заключается в том, что в файле swatch-renderer нет методов, это всего лишь один скрипт. Из-за этого мы не можем использовать миксины и, следовательно, должны быть полностью переписаны. AFAIK, это единственный способ сделать это
Рафаэль в Digital Pianism
@RaphaelatDigitalPianism Я только что пытался сделать то же самое, что вы описываете, но постоянно получаю Uncaught TypeError: base is not a constructor- есть идеи почему? Спасибо
Том Бурман
Вы должны быть в состоянии переписать SwatchRendererвиджет с помощью mixin, потому что переданная функция defineимеет в конце return $.mage.SwatchRenderer;. Я не знаю о другом виджете, определенном в том же файле SwatchRendererTooltip.
неизвестно