Question

我正在Shopify的产品页面上工作，我的产品有11种版本，因此我只想显示所选版本的图像。现在，我得到了一切正常工作，除非我点击不同的变体，缩略图图像不会改变（主图像确实如此），Initially: Green Variant，Change to Red Variant
我使用ALT深度链接了我的产品变体图像，因此当我点击颜色＆＃34;红色＆＃34;时，只有具有ALT＆＃34;红色＆＃34;的图像。将显示在缩略图中，所以我猜我应该使用相同的概念来切换图像，我已经解决了但我无法在最后一部分获得变体图像链接，如果你知道怎么做，请帮忙，谢谢你。

$(function() {
  if($(".product-single__thumbnails").length) {
  $(".product-single__thumbnails").each(function(i) {
       var $thisSelect = $(this);
       $thisSelect.find("img").each(function() {
         var $this = $(this);
         $this.attr('src', 'IMAGES IN PRODUCT VARIATION THAT HAVE THE SAME ALT');
});
   });
        }
                });

最后，由于我每个变体有3张图像，所有这些图像都有相同的ALT，我如何将它们中的每一个放在3个不同的缩略图中，而不是让其中一个重复3次？谢谢！

以下是我的缩略图的代码：

 <ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">

            {% assign featured_alt = product.selected_or_first_available_variant.option1 %}           
            {% for image in product.images %} 
            {% if image.alt == featured_alt or image == featured_image %}

              <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item">
                <a
                  href="{{ image.src | img_url: product_image_size, scale: product_image_scale }}" id="thumbnaillinkid"
                    class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                    {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
                    <img class="product-single__thumbnail-image" id="thumbnailimageid" src="{{ image.src | img_url: product_thumb_size, scale: product_image_scale }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
              {% endif %}
            {% endfor %}
          </ul>

Answer 1

将图像元素更改为此

<img class="product-single__thumbnail-image {{ image.alt | handleize }}" id="thumbnailimageid" src="{{ image.src | img_url: product_thumb_size, scale: product_image_scale }}" alt="{{ image.alt | escape }}">

显示/隐藏基于颜色的图像/拇指的功能将如下所示

$(document).on('click','<.palette_holder_class> <.palette_element_class>',function(){
    var color = '.product-single__thumbnail-image.'+$(this).attr('thumb_color')
    $('.product-single__thumbnail-image').css('display','none')
    $(color).css('display','')
});

{{ image.alt | handleize }}应与thumb_color属性值

相同

将图像与其ALT链接

1 个答案: