Make Image Change javascript (for theme.js file)

make-image-change-javascript.js

$(document).ready(function() {
  thumbnails = $('img[src*="/products/"]').not(':first');
  if (thumbnails.length) {
    thumbnails.bind('click', function() {
      var arrImage = $(this).attr('src').split('?')[0].split('.');
      var strExtention = arrImage.pop();
      var strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/,'');
      var strNewImage = arrImage.join('.')+"."+strRemaining+"."+strExtention;
      if (typeof variantImages[strNewImage] !== 'undefined') {
          productOptions.forEach(function (value, i) {
           optionValue = variantImages[strNewImage]['option-'+i];
           if (optionValue !== null && $('.single-option-selector:eq('+i+') option').filter(function() { return $(this).text() === optionValue }).length) {
             $('.single-option-selector:eq('+i+')').val(optionValue).trigger('change');
           }
        });
      }
    });
  }
});

impossible pour moi, j'ai beau suivre toute la procédure cela ne fonctionne pas! J'utilise également le théme Début

Since Debut is now shipping without JQuery, we are now utilizing a vanilla js model. Here is one that works for newer Debut themes.

https://gist.github.com/drabbytux/7f3f2c57c01fcd4baba98668c9473adc

I have implemented 2-way binding however the variant names do not switch to the correct name. Also is there a way to bind multiple photos?