0

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

Improve this question
0

2 Answers 2

Reset to default
6

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();
        },
Improve this answer
5
  • Working but must add .product-add-form class otherwise it will cause a problem with sidebar filter swatches in category page
    – Aref Ben Lazrek
    Commented Jan 13, 2018 at 14:51
  • Yeah the swatch-renderer.js in Magento 2.2.3 is about 3 times as long as the function you posted. I'd lose quite a lot by replacing it!
    – Thomas Harding
    Commented Mar 13, 2018 at 14:17
  • 1
    While this works, it throws an error: Uncaught TypeError: Cannot read property 'updateData' of undefined. Because at that point the gallery hasn't been loaded yet.
    – Erfan
    Commented Apr 17, 2018 at 9:37
  • The renderer in 2.2 has a method called _onGalleryLoaded. You can add the code snipped OP mentioned at the end of the function.
    – Cult
    Commented Sep 20, 2018 at 13:10
  • Hi @rakesh ca u please let me know for dorpdown?
    – Nagaraju Kasa
    Commented Oct 15, 2018 at 10:07
1

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>
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.