15

We have swatch-renderer.js

In this file there are some 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;
        });
    },

I'd like to rewrite some of its functions.

What is the proper way how to do it?

Explanations in magento library are not actual anymore, they are linked on classes which are using another approach (I'm speaking about place-order.js / place-order-mixin.js). And described examples doesn't explain somehow how to rewrite widget functions.

29
+50

requirejs-config.js

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

path/to/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;
    }
});
3

Edit: my answer is not using mixins. To my knowledge, mixins only work for methods rewrites and properties. In your case, it's pure JS being called directly outside of a method.

You can do it via a module.

In Vendor\Module\view\frontend\requirejs-config.js you can add the following:

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

Then you can create the Vendor\Module\view\frontend\web\js\swatch-renderer.js file by copying the original swatch-renderer.js file and modify its content based on what you want to do.

  • Raphael, sorry for not-responding for long time. Had no free time. In other words there no proper way to rewrite widget methods? Only full complete rewrite? I mean that if magento update existing file - we will need to update our rewrite. – zhartaunik Nov 9 '16 at 7:54
  • @zhartaunik it is totally possible to rewrite widget methods using mixins. The problem in your case is that the swatch-renderer file does not have any methods, it's one single script. Because of that we can't use mixins and thus have to go full rewrite. AFAIK that's the only way to do it – Raphael at Digital Pianism Nov 9 '16 at 8:45
  • @RaphaelatDigitalPianism I have just been trying to do the same thing as you describe but continually getting Uncaught TypeError: base is not a constructor - any ideas why? Thanks – Tom Burman Aug 9 '17 at 17:29
  • You should be able to rewrite SwatchRenderer widget with mixin because the function passed to define has at the end return $.mage.SwatchRenderer;. I don't know about the other widget defined in the same file SwatchRendererTooltip. – obscure Sep 28 '17 at 18:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.