FROM CACHE - jp_header

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

takumakuta
Shopify Partner
6 0 0

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

 

 

コレクションページに

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

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

 

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

takumakuta_0-1677038889158.png

 

試したこと

 

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>

 

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

 

 

 

1件の返信1

Qcoltd
Shopify Partner
1051 429 413

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

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

 

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>

 

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/