Wie man die Widget-Funktion mit Mixins neu schreibt Magento 2.1.1

Wir haben swatch-renderer.js

In dieser Datei gibt es einige 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;
        });
    },

Ich möchte einige seiner Funktionen neu schreiben.

Was ist der richtige Weg, wie es geht?

Erklärungen in der Magento-Bibliothek sind nicht mehr aktuell, sie sind mit Klassen verknüpft, die einen anderen Ansatz verwenden (ich spreche von place-order.js / place-order-mixin.js). Und die beschriebenen Beispiele erklären nicht, wie Widget-Funktionen neu geschrieben werden.

— zhartaunik
quelle

Antworten:

requirejs-config.js

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

Pfad / zu / Ihrer / 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
quelle

Bearbeiten: Meine Antwort verwendet keine Mixins. Meines Wissens funktionieren Mixins nur für Methodenumschreibungen und Eigenschaften. In Ihrem Fall wird JS direkt außerhalb einer Methode aufgerufen.

Sie können dies über ein Modul tun.

In Vendor/Module/view/frontend/requirejs-config.jskönnen Sie Folgendes hinzufügen:

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

Anschließend können Sie die Vendor/Module/view/frontend/web/js/swatch-renderer.jsDatei erstellen , indem Sie die Originaldatei kopieren swatch-renderer.jsund den Inhalt entsprechend Ihren Vorstellungen ändern.

— Raphael bei Digital Pianism
quelle

Raphael , tut mir leid, dass ich lange nicht geantwortet habe. Hatte keine Freizeit. Mit anderen Worten, gibt es keine richtige Möglichkeit, Widget-Methoden umzuschreiben? Nur vollständige Neuschreibung? Ich meine, wenn Magento eine vorhandene Datei aktualisiert, müssen wir unser Neuschreiben aktualisieren.

— Zhartaunik

@zhartaunik es ist völlig möglich, Widget-Methoden mit Mixins umzuschreiben. Das Problem in Ihrem Fall ist, dass die Swatch-Renderer-Datei keine Methoden enthält, sondern nur ein einziges Skript. Aus diesem Grund können wir keine Mixins verwenden und müssen daher komplett neu schreiben. AFAIK, das ist der einzige Weg, dies zu tun

— Raphael beim Digital Pianism,

@RaphaelatDigitalPianism Ich habe gerade versucht, dasselbe zu tun, wie Sie es beschrieben haben, aber immer wieder Uncaught TypeError: base is not a constructor- irgendwelche Ideen warum? Vielen Dank

— Tom Burman

Sie sollten in der Lage sein, SwatchRendererWidget mit Mixin neu zu schreiben, da die an übergebene Funktion defineam Ende hat return $.mage.SwatchRenderer;. Ich weiß nichts über das andere Widget, das in derselben Datei definiert ist SwatchRendererTooltip.

— obskure