スライダーからバリアントのサイズの画像を削除 - Shopify

Question

私たちはshopifyストアを持っており、私たちは製品csvをインポートしました。それはうまく処理されましたが、今度は色の複製画像が重複して表示されます。基本的に、カラーバリエーション画像を複製し、ほぼ同じ数のサイズバリエーションに対して同じカラー画像を表示します。 Shopifyダッシュボードではすべてが見栄えが良いように見えますが、ストアフロントだけがバリアント画像を複製しています。

私はShopifyのサポートに苦労していました。彼らは手動で重複した画像を削除することを提案していました。これをコードから修正する方法があることを期待しています。助けてください。

Shopify、またはJS/CSSのliquideコードを使用して画像を非表示/削除する方法はありますか？

ここにコードが画像を生成しています。あなたが持っている色のオプションの数を取得するために、あなたの製品コード上記のどこか

{% for option in product.options_with_values %} 
    {% if option.name == "Color" %} 
     {% capture colorCount %} 
      {{ option.values.size }} 
     {% endcapture %} 
    {% endif %} 
{% endfor %} 

のようなものを追加すること

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %} 
<div class="flexslider product_gallery product-{{ product.id }}-gallery {% if product-images == blank %}product_slider{% endif %} {% if settings.product_thumbs == false %}animated fadeInUp{% endif %}"> 
    <ul class="slides"> 
    {% for image in product.images %} 
     <li data-thumb="{{ image | product_img_url: '1024x1024' }}" data-title="{% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}"> 
     {% if image.alt contains 'youtube' or image.alt contains 'vimeo' %} 
      {% assign src = image.alt | split: 'src="' %} 
      {% assign src = src[1] | split: '"' | first %} 

      {% if src contains '?' %} 
      {% assign src = src | append: '&amp;autoplay=1' %} 
      {% else %} 
      {% assign src = src | append: '?autoplay=1' %} 
      {% endif %} 

      <div class="video-container {% if image.alt contains 'vimeo' %}vimeo{% else %}youtube{% endif %}"> 
      <div> 
       <a href="{{ src }}" class="fancybox fancybox.iframe" data-fancybox-group="{{ product.id }}" title="{{ product.title | escape }}"> 
       {{ image.alt }} 
       </a> 
      </div> 
      </div> 
     {% else %} 
      <a href="{{ image | product_img_url: 'master' }}" class="fancybox" data-fancybox-group="{{ product.id }}" title="{{ image.alt | escape }}"> 
      <img src="{{ image | product_img_url: '1024x1024' }}" 
        alt="{{ image.alt | escape }}" 
        class="lazyload transition-in cloudzoom {% if featured_image.id == image.id %}featured_image{% endif %}" 
        data-image-id="{{ image.id }}" 
        data-index="{{ forloop.index0 }}" 
        data-cloudzoom="zoomImage: '{{ image | product_img_url: 'master' }}', tintColor: '{{ settings.shop_bg_color }}', zoomPosition: 'inside', zoomOffsetX: 0, touchStartDelay: 250" 
        /> 
      </a> 
     {% endif %} 
     </li> 
    {% endfor %} 
    </ul> 
</div> 

Answer 1

してみてください。そして、あなたが持っている色の数で表示を制限します。これは、色よりも多くの画像を表示したくないと仮定しています。

次に、それは、次の言葉：フィルタとして最後までcolorCount：

{% for image in product.images %} 

は制限を追加します。これにより、液体は色数をカバーするのに十分な画像しか表示しないようになります。

{% for image in product.images limit:colorCount %} 

私はそれらの画像が現れている理由は全くわからないので、これは、ややhackfixのまだある - それはあなたがあなたのCSVファイルをアップロードしたとして横行行ったいくつかの奇妙な柱となっている可能性があります。

これが正しい方向にあなたをプッシュすることを望みます。