Question

注意 - 请仔细阅读该主题，如果您需要更多信息或代码示例，请详细说明，请在downvoting之前询问;我不会去任何地方，并会定期检查，所以可以并将提供任何额外的

这些帖子很多但没有正确答案。最小的主题是Shopify上非常受欢迎的主题，很多人都会问这个问题。

问：如何为每个变体显示多个缩略图 - 与此帖相似， http://littlesnippets.ca/blogs/tutorials/15665261-grouping-images-with-variants

我有6张图片，3张黑色，3张棕色。
显示黑色鞋子，图像缩略图显示3个黑色图像。
点击棕色鞋款。
删除/隐藏黑色缩略图图像。
添加/显示3个棕色缩略图。

周围有代码，特别是https://gist.github.com/kyleaparker/560a3847860bace1d680

在顶部，gistfile1。但是由于主题的不同，这不适用于Minimal作为即插即用。

下面的代码控制主要特色图像和最小主题上的缩略图。

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

这是来自github页面的代码，它控制缩略图的更改，并通过类/ id更改来引用上面的代码。

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

但是上述代码不起作用，https://retailtherapyboutique.myshopify.com/collections/womens/products/tamaris-26606-25-knee-length-boots?variant=18734617287 密码：schaum

显示黑色图像，单击棕色启动颜色选项，主图像发生变化但缩略图不变，与灰色启动相同。

我是否遗漏了一些明显的东西，或者遗留在应该删除的github页面的部分代码中 - 或者是否应该重写所有内容？

Answer 1

因为那里似乎没有任何jQuery / Liquid专家......我被一个在Minimal主题上工作得非常好的人以及其他许多人通过了这个解决方案;和它的插件

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

Shopify - 每个变体显示多个缩略图 - 最小主题

1 个答案: