I'm experiencing the following issue.

I have a theme which overrides the swatch renderer in


I also have a module which adds a mixin for Magento_Swatches/web/js/swatch-renderer.js

However the function I'm wrapping is never executed.

 /*jshint browser:true jquery:true*/
 /*global alert*/
 ], function ($, wrapper) {
'use strict';

return function (targetModule) {
    var updatePrice = targetModule.prototype._UpdatePrice;
    targetModule.prototype.dynamic = {};
    var updatePriceWrapper = wrapper.wrap(updatePrice, function (original) {
        // console.log('execute mixin');
        return original();

    targetModule.prototype._UpdatePrice = updatePriceWrapper;
    return targetModule;


This is the theme's override


Any ideas why I can't wrap the function? I also tried wrapping other functions of the component but it still never executes.

1 Answer 1


Try to use following instead of wrapper:

], function($) {
    'use strict';

    $.widget('vendor.SwatchRenderer', $.mage.SwatchRenderer, {
        _UpdatePrice: function () {
            return this._super();

    return $.vendor.SwatchRenderer;

Also make sure that you added correct dependency to your module.xml:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_ModuleName">
            <module name="Magento_Swatches"/>

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.