Magento 2 combine two functionality s using a single mixin js file?

Question

I would like to override Magento_Swatches/js/swatch-renderer.js file using mixins concept.

I would like to club two functionalities in a single file. here is the code I have written please Note 2nd mixin functionality currently working but the first mixin code is not working. But How do we combine two functionalities in a single mixin file?

Could you please correct me what is wrong here.

requirejs-config.js

var config = {
   config: {
        mixins: {           
            'Magento_Swatches/js/swatch-renderer': {
             'Kensium_ConfigurableSku/js/model/configurable_swatch_pricerange': true
            },
            'Magento_Swatches/js/swatch-renderer': {
             'Kensium_ConfigurableSku/js/model/configurable_swatch_pricerange2': true
            }

        }
    }
};

configurable_swatch_pricerange.js

define(['jquery'], function ($) {
    'use strict';
    return function (configurable) {
        $.widget('mage.SwatchRenderer', $['mage']['SwatchRenderer'], {
        _init: function () {
            if (_.isEmpty(this.options.jsonConfig.images)) {
                this.options.useAjax = true;               
                this._debouncedLoadProductMedia = _.debounce(this._LoadProductMedia.bind(this), 500);
            }
            if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '') {
                this.options.jsonConfig.mappedAttributes = _.clone(this.options.jsonConfig.attributes);
                this._sortAttributes();
                this._RenderControls();
                this._setPreSelectedGallery();
                $(this.element).trigger('swatch.initialized');
            } else {
                console.log('SwatchRenderer: No input data received');
            }
            this.options.tierPriceTemplate = $(this.options.tierPriceTemplateSelector).html();  
           //custom code added here
           $('div.product-info-main .product-info-price .price-container .price-label').html('');
           $('div.product-info-main .product-info-price span .price').html(this.options.jsonConfig.final_price_range);
        }            
        });
        return $['mage']['SwatchRenderer'];
    };

});

configurable_swatch_pricerange2.js

define([
    'jquery',
    'mage/utils/wrapper'
], function ($, wrapper) {
 'use strict'; 
    return function(targetModule) {
        var updatePrice = targetModule.prototype._UpdatePrice;
        var updatePriceWrapper = wrapper.wrap(updatePrice, function(original) {
            var result = original();
            var allSelected = true;
            for(var i = 0; i < this.options.jsonConfig.attributes.length;i++) {
                if (!$('div.product-info-main .product-options-wrapper .swatch-attribute.' + this.options.jsonConfig.attributes[i].code).attr('option-selected')){
                 allSelected = false;
                }
            }
            if (allSelected) {
                console.log("All swatch options selected");                            
            }else {
                console.log("Only one option selected");
                $('div.product-info-main .product-info-price span .price').html(this.options.jsonConfig.final_price_range);
            }            
            return result;
        });
        targetModule.prototype._UpdatePrice = updatePriceWrapper;
        return targetModule;
    };
});

Answer 1

A mixin is a class whose methods are added to, or mixed in, with another class.

A base class includes the methods from a mixin instead of inheriting from it. This allows you to add to or augment the behavior of the base class by adding different mixins to it.

The following is an example of a mixin module that extends the other component with a function that introduces a new block Visibility property to a column element.

Mixins are declared in the mixins property in the requirejs-config.js configuration file. This file must be created in the same area specific directory the mixin is defined in.

The mixins configuration in the requirejs-config.js associates a target component with a mixin using their paths.

Check this one - https://meetanshi.com/blog/use-javascript-mixins-in-magento-2/ -https://github.com/magento/magento2/blob/2.2/app/code/Magento/CheckoutAgreements/view/frontend/requirejs-config.js

Answer 2

I have tried this way and its working fine now requirejs-config.js

var config = {
   config: {
        mixins: {           
            'Magento_Swatches/js/swatch-renderer': {
             'Vendor_ConfigurableSku/js/model/configurable_swatch_pricerange': true
            }                

        }
    }
};

configurable_swatch_pricerange.js

define([
    'jquery',
    'mage/utils/wrapper'
], function ($, wrapper) {
 'use strict'; 
    return function(targetModule) {        
        var firstTimeLoad = targetModule.prototype._init;
        var updatePrice = targetModule.prototype._UpdatePrice;

        //First time page load
        var updateInitialWrapper = wrapper.wrap(firstTimeLoad, function(original) {
            var result = original();
            $('div.product-info-main .product-info-price span .price').html(this.options.jsonConfig.final_price_range);
            return result;
        });

        //At the time of swatch options selected
        var updatePriceWrapper = wrapper.wrap(updatePrice, function(original) {
            var result = original();
            var allSelected = true;
            for (var i = 0; i < this.options.jsonConfig.attributes.length;i++) {
                if (!$('div.product-info-main .product-options-wrapper .swatch-attribute.' + this.options.jsonConfig.attributes[i].code).attr('option-selected')){
                 allSelected = false;
                }
            }
            if (allSelected) {
                console.log('All swatch options selected');                            
            } else {
                console.log('Only one option selected');
                $('div.product-info-main .product-info-price span .price').html(this.options.jsonConfig.final_price_range);
            }            
            return result;
        });

        targetModule.prototype._init = updateInitialWrapper;
        targetModule.prototype._UpdatePrice = updatePriceWrapper;
        return targetModule;
    };
});