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
Hi
Could you share the url of your page, I can help you with that kind of Javascript code :D
Dear Richard,
I need support for
Select variants by clicking their images in my debut theme.
Can you support?
MARY
Hi,
Is it possible to select variants by clicking their images using DEBUT theme?
I followed the instructions on this Link but nothing happened.
Thanks you
User | Count |
---|---|
24 | |
20 | |
17 | |
16 | |
13 |