Javascript 产品颜色变体的分组图像不工作-Shopify/Liquid

我正试图在我的Shopify主题中实现产品图像变体的分组

我非常确定，在达到Javascript元素之前，我已经做了所有事情。我知道我已经在Shopify管理员中正确标记了我的图像。我已经将JS放在product.liquid文件的底部，并做了一些修改，使其与我的代码相似，但是教程末尾有一部分引用了下面的JS片段，我不理解或不知道它需要放在哪里。我认为它需要放在我的script.js文件中，但我不确定

JS:

我的代码如下：

产品.液体：

  <!-- Begin product photos -->

  {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
  <!-- Begin featured image -->
  <div class="product-single__photos image featured" id="ProductPhoto">
    <a href="{{ featured_image | img_url: '1024x1024' }}" class="fancybox" rel="gallery1" id="placeholder">
      <img src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg" />
    </a>
  </div>
  <!-- End product image -->

  {% comment %}
    Create thumbnails if we have more than one product image.
  {% endcomment %}

  {% if product.images.size > 1 %}
  <!-- Begin thumbnails -->
  <ul class="grid-uniform">
    <div class="thumbs clearfix">
    {% assign featured_alt = product.selected_or_first_available_variant.option1 %}
      {% for image in product.images %}
        {% if image.alt == featured_alt or image == featured_image %}
          {% unless forloop.first %}
              <li class="image grid_item">
                <a href="{{ image | img_url: '1024x1024' }}" class="fancybox" rel="gallery1" data-original-image="{{ image | product_img_url: '1024x1024' }}">
                  <img src="{{ image | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" />
                </a>
              </li>
          {% endunless %}
        {% endif %}
      {% endfor %}
    </div>
  </ul>
  <!-- End thumbnails -->
  {% endif %}

<!-- End product photos -->

JS:

---

非常感谢您的帮助。

在js的末尾，您正在调用一个名为switchImageTwo的函数，您还没有在任何地方定义它。您不确定的js代码片段是switchImage函数或switchImageTwo的示例。您可以将此函数与现有js放在$.when.apply行上方。。。应该行。

嗨，谢谢你为我解释，我试过你的建议，但似乎没有任何区别。我不知道我是否错过了某个课程，但缩略图没有改变。如果你有任何其他的建议，我很想听听，我已经在这个问题上纠缠了很久了。非常感谢！

  <!-- Begin product photos -->

  {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
  <!-- Begin featured image -->
  <div class="product-single__photos image featured" id="ProductPhoto">
    <a href="{{ featured_image | img_url: '1024x1024' }}" class="fancybox" rel="gallery1" id="placeholder">
      <img src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg" />
    </a>
  </div>
  <!-- End product image -->

  {% comment %}
    Create thumbnails if we have more than one product image.
  {% endcomment %}

  {% if product.images.size > 1 %}
  <!-- Begin thumbnails -->
  <ul class="grid-uniform">
    <div class="thumbs clearfix">
    {% assign featured_alt = product.selected_or_first_available_variant.option1 %}
      {% for image in product.images %}
        {% if image.alt == featured_alt or image == featured_image %}
          {% unless forloop.first %}
              <li class="image grid_item">
                <a href="{{ image | img_url: '1024x1024' }}" class="fancybox" rel="gallery1" data-original-image="{{ image | product_img_url: '1024x1024' }}">
                  <img src="{{ image | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" />
                </a>
              </li>
          {% endunless %}
        {% endif %}
      {% endfor %}
    </div>
  </ul>
  <!-- End thumbnails -->
  {% endif %}

<!-- End product photos -->

jQuery(document).ready(function($){

var images = [];

{% for image in product.images %}
  images.push({url: "{{ image | product_img_url: '1024x1024' }}", alt:     "{{ image.alt }}"});
{% endfor %}

var thumbnails = $(".thumbs");                         
$('#product-select-option-0').change(function() {
var selected = $(this).val(), mainImage = jQuery('.featured img').attr('src');
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) {
    thumbnails.append('<li class="grid_item"><a href="' + url + '" data-original-image="' + url + '"><img src="' + url + '" alt="' + alt + '"></a></li>');
  }
 });
 arr.push(addImage);
 $.when.apply($, arr).done(function () {
   thumbnails.fadeIn(); 
   $('#product .thumbs a').on('click', function(e) { 
     e.preventDefault();
   switchImageTwo($(this).attr('href'), null, $('.featured img')[0]);
   });
  });
 });
});