doodlesalot
8/2/2017 - 12:52 PM

https://help.outofthesandbox.com/hc/en-us/articles/115006909867-Select-a-Product-Variant-by-Clicking-a-Thumbnail-Image updated snippet for t

{% if product.variants.size > 1 %}
<script>
(function($) { 
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    optionValue;
    {% 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 %}
       }
    {% endfor %}
    $(function() {
      var $product = $('.product-' + {{ product.id }});
      thumbnails = $('.flex-control-thumbs img[src*="/products/"]', $product);
      
      if (thumbnails.length) {
        thumbnails.bind('touchstart click', function() {
        
          var image = $(this).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)|(_1024x1024\.)/,'.');

          if (typeof variantImages[image] !== 'undefined') {
            {% for option in product.options %}
            optionValue = variantImages[image]['option-{{ forloop.index0 }}'];

            if (optionValue !== null && $('.single-option-selector:eq({{ forloop.index0 }}) option', $product).filter(function() { return $(this).text() === optionValue }).length) {
            
              $('.single-option-selector:eq({{ forloop.index0 }})', $product).val(optionValue).trigger('change');
            {% if settings.product_form_style == "swatches" %}
                $('.swatch-element', $product).each(function() {
                 if($(this).data("value").indexOf(optionValue) > -1) {
                    $(this).find("label").click();
                    return;
                }
                });
             {% endif %}
            }
            {% endfor %}
          }
        });
      }
    });
})(jQuery);
</script> 
{% endif %}