Question

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

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

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

任何可以帮我解决这个问题的人？我想显示当前产品的选定样式和颜色的缩略图。

谢谢！

Answer 1

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

并在JS中定义了“select style”的函数，将.show添加到具有所选“stylename”的类的所有元素

<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();
});

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

1 个答案: