Select variants by clicking their images

Highlighted
Excursionist
39 2 0

Hi, I am using debut theme. My site is littletingles.com

I would like my cutomers to click on the image and then the variant to change. I have tried following this: https://help.shopify.com/en/themes/customization/products/variants/select-variants-by-clicking-image... 

However this is outdated and does not work. Can someone please help me? 

 

UPDATE: My problem was the half my images weren't correct. Now all I would like to know is how can I make the "undefined" option unique? For example if it needs to say "color" and/or "size"

0 Likes
Excursionist
39 2 0

UPDATE: My problem was the half my images weren't correct. Now all I would like to know is how can I make the "undefined" option unique? For example if it needs to say "color" and/or "size"

 

I added to product-template.liquid:

{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% 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 I added to theme.js:

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

However it is not working perfectly. And it also says "undefined" which I don't like

0 Likes
Excursionist
39 2 0

I managed to get most of them working. Next thing I'd like to know is how can I remove the text "pick a undefined" and make it unique to that selection? For example some product pages it needs to say "Pick a size" and/or "Pick a color" and so on

0 Likes