Shopify

Question

注意 - 请通读主题，它很长，如果您需要更多信息或代码示例，请在投票前询问；我不会去任何地方，并且会定期检查这个，所以可以并且会提供任何额外的东西

很多这样的 post，但没有正确的答案。 Minimal 主题在 Shopify 上非常受欢迎，很多人问这个问题。

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

我有6张图片，3张黑色，3张棕色。
显示黑色鞋子，图像缩略图显示 3 个黑色图像。
棕色鞋子变体被点击。
黑色缩略图 removed/hidden。
添加了 3 个棕色缩略图 in/shown。

到处都是代码，特别是这里，https://gist.github.com/kyleaparker/560a3847860bace1d680

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

下面的代码控制主要特色图片和 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页面的代码，class/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 - 每个变体显示多个缩略图 - 最小主题

Shopify - Show multiple thumbnails per variant - Minimal theme

html

jquery