20

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.

2 Answers 2

47
+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;
    }
});
2
  • after 7 years your answer helps me again. thanks Max
    – zhartaunik
    Aug 4, 2023 at 8:33
  • when original name passing in widget it is not working but when passing our own custom widget and return same it is working.
    – M2 Dev
    Jan 2 at 6:46
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.

5
  • 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, 2016 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 Nov 9, 2016 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, 2017 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. Sep 28, 2017 at 18:07
  • Here is example codedecorator.com/blog/… Feb 4, 2022 at 14:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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