Cómo reescribir la función del widget con mixins Magento 2.1.1

Tenemos swatch-renderer.js

En este archivo hay algunos 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;
        });
    },

Me gustaría reescribir algunas de sus funciones.

¿Cuál es la forma correcta de hacerlo?

Las explicaciones en la biblioteca magento ya no son reales, están vinculadas en clases que utilizan otro enfoque (estoy hablando de place-order.js / place-order-mixin.js). Y los ejemplos descritos no explican de alguna manera cómo reescribir las funciones del widget.

— zhartaunik
fuente

Respuestas:

requirejs-config.js

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

ruta / a / 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;
    }
});

— Max
fuente

Editar: mi respuesta no está usando mixins. Que yo sepa, los mixins solo funcionan para reescrituras de métodos y propiedades. En su caso, es JS puro que se llama directamente fuera de un método.

Puedes hacerlo a través de un módulo.

En Vendor/Module/view/frontend/requirejs-config.jsusted puede agregar lo siguiente:

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

Luego, puede crear el Vendor/Module/view/frontend/web/js/swatch-renderer.jsarchivo copiando el swatch-renderer.jsarchivo original y modificar su contenido en función de lo que desea hacer.

— Raphael en Digital Pianism
fuente

Raphael , perdón por no responder durante mucho tiempo. No tenía tiempo libre. En otras palabras, ¿no hay una manera adecuada de reescribir los métodos de widgets? Sólo reescritura completa completa? Quiero decir que si Magento actualiza el archivo existente, tendremos que actualizar nuestra reescritura.

— zhartaunik

@zhartaunik es totalmente posible reescribir métodos de widget utilizando mixins. El problema en su caso es que el archivo de renderizador de muestras no tiene ningún método, es un solo script. Debido a eso, no podemos usar mixins y, por lo tanto, tenemos que reescribir por completo. AFAIK esa es la única manera de hacerlo

— Raphael en Digital Pianism

@RaphaelatDigitalPianism Acabo de tratar de hacer lo mismo que usted describe pero continuamente obtengo Uncaught TypeError: base is not a constructor, ¿alguna idea de por qué? Gracias

— Tom Burman

Debería poder reescribir el SwatchRendererwidget con mixin porque la función pasada a definetiene al final return $.mage.SwatchRenderer;. No sé sobre el otro widget definido en el mismo archivo SwatchRendererTooltip.

— oscuro