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

I am using the latest Debut theme (16.5.1) and I cannot get this to fire correctly. When the thumb image is selected the dropdown changes correctly but when I choose to add to cart the first variant is added not the selected color. If I use the dropdown to select a color (default theme behavior) it works fine, just not when the thumbnail image is selected. I have no other modifications to the theme code.
Any help would be much appreciated!

Not sure if this has been updated/solved for mobile issues in the repo, but what I discovered a year ago and forgot to post back here is that when I used chrome on my pixel 3 to select a thumbnail, it did not fire a click event, but a touch event. So I bound the event handler for each element not just to the click event, but also to the touch events and that fixed my issue.

The current code worked well for me in the native language of my Shopify, which is english, but did not work when switching to another language, e.g. french.

I could make it work by replacing "return $(this).text()" with "return $(this).val()" in the code.

The .text() is different from language to language, but .val() is invariant.

I use the Pop theme.

was there an answer for brzy? " -- I am using the latest Debut theme (16.5.1) and I cannot get this to fire correctly. When the thumb image is selected the dropdown changes correctly but when I choose to add to cart the first variant is added not the selected color. If I use the dropdown to select a color (default theme behavior) it works fine, just not when the thumbnail image is selected. I have no other modifications to the theme code.
Any help would be much appreciated!"
I had it working until I downloaded the new Debut theme. Help please! thank you!

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?