Come riscrivere la funzione del widget con i mixin Magento 2.1.1

abbiamo swatch-renderer.js

In questo file ci sono alcuni widget.

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

Vorrei riscrivere alcune delle sue funzioni.

Qual è il modo corretto come farlo?

Le spiegazioni nella libreria magento non sono più attuali, sono collegate a classi che stanno usando un altro approccio (sto parlando di place-order.js / place-order-mixin.js). E gli esempi descritti non spiegano in qualche modo come riscrivere le funzioni dei widget.

— zhartaunik
fonte

Risposte:

requirejs-config.js

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

path / to / vostri / 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
fonte

Modifica: la mia risposta non sta usando i mixin. Per quanto ne so, i mixin funzionano solo per i metodi riscrivibili e le proprietà. Nel tuo caso, è JS puro chiamato direttamente al di fuori di un metodo.

Puoi farlo tramite un modulo.

In Vendor/Module/view/frontend/requirejs-config.jspuoi aggiungere quanto segue:

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

Quindi è possibile creare il Vendor/Module/view/frontend/web/js/swatch-renderer.jsfile copiando il swatch-renderer.jsfile originale e modificarne il contenuto in base a ciò che si desidera fare.

— Raffaello al Pianismo digitale
fonte

Raphael , scusa per non aver risposto per molto tempo. Non ho avuto tempo libero. In altre parole, non esiste un modo corretto di riscrivere i metodi del widget? Solo riscrittura completa completa? Voglio dire che se magento aggiorna un file esistente, dovremo aggiornare la nostra riscrittura.

— Zhartaunik,

@zhartaunik è possibile riscrivere i metodi dei widget usando i mixin. Il problema nel tuo caso è che il file swatch-renderer non ha alcun metodo, è un singolo script. Per questo motivo non possiamo usare i mixin e quindi dobbiamo riscrivere completamente. AFAIK è l'unico modo per farlo

— Raffaello al Pianismo digitale il

@RaphaelatDigitalPianism Ho appena provato a fare la stessa cosa che descrivi ma ottenendo continuamente Uncaught TypeError: base is not a constructor- qualche idea sul perché? Grazie

— Tom Burman il

Dovresti essere in grado di riscrivere il SwatchRendererwidget con mixin perché la funzione passata defineha alla fine return $.mage.SwatchRenderer;. Non conosco l'altro widget definito nello stesso file SwatchRendererTooltip.

— oscuro