cancel
Showing results for 
Search instead for 
Did you mean: 

Magento2 Default dropdown value

SOLVED

Magento2 Default dropdown value

I changed size attribute from text swatch to drop down and i want to set up default value instead of "Choose a option.." Is there any way to do that ? 

Example

Size has 3 values: XS, S, L and i want to set default value is XS

Screenshot from 2018-05-29 11-21-50.png

2 ACCEPTED SOLUTIONS

Accepted Solutions

Re: Magento2 Default dropdown value

Yes, you can do it using only override js file into your theme or module level,

 

For Only Dropdown Select box for product,

You need to override configurable.js file,

 

app/design/frontend/Vendorname/themenamme/Magento_ConfigurableProduct/web/js/configurable.js

 

 

replace the _fillSelect function with below js code,

_fillSelect: function (element) {
        var attributeId = element.id.replace(/[a-z]*/, ''),
        options = this._getAttributeOptions(attributeId),
        prevConfig,
        index = 1,
        allowedProducts,
        i,
        j;

        this._clearSelect(element);
        element.options[0] = new Option('', '');
        element.options[0].innerHTML = this.options.spConfig.chooseText;
        prevConfig = false;

        if (element.prevSetting) {
            prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
        }

        if (options) {
            for (i = 0; i < options.length; i++) {
                allowedProducts = [];
                if (prevConfig) {
                    for (j = 0; j < options[i].products.length; j++) {
                        // prevConfig.config can be undefined
                        if (prevConfig.config &&
                            prevConfig.config.allowedProducts &&
                            prevConfig.config.allowedProducts.indexOf(options[i].products[j]) > -1) {
                            allowedProducts.push(options[i].products[j]);
                        }
                    }
                } else {
                    allowedProducts = options[i].products.slice(0);
                }

                if (allowedProducts.length > 0) {
                    options[i].allowedProducts = allowedProducts;
                    element.options[index] = new Option(this._getOptionLabel(options[i]), options[i].id);
                    if (typeof options[i].price !== 'undefined') {
                        element.options[index].setAttribute('price', options[i].prices);
                    }
                    element.options[index].config = options[i];
                    index++;
                }
                
                //extra code for select first option
                if (i == 0) {
                    this.options.values[attributeId] = options[i].id;
                }   
            }            
            if (window.location.href.indexOf('#') !== -1) {this._parseQueryParams(window.location.href.substr(window.location.href.indexOf('#') + 1));}
        }

    },

For Product with Dropdown and other super attribute is a swatch,

Now do below procedure for it,

Override swatch-renderer.js file in your theme from Magento_Swatches module,

app/design/frontend/Vendorname/theme/Magento_Swatches/web/js/swatch-renderer.js

Set _init() function under SwatchRenderer widget,

_init: function () {
            if (_.isEmpty(this.options.jsonConfig.images)) {
                this.options.useAjax = true;
                // creates debounced variant of _LoadProductMedia()
                // to use it in events handlers instead of _LoadProductMedia()
                this._debouncedLoadProductMedia = _.debounce(this._LoadProductMedia.bind(this), 500);
            }

            if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '') {
                // store unsorted attributes
                this.options.jsonConfig.mappedAttributes = _.clone(this.options.jsonConfig.attributes);
                this._sortAttributes();
                this._RenderControls();

                //this is additional code for select first attribute value
                if (this.options.jsonConfig.attributes.length > 0) {
                    var selectswatch = this.element.find('.' + this.options.classes.attributeClass + ' .' + this.options.classes.attributeOptionsWrapper);
                    
                    $.each(selectswatch, function (index, item) {
                        var swatchOption = $(item).find('div.swatch-option').first();
                        if (swatchOption.length && !$(item).find('div.swatch-option').hasClass('selected')) {
                            swatchOption.trigger('click');
                        } else {
                            if($(item).find('select').length > 0) {
                                $(item).find('select').val($("option:eq(1)").val()).trigger('change');
                            }
                        }
                    });
                }

                this._setPreSelectedGallery();
                $(this.element).trigger('swatch.initialized');
            } else {
                console.log('SwatchRenderer: No input data received');
            }
            this.options.tierPriceTemplate = $(this.options.tierPriceTemplateSelector).html();
        },

Clear cache and check in your frontend.

 

 

If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial

View solution in original post

Re: Magento2 Default dropdown value

I have made changes in swatch-renderer.js file with below line,

 $(item).find('select').val($("option:eq(1)").val()).trigger('change');

please update above line in _init() function and let me know if you have any issue.

If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial

View solution in original post

13 REPLIES 13

Re: Magento2 Default dropdown value

Hi @BinhXuanNguyen

 

To set default size option for all product, Go to Admin->Stores->Attributes->Product

Now search and edit size attribute. Here you can set default option in Manage Options section.

 

size   Product Attributes   Attributes   Stores   Midwest Wholesale Hardware   Magento Admin.png

 

If you want to select default options for product wise then you need to use third-party modules.

 

mageants
firebearstudio

 

If Issue Solved, Click Kudos/Accept As solutions.

Re: Magento2 Default dropdown value

@BinhXuanNguyen

 

It cannot be done form back office for dropdown options. You can do it by overriding core file of magento.

Default magento file:

 

Spoiler
vendor/magento/module-configurable-product/view/frontend/web/js/configurable.js

Location when overridden in theme:

 

 

Spoiler
app/design/frontend/ThemeVendor/Theme/Magento_ConfigurableProduct/web/js/configurable.js

Override configurable.js within the Configurable Products Module. The following code can be placed at around line 370 of configurable.js:

  • if (i == 0) {
        this.options.values[attributeId] = options[i].id;
    }  
    Don't forgot to deploy code again to make this change work. You can do it using following commands.
    php bin/magento cache:flush
    php bin/magento setup:upgrade
    php bin/magento setup:static-content:deploy -f

If Issue Solved, Click Kudos/Accept As solutions.

 

Re: Magento2 Default dropdown value

Thank you for your help @Prince Patel, but what i want is: each product will have different size values and i want to set default value is the first size drop down value. Is there any way to do that without third-party module ?

Re: Magento2 Default dropdown value

Hi @BinhXuanNguyen

 

As @popatkaran said there is no any default functionality to set the first option. If you want to select the first option for all product, Follow @popatkaran answers. It will help you.

Re: Magento2 Default dropdown value

Yes, you can do it using only override js file into your theme or module level,

 

For Only Dropdown Select box for product,

You need to override configurable.js file,

 

app/design/frontend/Vendorname/themenamme/Magento_ConfigurableProduct/web/js/configurable.js

 

 

replace the _fillSelect function with below js code,

_fillSelect: function (element) {
        var attributeId = element.id.replace(/[a-z]*/, ''),
        options = this._getAttributeOptions(attributeId),
        prevConfig,
        index = 1,
        allowedProducts,
        i,
        j;

        this._clearSelect(element);
        element.options[0] = new Option('', '');
        element.options[0].innerHTML = this.options.spConfig.chooseText;
        prevConfig = false;

        if (element.prevSetting) {
            prevConfig = element.prevSetting.options[element.prevSetting.selectedIndex];
        }

        if (options) {
            for (i = 0; i < options.length; i++) {
                allowedProducts = [];
                if (prevConfig) {
                    for (j = 0; j < options[i].products.length; j++) {
                        // prevConfig.config can be undefined
                        if (prevConfig.config &&
                            prevConfig.config.allowedProducts &&
                            prevConfig.config.allowedProducts.indexOf(options[i].products[j]) > -1) {
                            allowedProducts.push(options[i].products[j]);
                        }
                    }
                } else {
                    allowedProducts = options[i].products.slice(0);
                }

                if (allowedProducts.length > 0) {
                    options[i].allowedProducts = allowedProducts;
                    element.options[index] = new Option(this._getOptionLabel(options[i]), options[i].id);
                    if (typeof options[i].price !== 'undefined') {
                        element.options[index].setAttribute('price', options[i].prices);
                    }
                    element.options[index].config = options[i];
                    index++;
                }
                
                //extra code for select first option
                if (i == 0) {
                    this.options.values[attributeId] = options[i].id;
                }   
            }            
            if (window.location.href.indexOf('#') !== -1) {this._parseQueryParams(window.location.href.substr(window.location.href.indexOf('#') + 1));}
        }

    },

For Product with Dropdown and other super attribute is a swatch,

Now do below procedure for it,

Override swatch-renderer.js file in your theme from Magento_Swatches module,

app/design/frontend/Vendorname/theme/Magento_Swatches/web/js/swatch-renderer.js

Set _init() function under SwatchRenderer widget,

_init: function () {
            if (_.isEmpty(this.options.jsonConfig.images)) {
                this.options.useAjax = true;
                // creates debounced variant of _LoadProductMedia()
                // to use it in events handlers instead of _LoadProductMedia()
                this._debouncedLoadProductMedia = _.debounce(this._LoadProductMedia.bind(this), 500);
            }

            if (this.options.jsonConfig !== '' && this.options.jsonSwatchConfig !== '') {
                // store unsorted attributes
                this.options.jsonConfig.mappedAttributes = _.clone(this.options.jsonConfig.attributes);
                this._sortAttributes();
                this._RenderControls();

                //this is additional code for select first attribute value
                if (this.options.jsonConfig.attributes.length > 0) {
                    var selectswatch = this.element.find('.' + this.options.classes.attributeClass + ' .' + this.options.classes.attributeOptionsWrapper);
                    
                    $.each(selectswatch, function (index, item) {
                        var swatchOption = $(item).find('div.swatch-option').first();
                        if (swatchOption.length && !$(item).find('div.swatch-option').hasClass('selected')) {
                            swatchOption.trigger('click');
                        } else {
                            if($(item).find('select').length > 0) {
                                $(item).find('select').val($("option:eq(1)").val()).trigger('change');
                            }
                        }
                    });
                }

                this._setPreSelectedGallery();
                $(this.element).trigger('swatch.initialized');
            } else {
                console.log('SwatchRenderer: No input data received');
            }
            this.options.tierPriceTemplate = $(this.options.tierPriceTemplateSelector).html();
        },

Clear cache and check in your frontend.

 

 

If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial

Re: Magento2 Default dropdown value

When i click add button, magento doesn't save my product with default swatch like color and size. Is there something wrong ?

Screenshot from 2018-05-29 13-42-26.png

Re: Magento2 Default dropdown value

with only color, magento save my product normally but not with both default size and default color 

Re: Magento2 Default dropdown value

I have made changes in swatch-renderer.js file with below line,

 $(item).find('select').val($("option:eq(1)").val()).trigger('change');

please update above line in _init() function and let me know if you have any issue.

If Issue Solved, Click Kudos/Accept As solutions. Get Magento insight from
Magento 2 Blogs/Tutorial

Re: Magento2 Default dropdown value

Great !! Thank you very much