Jak przepisać funkcję widgetu za pomocą mixins Magento 2.1.1


17

Mamy swatch-renderer.js

W tym pliku znajduje się kilka widżetów.

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

Chciałbym przepisać niektóre z jego funkcji.

Jak właściwie to zrobić?

Objaśnienia w bibliotece magento nie są już rzeczywiste, są powiązane z klasami, które używają innego podejścia (mówię o place-order.js / place-order-mixin.js). Opisane przykłady nie wyjaśniają, jak przepisać funkcje widgetów.

Odpowiedzi:


38

wymaganyjs-config.js

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

ścieżka / do / twojego / 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;
    }
});

3

Edycja: moja odpowiedź nie używa mixinów. Według mojej wiedzy, mixiny działają tylko w przypadku metod przepisywania i właściwości. W twoim przypadku czysta JS jest wywoływana bezpośrednio poza metodą.

Możesz to zrobić za pomocą modułu.

W Vendor/Module/view/frontend/requirejs-config.jsmożna dodać następujące:

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

Następnie możesz utworzyć Vendor/Module/view/frontend/web/js/swatch-renderer.jsplik, kopiując oryginalny swatch-renderer.jsplik i modyfikując jego zawartość w zależności od tego, co chcesz zrobić.


Raphael , przepraszam, że nie odpowiadałem przez długi czas. Nie miałem wolnego czasu. Innymi słowy, nie ma odpowiedniego sposobu na przepisanie metod widgetów? Tylko pełne pełne przepisanie? Mam na myśli, że jeśli Magento zaktualizuje istniejący plik - będziemy musieli zaktualizować nasze przepisywanie.
zhartaunik

@zhartaunik jest całkowicie możliwe przepisanie metod widgetów za pomocą mixin. Problem w twoim przypadku polega na tym, że plik renderera próbek nie ma żadnych metod, jest to pojedynczy skrypt. Z tego powodu nie możemy używać mixin i dlatego musimy przejść pełne przepisywanie. AFAIK to jedyny sposób, aby to zrobić
Raphael w Digital Pianism,

@RaphaelatDigitalPianism Właśnie próbowałem zrobić to samo, co opisujesz, ale ciągle otrzymuję Uncaught TypeError: base is not a constructor- jakieś pomysły, dlaczego? Dzięki
Tom Burman,

Powinieneś być w stanie przepisać SwatchRendererwidget z mixin, ponieważ funkcja przekazana do definema na końcu return $.mage.SwatchRenderer;. Nie wiem o innym widżecie zdefiniowanym w tym samym pliku SwatchRendererTooltip.
niejasne
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.