Overriding a mixin of mixin in Magento 2

In this article, we will learn how to override an existing mixin that has been overridden by some 3rd party extension. In the previous article Create a mixin to override Js function in Magento 2 we had overridden a core knockoutJS function. In this article, we will create one more module and override the previous mixin created in our previous article.

module.xml

In the previous article, we didn’t focus on this file much because we had overridden the core files. In the app/config.php file, the order for the Magento core modules is always first, followed by 3rd party and custom modules. We need this file to put the order as loading the 3rd party module first and then our custom module. Here, the 3rd party module acts as our old module, which is Learningmagento_Jsoverrider and our custom module is Learningmagento_Mixinoverride.

So we will create the module.xml file under Vendor/Module/etc and add the following code. We will skip part of creating the registration.php file as it does not revert to this topic. However, you need to create this file as it is important for the module.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Learningmagento_Mixinoverride">

        <sequence>
            <module name="Learningmagento_Jsoverrider" />
        </sequence>
    </module>
</config>

requirejs-config.js

This file is not just used for overriding the function or JS file, but it is also used for overriding an already overridden file. Add the following code to override the file. It should be created under Vendor/Module/view/frontend as we are overriding the storefront file.

var config = {
    config: {
        mixins: {
            'Magento_Swatches/js/swatch-renderer': {
                'Learningmagento_Jsoverrider/js/swatch-filter-mixin': false,
                'Learningmagento_Mixinoverride/js/swatch-filter-override': true
            }
        }
    }
};

As you can see in the code, we have passed a value of false to our previous override to stop overriding the code of the core file. You can also notice that we have listed our custom file with a value of true to instruct Magento to run our code. You can override the same file multiple times, provided that it is not using the same function; otherwise, only 1st one will run the code, and the rest won’t work.

mixin file

Lastly, we will create the file name swatch-filter-override.js, which will override the core file for our needs. We will use the same function as the previous one, _RenderControls. In the previous one, we had overridden it to select the first swatch. In this one, we will select the second swatch when the page is loaded. The file needs to be under Vendor/Module/view/frontend/web/js.

define(['jquery'], function ($) {
    'use strict';

    return function (SwatchRenderer) {
        $.widget('mage.SwatchRenderer', SwatchRenderer, {
            _RenderControls: function () {
                this._super();
                $('.swatch-attribute-options').each(function() {
                     $(this).find('.swatch-option').eq(1).click();
                });
            }
        });
        return $.mage.SwatchRenderer;
    };
});

Note

It is important that you add the 3rd party module sequence under your custom module; otherwise, it won’t work. Sometimes it may work due to the order set by Magento.