Comment réécrire la fonction widget avec mixins Magento 2.1.1

Nous avons swatch-renderer.js

Dans ce fichier, il y a des 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;
        });
    },

Je voudrais réécrire certaines de ses fonctions.

Quelle est la bonne façon de procéder?

Les explications dans la bibliothèque magento ne sont plus réelles, elles sont liées sur des classes qui utilisent une autre approche (je parle de place-order.js / place-order-mixin.js). Et les exemples décrits n'expliquent pas en quelque sorte comment réécrire les fonctions de widget.

— zhartaunik
source

Réponses:

requirejs-config.js

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

chemin / vers / votre / 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
source

Edit: ma réponse n'utilise pas de mixins. À ma connaissance, les mixins ne fonctionnent que pour les méthodes de réécriture et les propriétés. Dans votre cas, c'est du pur JS qui est appelé directement en dehors d'une méthode.

Vous pouvez le faire via un module.

Dans, Vendor/Module/view/frontend/requirejs-config.jsvous pouvez ajouter les éléments suivants:

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

Vous pouvez ensuite créer le Vendor/Module/view/frontend/web/js/swatch-renderer.jsfichier en copiant le swatch-renderer.jsfichier d' origine et modifier son contenu en fonction de ce que vous voulez faire.

— Raphael chez Digital Pianism
source

Raphael , désolé de ne pas avoir répondu pendant longtemps. N'avait pas de temps libre. En d'autres termes, il n'y a pas de moyen approprié de réécrire les méthodes des widgets? Seulement réécriture complète complète? Je veux dire que si magento met à jour le fichier existant - nous devrons mettre à jour notre réécriture.

— zhartaunik

@zhartaunik il est totalement possible de réécrire les méthodes des widgets en utilisant des mixins. Le problème dans votre cas est que le fichier swatch-renderer n'a pas de méthode, c'est un seul script. Pour cette raison, nous ne pouvons pas utiliser de mixins et devons donc procéder à une réécriture complète. AFAIK c'est la seule façon de le faire

— Raphael au Digital Pianism

@RaphaelatDigitalPianism Je viens d'essayer de faire la même chose que vous décrivez, mais j'obtiens continuellement Uncaught TypeError: base is not a constructor- des idées pourquoi? Merci

— Tom Burman

Vous devriez pouvoir réécrire le SwatchRendererwidget avec mixin car la fonction passée à definea à la fin return $.mage.SwatchRenderer;. Je ne connais pas l'autre widget défini dans le même fichier SwatchRendererTooltip.

— obscur