magento 2 configurable product highest price product default selected

Question

Now I am using Magento 2.1.5 setup.

I want to make default selected options for a configurable product based on highest price. And I have two configurable options (like size and color swatches). I am using default swatches for it.

Answer 1

overwrite file vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js

and replace _init function From

_init: function () {
            if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '') {
                this._sortAttributes();
                this._RenderControls();
            } else {
                console.log('SwatchRenderer: No input data received');
            }
        }

To :

_init: function () {
            if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '') {
                this._sortAttributes();
                this._RenderControls();


                if(this.options.jsonConfig.attributes.length == 2){                 

                    var mcs_widget = this;                  
                    var product_id;
                    $.each(this.options.jsonConfig.attributes, function () {
                        var item = this;        

                        if(item.code == "product_condition") {
                            var price = 0;
                            $.each(item.options, function() {
                                var opt = this;                             
                                if(opt.label == "New"){
                                    $.each(opt.products, function(){
                                        var prd = this;
                                        var prd_prices = mcs_widget.options.jsonConfig.optionPrices[prd];

                                        if(price < prd_prices['finalPrice']['amount']) {
                                            price = prd_prices['finalPrice']['amount'];
                                            product_id = prd;
                                        }
                                    });
                                }
                            });
                        }
                    });

                    if(product_id){
                        $.each(this.options.jsonConfig.attributes, function () {
                            var item = this;
                            if(item.code == "screen_size") {
                                var prd_found = false;
                                $.each(item.options, function() {
                                    var opt = this;
                                    $.each(opt.products, function(){
                                        var prd = this;
                                        if(prd == product_id) {
                                    $('div[option-id="' + opt.id + '"]').click();
                                    $('.product_condition .swatch-attribute-options div.swatch-option').first().click();
                                    // attribute name
                                            prd_found = true;
                                            return;
                                        }
                                    });
                                    if(prd_found) {
                                        return;
                                    }
                                });
                            }
                        });                                     


                    }

                }               


            } else {
                console.log('SwatchRenderer: No input data received');
            }
        }

and change condition are per your requirement

if(this.options.jsonConfig.attributes.length == 2){ }