fbpx
Want To Add Extra Images Per Product Variation For Free? Download Now

Autoselect buttons

Hi,

I use your plugin as multiple buttons – customisation for products.

I am looking for improvement as autoselect rest of buttons if there is only one option left.

Screenshot 2021-06-01 at 14.36.48.png

In this case if I choose Touch Screen: none. I have three other options only with one available. Could it autoselect it only in this scenario?

I got idea.

I quess is JavaScript logic. To check in ‘ul radiogroup’ if there is only one not ‘disabled’+aria-checked=’false’ class in ‘li’ then change it from aria-checked=’false’ to ‘true’

Screenshot 2021-06-01 at 14.45.11.png

Screenshot 2021-06-01 at 14.45.22.png

Are you able to help me with this? Maybe you have any other ideas.

Tanvirul Haque

Hi Radoslaw,

Unfortunately, the feature is not currently available..

​But it’s a great idea. I’ll discuss this feature with my development team.

In the meantime, please send the feature request here: https://storepress.fider.io/
and ask your other to upvote it.

Cheers!

Well I already done this by JS, but it didn’t work by ‘aria-checked-true’ or class (‘selected’); used click not sure if it’s best way but it works.

 
(function ($) {
var timeout = null;

function selectSingleVariants() {
const variations = document.getElementsByClassName(‘variations’);
$(‘[role=”radiogroup”]’, $(variations)).each(function() {
const radioGroup = $(this);
const notDisabled = $(‘[aria-checked]’, radioGroup).not(‘.disabled’);
//console.log(‘not disabled’, notDisabled.length, notDisabled);
if (notDisabled.length === 1 && notDisabled.is(‘[aria-checked=”false”]’)) {
//notDisabled.attr(‘aria-checked’, ‘true’).addClass(‘selected’);
notDisabled.click();
}
});
}

function onVartiantsChanged() {
/* this prevents too often call when mutliple variations observerd in short time */
clearTimeout(timeout);
timeout = setTimeout(selectSingleVariants, 50);
}
$(document).ready(function(){
const variations = document.getElementsByClassName(‘variations’);
if (variations && variations.length > 0) {
const observer = new MutationObserver(onVartiantsChanged);
observer.observe(variations[0], { attributes: true, childList: true, subtree: true });
}
});
})(jQuery);

Tanvirul Haque

Thanks for your suggestion, we will try to implement this.