Como reescrever a função de widget com mixins Magento 2.1.1

Nós temos swatch-renderer.js

Neste arquivo existem alguns widgets.

....
    $.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;
        });
    },

Eu gostaria de reescrever algumas de suas funções.

Qual é a maneira correta de como fazê-lo?

As explicações na biblioteca magento não são mais reais, elas estão vinculadas a classes que estão usando outra abordagem (estou falando de place-order.js / place-order-mixin.js). E os exemplos descritos não explicam de alguma forma como reescrever as funções do widget.

— zhartaunik
fonte

Respostas:

requirejs-config.js

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

caminho / para / seu / 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;
    }
});

— Máx.
fonte

Edit: minha resposta não está usando mixins. Que eu saiba, os mixins funcionam apenas para reescritas e propriedades de métodos. No seu caso, é JS puro sendo chamado diretamente fora de um método.

Você pode fazer isso através de um módulo.

Em Vendor/Module/view/frontend/requirejs-config.jsvocê pode adicionar o seguinte:

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

Em seguida, você pode criar o Vendor/Module/view/frontend/web/js/swatch-renderer.jsarquivo, copiando o swatch-renderer.jsarquivo original e modificando seu conteúdo com base no que deseja fazer.

— Raphael na Digital Pianism
fonte

Raphael , desculpe por não responder por muito tempo. Não tinha tempo livre. Em outras palavras, não há maneira adequada de reescrever métodos de widget? Somente reescrita completa? Quero dizer que, se o magento atualizar o arquivo existente - precisaremos atualizar nossa reescrita.

— Zhartaunik

@zhartaunik é totalmente possível reescrever métodos de widget usando mixins. O problema no seu caso é que o arquivo renderizador de amostras não possui nenhum método, é um único script. Por isso, não podemos usar mixins e, portanto, precisamos reescrever completamente. AFAIK essa é a única maneira de fazê-lo

— Raphael em Digital pianismo

@RaphaelatDigitalPianism Acabei de tentar fazer a mesma coisa que você descreve, mas obtendo continuamente Uncaught TypeError: base is not a constructor- alguma idéia do porquê? Obrigado

— Tom Burman

Você deve ser capaz de reescrever o SwatchRendererwidget com mixin porque a função transmitida para definetem no final return $.mage.SwatchRenderer;. Não sei sobre o outro widget definido no mesmo arquivo SwatchRendererTooltip.

— obscuro