Skip to content

Instantly share code, notes, and snippets.

@drabbytux
Last active October 13, 2020 14:02
Show Gist options
  • Save drabbytux/7f3f2c57c01fcd4baba98668c9473adc to your computer and use it in GitHub Desktop.
Save drabbytux/7f3f2c57c01fcd4baba98668c9473adc to your computer and use it in GitHub Desktop.
Thumbnail changes variant, Plain Javascript
document.addEventListener("DOMContentLoaded", function(){
thumbnails = document.querySelectorAll('img[src*="/products/"]');
function addEventListenerList(thumbnails) {
for (var i = 0, len = thumbnails.length; i < len; i++) {
console.log(thumbnails[i].currentSrc);
thumbnails[i].addEventListener('click', thumbImageSwap, false);
}
}
function thumbImageSwap(){
var arrImage = this.getAttribute('src').split('?')[0].split('.');
var strExtention = arrImage.pop();
var strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/,'');
var strNewImage = arrImage.join('.')+"."+strRemaining+"."+strExtention;
productOptions.forEach(function (value, i) {
if (typeof(variantImages[strNewImage]) != 'undefined') {
optionValue = variantImages[strNewImage]['option-'+i];
optionSelector = document.getElementById('SingleOptionSelector-'+i);
optionSelectorArray = Array.apply(null, optionSelector);
if (optionValue !== null && optionSelectorArray.filter(function(el) {return el.innerText.trim() === optionValue }).length ) {
optionSelector.value = optionValue;
optionSelector.dispatchEvent(new Event('change', {option: optionSelector.value}));
}
}
});
}
addEventListenerList(thumbnails);
});
@drabbytux
Copy link
Author

Updated vanilla JS for use with newer Debut theme. Will require more scenerio testing.

@SaveMH
Copy link

SaveMH commented Oct 5, 2020

Hi, used this code and it worked on Debut theme. However, it did remove the Quantity selector from my product. I see it still requires more testing so just figured I would comment this in case of an update.

**Update: I fixed this by pressing "Customize" while on the product page, Clicking "Product Pages" on the left hand side, and then rechecking "Show quantity selector"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment