问题描述:

Note - Please read the thread through, it's quite long, if you need more info, or code examples, please ask before downvoting; I'm not going anywhere and will be checking this regularly, and so can and will provide anything extra

Lots of these posts around but no proper answer. The Minimal theme is an incredibly popular one on Shopify, and many people ask this question.

Q: How do I display multiple thumbnail images per variant - similar to this post,

http://littlesnippets.ca/blogs/tutorials/15665261-grouping-images-with-variants

  • I have 6 images,3 black, 3 brown.
  • Black shoe is shown, image thumbnails show the 3 black images.
  • Brown shoe variant is clicked.
  • Black thumbnail images are removed/hidden.
  • 3 Brown thumbnail images are added in/shown.

There is code floating around, notably here, https://gist.github.com/kyleaparker/560a3847860bace1d680

in the top section, gistfile1.

However due to differences in the themes, this doesn't work on Minimal as plug'n'play.

The code below, is what controls the main featured image, and the thumbnails on the Minimal theme.

<div class="product-single__photos" id="ProductPhoto">

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

<img src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg"{% if settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %} data-image-id="{{ featured_image.id }}">

</div>

{% if product.images.size > 1 %}

<ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">

{% assign featured_alt = product.selected_or_first_available_variant.option2 %}<!-- this line relates to the variant image code -->

{% for image in product.images %}

{% if image.alt == featured_alt or image == featured_image %}<!-- this line relates to the variant image code -->

<li class="grid__item wide--one-quarter large--one-third medium-down--one-third">

<a data-image-id="{{ image.id }}" href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail">

<img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">

</a>

</li>

{% endif %}

{% endfor %}

</ul>

{% endif %}

</div>

This is the code that from the github page which controls the changing of thumbnails, with class/id changes to make reference to the code above.

<script>

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

var images = [];

{% for image in product.images %}

images.push({url: "{{ image | product_img_url: 'medium' }}", alt: "{{ image.alt }}"});

{% endfor %}

var thumbnails = $("#ProductThumbs");

$('#product-select-option-1').change(function() {

var selected = $(this).val(), mainImage = jQuery('#ProductPhoto img').attr('src').replace('_medium', '_grande');

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) {

// this code tries to build a new <li> tag for each thumbnails

thumbnails.append('<li class="grid__item wide--one-quarter large--one-third medium-down--one-third"><a href="' + url.replace('_medium', '_grande') + '" class="product-single__thumbnail"><img src="' + url + '" alt="' + alt + '"></a></li>');

}

});

arr.push(addImage);

$.when.apply($, arr).done(function () {

thumbnails.fadeIn();

$('#product .product-single__thumbnails a').on('click', function(e) {

e.preventDefault();

switchImage($(this).attr('href'), null, $('#ProductPhoto img')[0]);

});

});

});

});

}

</script>

However the above code doesn't work, https://retailtherapyboutique.myshopify.com/collections/womens/products/tamaris-26606-25-knee-length-boots?variant=18734617287

password: schaum

Black images are displayed, click brown boot color option, the main image changes but the thumbnails don't change, same with the grey boot.

Have I missed something glaring obvious, or left in parts of the code from the github page that should be removed - or should it just all be re-written?

网友答案:

As there don't seem to be any jQuery/Liquid experts out there... I was passed this solution by someone which works incredibly well on Minimal theme, as well as numerous others; and its plug'n'play

https://gist.github.com/carolineschnapp/d3c1af82b915e9cae82929e6486f22fe

相关阅读:
Top