コレクションページに条件を満たした商品のみバリエーション毎に商品を出力したい。

[takumakuta]

「Dawn」のテンプレートを使用しております。

コレクションページに

「特定のコレクションに属しており、且つバリエーションがある」

という条件を満たした商品のみバリエーション毎に出力したいです。

例：「Tシャツ」というコレクションに属しており、S,M,L,XLと複数のバリエーションがある商品

試したこと

「main-collection-product-grid.liquid」の下記部分を修正したのですが、

出力されず困っております。。。

<ul id="product-grid" data-id="{{ section.id }}" class="grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop">
  {%- for product in collection.products -%}
    {%- if product.variants.size > 1 and product.collections contains 'tshirt' -%}
      {%- for variant in product.variants -%}
        <li class="grid__item">
          {% render 'card-product',
            card_product: product,
            media_aspect_ratio: section.settings.image_ratio,
            show_secondary_image: section.settings.show_secondary_image,
            show_vendor: section.settings.show_vendor,
            show_rating: section.settings.show_rating,
            lazy_load: false,
            show_quick_add: section.settings.enable_quick_add,
            section_id: section.id,
            current_variant: variant
          %}
        </li>
      {%- endfor -%}
    {%- else -%}
      <li class="grid__item">
        {% render 'card-product',
          card_product: product,
          media_aspect_ratio: section.settings.image_ratio,
          show_secondary_image: section.settings.show_secondary_image,
          show_vendor: section.settings.show_vendor,
          show_rating: section.settings.show_rating,
          lazy_load: false,
          show_quick_add: section.settings.enable_quick_add,
          section_id: section.id
        %}
      </li>
    {%- endif -%}
  {%- endfor -%}
</ul>

恐れ入りますがご教示お願いいたします。

[Qcoltd]

十分に検証しておりませんので、

うまく動作しなければ申し訳ございません。

product.collectionsは、collectionオブジェクトの配列ですので、

https://shopify.dev/docs/api/liquid/objects/collection

質問者様が設定されている「tshart」がhandleでしたら、

「tshart」に所属するかどうかの判定は下記のようになるのではないかと思います。

{% for collection in product.collections %}
  {% if collection.handle == 'tshart' %}
     <!-- tshartコレクションに所属している場合の処理 -->
  {% endif %}
{% endfor %}

したがいまして、コードは下記のようになるのではないかと思います。

<ul id="product-grid" data-id="{{ section.id }}" class="grid product-grid grid--{{ section.settings.columns_mobile }}-col-tablet-down grid--{{ section.settings.columns_desktop }}-col-desktop">
  {%- for product in collection.products -%}
  　　　　{%- assign isBelongToCollection == false -%}
　　　　  {%- for collection in product.collections -%}
 　　   {%- if collection.handle == 'tshart' -%}
     　　　{%- assign isBelongToCollection == true -%}
  　　  {%- endif -%}
　　　  {%- endfor -%}

    {%- if product.variants.size > 1 and isBelongToCollection -%}
      {%- for variant in product.variants -%}
        <li class="grid__item">
          {% render 'card-product',
            card_product: product,
            media_aspect_ratio: section.settings.image_ratio,
            show_secondary_image: section.settings.show_secondary_image,
            show_vendor: section.settings.show_vendor,
            show_rating: section.settings.show_rating,
            lazy_load: false,
            show_quick_add: section.settings.enable_quick_add,
            section_id: section.id,
            current_variant: variant
          %}
        </li>
      {%- endfor -%}
    {%- else -%}
      <li class="grid__item">
        {% render 'card-product',
          card_product: product,
          media_aspect_ratio: section.settings.image_ratio,
          show_secondary_image: section.settings.show_secondary_image,
          show_vendor: section.settings.show_vendor,
          show_rating: section.settings.show_rating,
          lazy_load: false,
          show_quick_add: section.settings.enable_quick_add,
          section_id: section.id
        %}
      </li>
    {%- endif -%}
  {%- endfor -%}
</ul>

ご参考まで。

(キュー田辺)