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

Question

我正在尝试按照tutorial 在我的 Shopify 主题中实现产品图片变体的分组。

我很确定在到达 Javascript 元素之前我已经完成了所有工作。我知道我已在 Shopify 后台中正确标记了我的图片。我已将 JS 放在我的 product.liquid 文件的底部并稍作更改以类似于我的代码，但是教程末尾有一部分引用了下面的 JS sn-p，我不明白或不知道它在哪里需要去。我假设它需要进入我的 script.js 文件，但我不确定。

JS：

var switchImage = function(newImageSrc, newImage, mainImageDomEl) {
  jQuery(mainImageDomEl).attr('src', newImageSrc);
  $(mainImageDomEl).parents('a').attr('href', newImageSrc);
};

我的代码如下：

product.liquid：

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

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

任何帮助将不胜感激。

Answer 1

在您的 js 结束时，您正在调用一个名为 switchImageTwo 的函数，但您尚未在任何地方定义该函数。您不确定的 js sn-p 是 switchImage 函数可能看起来像什么的示例（或在您的情况下为 switchImageTwo）。您可以将此功能与您现有的 js 一起放在 $.when.apply... 应该可以工作的行上方。