如何在 Shopify 中仅显示所选产品变体的缩略图答案

【问题标题】：How to show only thumbnails of selected product variant in Shopify如何在 Shopify 中仅显示所选产品变体的缩略图
【发布时间】：2016-12-01 07:07:59
【问题描述】：

如果我的产品有 10 种款式，然后每种款式都有 10 种颜色，并且每个产品变体至少有 2 张图片（正面和背面），当前 Shopify 主题将显示产品变体的所有缩略图（在特色图片下方） .这种情况会给客户带来糟糕的 UX 体验，因为显示所有变体图像会使产品页面过于拥挤。

我尝试修改代码如下。但它根本没有显示任何缩略图。

<ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">
          {% for variant in product.variants %}
            {% if variant == product.selected_or_first_available_variant %}
              <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: '1024x1024' }}" class="product-single__thumbnail">
                  <img src="{{ image.src | img_url: 'thumb' }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
            {% endif %}
          {% endfor %}
        </ul>

谁能帮我解决这个问题？我想显示当前产品所选样式和颜色的缩略图。

谢谢！

【问题讨论】：

标签： shopify liquid

【解决方案1】：

我认为你应该隐藏所有缩略图，除了你需要通过 css + js 显示的内容。例如，将 .thumb 类和 'stylename' 添加到所有缩略图（li 元素）

在定义了“选择样式”功能的 JS 中，将 .show 添加到所有具有选定“样式名称”的类的元素

<ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">
          {% for variant in product.variants %}
            {% if variant == product.selected_or_first_available_variant %}

              <!--let option1 is style-->
              {% capture stylename %}{{variant.option1 | handle}}{% endcapture %}

              <li class="thumb {{ stylename }} grid__item wide--one-quarter large--one-third medium-down--one-third">
                <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
                  <img src="{{ image.src | img_url: 'thumb' }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
            {% endif %}
          {% endfor %}
        </ul>

...在 JS 中定义“选择”变体函数的地方

$thumbs = $('.thumbs');
$options.on("change", function(){
  ...
  $thumbs.hide();
  $('.thumbs.' + $(this).data('stylename')).show();
});

【讨论】：