Set default configurable selection in Magento 2.1

by pmccain   Last Updated May 28, 2018 10:09 AM

In Magento 2.1, there is no default selection for configurable products (swatches, etc).

I would like to automatically select when there is only one option currently available, to make the process less confusing for customers.

There is a resolution already for Magento 2 with edit of Magento_Swatches/templates/product/view/renderer.phtml, but it does not apply to version 2.1.

image showing no default selection



Answers 2


This code is working for color swatch attribute.

Using below code, first swatch are automatically selected after page load in details page,

you have to override file into your theme,

app/design/frontend/Packagename/themename/Magento_Swatches/templates/product/view/renderer.phtml

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Configurable */ ?>
<div class="swatch-opt"></div>
<script>
    require(["jquery", "jquery/ui", "swatchRenderer"], function ($) {
        $('.swatch-opt').SwatchRenderer({
            jsonConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonConfig(); ?>,
            jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $swatchOptions = $block->getJsonSwatchConfig(); ?>,
            mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
        });

        //for selected option if only one value is exist....
        jQuery(document).ready(function(){
            //for swatches1
            var swatchLength = $('.swatch-attribute').length;
            if(swatchLength >= 1){
                if($('.swatch-attribute').hasClass("color")){
                    $('.swatch-option').first().trigger('click');
                }
            }
        });

    });
</script>
Suresh Chikani
Suresh Chikani
October 24, 2016 05:08 AM

Just Override your swatch-renderer.js file into your themee and change _init() function same as below: (about line 209)

app/design/frontend/Vendor/themename/Magento_Swatches/web/js/swatch-renderer.js

Keep below code in swatch-renderer.js file, I have modified _init() function of $.widget('mage.SwatchRenderer') widget in below file,

_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');
                        }
                    });
                }

                this._setPreSelectedGallery();
                $(this.element).trigger('swatch.initialized');
            } else {
                console.log('SwatchRenderer: No input data received');
            }
            this.options.tierPriceTemplate = $(this.options.tierPriceTemplateSelector).html();
        },
Rakesh Jesadiya
Rakesh Jesadiya
October 24, 2016 05:55 AM

Related Questions