Hello, I followed the tutorial provided here https://help.shopify.com/en/themes/customization/products/variants/select-variants-by-clicking-image...
in product-template.liquid i put this
{% if product.variants.size > 1 %}
<script>
var variantImages = {},
thumbnails,
variant,
variantImage,
optionValue,
productOptions = [];
{% for variant in product.variants %}
variant = {{ variant | json }};
if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
variantImage = variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
variantImages[variantImage] = variantImages[variantImage] || {};
{% for option in product.options %}
{% assign option_value = variant.options[forloop.index0] %}
{% assign option_key = 'option-' | append: forloop.index0 %}
if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
}
else {
var oldValue = variantImages[variantImage][{{ option_key | json }}];
if ( oldValue !== null && oldValue !== {{ option_value | json }} ) {
variantImages[variantImage][{{ option_key | json }}] = null;
}
}
{% endfor %}
}
productOptions.push(variant);
{% endfor %}
</script>
{% endif %}and in theme.js i put this:
$(document).ready(function() {
thumbnails = $('img[src*="/products/"]');
if (thumbnails.length > 1) {
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().trim() === optionValue }).length) {
$('.single-option-selector:eq('+i+')').val(optionValue).trigger('change');
}
});
}
});
}
});
but this solution is only working on the first image of each variant, if instead of clicking on the first image I click a random image after the first one for that kind of variant is not choosing the corresponding variant but it remains to the previous variant selected before.
how I can assign a group of pictures to a single variant and how to select the right variant after clicking a picture that is not the first one for that variant but could be the 2nd, 3rd and so on?
Hope I explained good what I want to mean and do.
Thanks
