セクション内でタブごとにコレクションを配置したい

日本語 ディスカッション 技術的なQ＆A
1

お世話になります。

類似の質問はありましたが、解決まで辿り着けませんでしたのでご質問させていただきます。

テンプレート：Dawn

featured-collectionを流用しています。

やりたいこと：・・・・・

同一セクション内でタブごとに別のコレクションを配置

設置まではできたのですが、同じコレクションが表示されており、行き詰まっています。

タブごとにコレクションを分岐する方法はありますでしょうか？

 

{%- for block in section.blocks -%} 

 

 

  

    ## {{ block.settings.title | escape }}

    {%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
      {{ 'sections.featured_collection.view_all' | t }}
    {%- endif -%}
  

  

  {%- if section.settings.show_view_all and more_in_collection -%}
    

      
        {{ 'sections.featured_collection.view_all' | t }}
      
    

  {%- endif -%}

 

 

 
  

  

    ## {{ block.settings.title | escape }}

    {%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
      {{ 'sections.featured_collection.view_all' | t }}
    {%- endif -%}
  

  

  {%- if section.settings.show_view_all and more_in_collection -%}
    

      
        {{ 'sections.featured_collection.view_all' | t }}
      
    

  {%- endif -%}

 

 

{% endfor %}


{% schema %}
{
  "name": "テスト",
  "max_blocks": 2,
  "settings": [
    {
        "type": "range",
        "id": "products_to_show",
        "min": 2,
        "max": 20,
        "step": 2,
        "default": 4,
        "label": "t:sections.featured-collection.settings.products_to_show.label"
    },
    {
        "type": "checkbox",
        "id": "show_view_all",
        "default": true,
        "label": "t:sections.featured-collection.settings.show_view_all.label"
    },
    {
        "type": "checkbox",
        "id": "swipe_on_mobile",
        "default": false,
        "label": "t:sections.featured-collection.settings.swipe_on_mobile.label"
    },
    {
        "type": "header",
        "content": "t:sections.featured-collection.settings.header.content"
    },
    {
        "type": "select",
        "id": "image_ratio",
        "options": [
            {
                "value": "adapt",
                "label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
            },
            {
                "value": "portrait",
                "label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
            },
            {
                "value": "square",
                "label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
            }
        ],
        "default": "adapt",
        "label": "t:sections.featured-collection.settings.image_ratio.label"
    },
    {
        "type": "checkbox",
        "id": "show_secondary_image",
        "default": false,
        "label": "t:sections.featured-collection.settings.show_secondary_image.label"
    },
    {
        "type": "checkbox",
        "id": "add_image_padding",
        "default": false,
        "label": "t:sections.featured-collection.settings.add_image_padding.label"
    },
    {
        "type": "checkbox",
        "id": "show_image_outline",
        "default": true,
        "label": "t:sections.featured-collection.settings.show_image_outline.label"
    },
    {
        "type": "checkbox",
        "id": "show_vendor",
        "default": false,
        "label": "t:sections.featured-collection.settings.show_vendor.label"
    },
    {
        "type": "checkbox",
        "id": "show_rating",
        "default": false,
        "label": "t:sections.featured-collection.settings.show_rating.label",
        "info": "t:sections.featured-collection.settings.show_rating.info"
    }

  ],
  "blocks": [
    {
        "type": "collection",
        "name": "Season",
        "settings": [
            {
                "type": "collection",
                "id": "collection",
                "label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label"
            }
        ]
    }
  ],
  "presets": [
    {
        "name": "Collection tabs",
        "category": "Season",
        "blocks": [
            {
                "type": "collection"
                
            },
            {
                "type": "collection"
            }
        ]
    }
  ]
}
{% endschema %}
2

動作確認をせず、コードを追ってみただけですので、誤りがある可能性がありますが、何かのヒントになれば幸いです。

まず、schemaのblocksでコレクションを複数設定し、タブごとにそれらのコレクションを適用したい、というご質問で合っていますでしょうか？

もし、合っていましたら、

下記のようにされてはいかがでしょうか？

{%- for block in section.blocks -%} 

 

  

    ## {{ block.settings.title | escape }}

    {%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
      {{ 'sections.featured_collection.view_all' | t }}
    {%- endif -%}
  

  

  {%- if section.settings.show_view_all and more_in_collection -%}
    

      
        {{ 'sections.featured_collection.view_all' | t }}
      
    

  {%- endif -%}

 

{% endfor %}

全てのコードを精査するのが大変だったので、

S1とS0には、タブのdata-contentの違いしかない、という前提でコードを書いています。

もし、S1とS0に他に違いがあったとしても、

liquidのfor文では、

forloopオブジェクトが使用できますので、

https://shopify.dev/api/liquid/objects/for-loops

うまく活用することで、その違いを表現できるかと思います。

ご参考まで。

(キュー田辺)