Grouping Images for Product colour variant not working - Shopify/Liquid

Question

I'm trying to implement grouping of product image variants in my Shopify theme following this tutorial.

I'm pretty sure I've done everything right up until I reach the Javascript element. I know that I have labelled my images correctly in the Shopify Admin. I've put the JS at the bottom of my product.liquid file and altered slightly to resemble my code however there is a part at the end of the tutorial referencing the JS snippet below which I don't understand or know where it needs to go. I'm presuming it needs to go in my script.js file but I'm not sure.

JS:

var switchImage = function(newImageSrc, newImage, mainImageDomEl) {
  jQuery(mainImageDomEl).attr('src', newImageSrc);
  $(mainImageDomEl).parents('a').attr('href', newImageSrc);
};

My code is as follows:

product.liquid:

  <!-- Begin product photos -->

  {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
  <!-- Begin featured image -->
  <div class="product-single__photos image featured" id="ProductPhoto">
    <a href="{{ featured_image | img_url: '1024x1024' }}" class="fancybox" rel="gallery1" id="placeholder">
      <img src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg" />
    </a>
  </div>
  <!-- End product image -->

  {% comment %}
    Create thumbnails if we have more than one product image.
  {% endcomment %}

  {% if product.images.size > 1 %}
  <!-- Begin thumbnails -->
  <ul class="grid-uniform">
    <div class="thumbs clearfix">
    {% assign featured_alt = product.selected_or_first_available_variant.option1 %}
      {% for image in product.images %}
        {% if image.alt == featured_alt or image == featured_image %}
          {% unless forloop.first %}
              <li class="image grid_item">
                <a href="{{ image | img_url: '1024x1024' }}" class="fancybox" rel="gallery1" data-original-image="{{ image | product_img_url: '1024x1024' }}">
                  <img src="{{ image | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" />
                </a>
              </li>
          {% endunless %}
        {% endif %}
      {% endfor %}
    </div>
  </ul>
  <!-- End thumbnails -->
  {% endif %}

<!-- End product photos -->

JS:

jQuery(document).ready(function($){

var images = [];

{% for image in product.images %}
  images.push({url: "{{ image | product_img_url: '1024x1024' }}", alt:     "{{ image.alt }}"});
{% endfor %}

var thumbnails = $(".thumbs");                         
$('#product-select-option-0').change(function() {
var selected = $(this).val(), mainImage = jQuery('.featured img').attr('src');
thumbnails.hide().html("");
arr = [];

var addImage = $.each( images, function( i, image ) {
  var alt = images[i].alt, url = images[i].url;   
  if (alt == selected || url == mainImage) {
    thumbnails.append('<li class="grid_item"><a href="' + url + '" data-original-image="' + url + '"><img src="' + url + '" alt="' + alt + '"></a></li>');
  }
 });
 arr.push(addImage);
 $.when.apply($, arr).done(function () {
   thumbnails.fadeIn(); 
   $('#product .thumbs a').on('click', function(e) { 
     e.preventDefault();
   switchImageTwo($(this).attr('href'), null, $('.featured img')[0]);
   });
  });
 });
});

Any help would be most appreciated.

Steph Sharp Steph Sharp · Accepted Answer · 2015-03-09T20:00:41

Towards the end of your js you are calling a function called switchImageTwo, which you haven't defined anywhere yet. The js snippet you are unsure about is an example of what the switchImage function could look like (or switchImageTwo in your case). You can put this function with your existing js, above the line $.when.apply... should work.

Grouping Images for Product colour variant not working - Shopify/Liquid

1 Answers