Question

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

我很确定在完成Javascript元素之前我已经完成了所有工作。我知道我已在Shopify管理员中正确标记了我的图像。我把JS放在我的product.liquid文件的底部并略微改变以类似我的代码但是在教程的末尾有一部分引用了我不理解的JS片段或知道它需要的位置走。我假设它需要进入我的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片段是switchImage函数的样子（或您的switchImageTwo）的示例。您可以将此函数与您现有的js放在$.when.apply...行上方。

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

1 个答案: