Skip to content

Instantly share code, notes, and snippets.

@drabbytux
Last active September 22, 2020 22:48
Show Gist options
  • Star 10 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save drabbytux/a49215c6d0ba16c4d096a56212bbc4ce to your computer and use it in GitHub Desktop.
Save drabbytux/a49215c6d0ba16c4d096a56212bbc4ce to your computer and use it in GitHub Desktop.
Make Image Change javascript (for theme.js file)
$(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');
}
});
}
});
}
});
@Taoufik0101
Copy link

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

@drabbytux
Copy link
Author

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

@Jbest-codes
Copy link

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?

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