提问者:小点点

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


如果我有一个产品有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>

有谁能帮我弄清楚吗?我想显示当前产品的选定样式和颜色的缩略图。

谢谢


共1个答案

匿名用户

我认为你应该隐藏所有的缩略图,除了你需要通过css js显示的。例如,添加类。为所有缩略图(li元素)添加thumb和'stylename'

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