HOW to Select variants by clicking their images in DEBUT THEME and multiple images for each variant

Highlighted
Shopify Partner
64 1 3

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

0 Likes
Highlighted

Hi

 

Could you share the url of your page, I can help you with that kind of Javascript code :D

- [Tutorial] How to customize Shopify product page: academy.pagefly.io/customize-shopify-product-pages
- Are you having problems customizing your Shopify pages? Check out PageFly - Advanced Shopify Page Builder
0 Likes
Highlighted
Shopify Partner
64 1 3

hello, thanks for your reply and sorry for my late onw :D

 

the website is still not online, if you need any code just tell and i can post it here.

 

thanks :)

0 Likes
Highlighted
New Member
1 0 0

Dear Richard,

I need support for 

Select variants by clicking their images in my debut theme.

Can you support?

MARY

0 Likes