Multiple variant images with colour swatches

Highlighted
New Member
5 0 0

I'm trying to implement multiple images for a variant and only display those images when the relevant variant is selected.

This is the code:

<script>
// Grabbing product thumbnails
// Covers: Editions, Launchpad Star, Lookbook, Kickstand, Startup, Simple, Radiance, Minimal, Supply, New Standard and many more.
var thumbnails = jQuery('img[src*="/products/"]') /* All product images */
  .not(':first');                                 /* Except first one, i.e the main image */

var optionSelect;
{% assign option_index = 0 %}
{% for option in product.options %}
  {% if option == option_name %}
    {% assign option_index = forloop.index0 %}
  {% endif %}
{% endfor %}

{% if product.options.size == 1 %}
  optionSelect = '.single-option-selector';
{% else %}
  optionSelect = 'label:contains({{ option_name }}) + .single-option-selector';
{% endif %}

jQuery('form[action="/cart/add"]').on('change', optionSelect, function() {
  var optionValue = $(this).val();
  thumbnails.each(function() {
    var wrapper = $(this);
    while ( wrapper.parent().children().length === 1 ) {
      wrapper = wrapper.parent();
    }
    if ( jQuery(this).attr('alt') === optionValue ) {
      wrapper.show();
    }
    else {
      wrapper.hide();
    }
  });
});
</script>

 

This works, but I'm also wanting to implement colour swatches like this

So when I add the colour swatches the multiple variant images don't work anymore. I think this might be due to the _onSelectChange function as I'm using slate, but not sure how to get this working together with the colour swatches? Any Ideas?

 

0 Likes