Magento – How to Auto Select Swatch Option Values if Only One Exists on Magento 2.1 Product View

magento2

I'm trying to have swatch option values selected on the Product View page, if only one value exists.

If the user selects a product from the Category page, the product page displays with the attributes Color, Shape, and Size. Some products only have one color, one shape, and maybe two sizes. I want the color and shape values to be automatically selected when that page loads.

Thanks!

Best Answer

I had a similar task today - auto select size attribute, if there is only one option. Here is what I did:

In /Magento_Swatches/web/js/SwatchRenderer.js, in the _RenderControls function

lines 272-273 (in the end of $.each(this.options.jsonConfig.attributes) loop) add

if(item.options.length==1)
$widget.theOption = $widget.element.find('[attribute-id=' + item.id + '] .swatch-option')[0];

Here I just take my single size div element that should be selected

And then line 294 (at the bottom of the function):

if($widget.theOption != undefined) $widget.theOption.click();

Trigger click event to select size option

Related Solutions

Magento – Get Custom Option Values of a product magento 2

Try this:

$_product = $block->getProduct();
foreach ($_product->getOptions() as $o) {
    if ($o->getTitle() != 'Color') { // or another title of option
        continue;
    }
    foreach ($o->getValues() as $value) {
        print_r($value->getData());
    }
}

You should search for your option by the title because the option ID is unknown.

Magento – How to Auto Select Color Option for Products with Only One Color (configurable product)

I suggest running that code using an on load event listener.

if (window.addEventListener) // W3C standard
{
  window.addEventListener('load', configurabledefaults, false); // NB **not** 'onload'
} 
else if (window.attachEvent) // Microsoft
{
  window.attachEvent('onload', configurabledefaults);
}
function configurabledefaults {
var number = $('.swatch-attribute .color').length;
if(number==1){$('.swatch-attribute .color').click();}
}

See the following link about multiple onload events.

Multiple window on load events

Best Answer

Related Solutions

Magento – Get Custom Option Values of a product magento 2

Magento – How to Auto Select Color Option for Products with Only One Color (configurable product)

Related Topic