Thumbnail changes variant, Plain Javascript

plain-js-make-image-change-javascript.js

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

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

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"