FROM CACHE - jp_header

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

Reythm
訪問者
1 0 0

お世話になります。

 

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

 

テンプレート:Dawn

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

 

やりたいこと:・・・・・

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

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

 

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

 

 

<div class="tab-contents"><!-- タブコンテンツはじまり --> 

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


<!-- S1 --> 

<div class="tab-contents-item" data-content="0"><!-- タブはじまり --> 

<div class="collection page-width{% if section.settings.swipe_on_mobile == true and block.settings.collection.all_products_count > 2 and section.settings.products_to_show > 2 %} page-width-desktop{% endif %}">
  <div class="title-wrapper-with-link{% if block.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if block.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}">
    <h2 class="title{% if block.settings.title == blank %} title--no-heading{% endif %}">{{ block.settings.title | escape }}</h2>

    {%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
      <a href="{{ block.settings.collection.url }}" class="link underlined-link large-up-hide">{{ 'sections.featured_collection.view_all' | t }}</a>
    {%- endif -%}
  </div>

  <slider-component class="slider-mobile-gutter">
    <ul class="grid grid--2-col product-grid{% if products_to_display == 4 or block.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if block.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.show_view_all == false or block.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and block.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">
      {%- for product in block.settings.collection.products limit: section.settings.products_to_show -%}
        <li class="grid__item{% if block.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}">
          {% render 'product-card',
            product_card_product: product,
            media_size: section.settings.image_ratio,
            show_secondary_image: section.settings.show_secondary_image,
            add_image_padding: section.settings.add_image_padding,
            show_vendor: section.settings.show_vendor,
            show_image_outline: section.settings.show_image_outline,
            show_rating: section.settings.show_rating
          %}
        </li>
      {%- else -%}
        {%- for i in (1..4) -%}
          <li class="grid__item">
            {% render 'product-card-placeholder' %}
          </li>
        {%- endfor -%}
      {%- endfor -%}
    </ul>
    {%- if block.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 -%}
      <div class="slider-buttons no-js-hidden{% if block.settings.collection.all_products_count < 4 %} medium-hide{% endif %}{% if block.settings.collection.all_products_count < 3 %} small-hide{% endif %}">
        <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
        <div class="slider-counter caption">
          <span class="slider-counter--current">1</span>
          <span aria-hidden="true"> / </span>
          <span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
          <span class="slider-counter--total">{{ products_to_display }}</span>
        </div>
        <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
      </div>
    {%- endif -%}
  </slider-component>

  {%- if section.settings.show_view_all and more_in_collection -%}
    <div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
      <a href="{{ block.settings.collection.url }}"
        class="button"
        aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: block.settings.collection.title }}"
      >
        {{ 'sections.featured_collection.view_all' | t }}
      </a>
    </div>
  {%- endif -%}
</div>

</div><!-- タブおわり --> 









<!-- S0 --> 


<div class="tab-contents-item" data-content="1"><!-- タブはじまり --> 
  
<div class="collection page-width{% if section.settings.swipe_on_mobile == true and block.settings.collection.all_products_count > 2 and section.settings.products_to_show > 2 %} page-width-desktop{% endif %}">
  <div class="title-wrapper-with-link{% if block.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if block.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}">
    <h2 class="title{% if block.settings.title == blank %} title--no-heading{% endif %}">{{ block.settings.title | escape }}</h2>

    {%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
      <a href="{{ block.settings.collection.url }}" class="link underlined-link large-up-hide">{{ 'sections.featured_collection.view_all' | t }}</a>
    {%- endif -%}
  </div>

  <slider-component class="slider-mobile-gutter">
    <ul class="grid grid--2-col product-grid{% if products_to_display == 4 or block.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if block.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.show_view_all == false or block.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and block.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">
      {%- for product in block.settings.collection.products limit: section.settings.products_to_show -%}
        <li class="grid__item{% if block.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}">
          {% render 'product-card',
            product_card_product: product,
            media_size: section.settings.image_ratio,
            show_secondary_image: section.settings.show_secondary_image,
            add_image_padding: section.settings.add_image_padding,
            show_vendor: section.settings.show_vendor,
            show_image_outline: section.settings.show_image_outline,
            show_rating: section.settings.show_rating
          %}
        </li>
      {%- else -%}
        {%- for i in (1..4) -%}
          <li class="grid__item">
            {% render 'product-card-placeholder' %}
          </li>
        {%- endfor -%}
      {%- endfor -%}
    </ul>
    {%- if block.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 -%}
      <div class="slider-buttons no-js-hidden{% if block.settings.collection.all_products_count < 4 %} medium-hide{% endif %}{% if block.settings.collection.all_products_count < 3 %} small-hide{% endif %}">
        <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
        <div class="slider-counter caption">
          <span class="slider-counter--current">1</span>
          <span aria-hidden="true"> / </span>
          <span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
          <span class="slider-counter--total">{{ products_to_display }}</span>
        </div>
        <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
      </div>
    {%- endif -%}
  </slider-component>

  {%- if section.settings.show_view_all and more_in_collection -%}
    <div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
      <a href="{{ block.settings.collection.url }}"
        class="button"
        aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: block.settings.collection.title }}"
      >
        {{ 'sections.featured_collection.view_all' | t }}
      </a>
    </div>
  {%- endif -%}
</div>

 
</div><!-- タブおわり --> 



{% endfor %}


</div><!-- タブコンテンツおわり --> 

 

 

{% 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 %}

 

 

1件の返信1
Qcoltd
Shopify Partner
935 373 355

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

 

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

 

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

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

 

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

<div class="tab-contents-item" data-content="{{ forloop.index0 }}"><!-- タブはじまり --> 

<div class="collection page-width{% if section.settings.swipe_on_mobile == true and block.settings.collection.all_products_count > 2 and section.settings.products_to_show > 2 %} page-width-desktop{% endif %}">
  <div class="title-wrapper-with-link{% if block.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}{% if block.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} title-wrapper--self-padded-tablet-down{% endif %}">
    <h2 class="title{% if block.settings.title == blank %} title--no-heading{% endif %}">{{ block.settings.title | escape }}</h2>

    {%- if section.settings.show_view_all and section.settings.swipe_on_mobile and more_in_collection -%}
      <a href="{{ block.settings.collection.url }}" class="link underlined-link large-up-hide">{{ 'sections.featured_collection.view_all' | t }}</a>
    {%- endif -%}
  </div>

  <slider-component class="slider-mobile-gutter">
    <ul class="grid grid--2-col product-grid{% if products_to_display == 4 or block.settings.collection == blank %} grid--2-col-tablet grid--4-col-desktop{% else %} grid--3-col-tablet{% endif %}{% if products_to_display > 5 %} grid--one-third-max grid--4-col-desktop grid--quarter-max{% endif %}{% if block.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider slider--tablet grid--peek{% endif %}{% if section.settings.show_view_all == false or block.settings.collection.products.size < section.settings.products_to_show %} negative-margin{% endif %}{% if section.settings.show_view_all and block.settings.collection.products.size > section.settings.products_to_show %} negative-margin--small{% endif %}" role="list">
      {%- for product in block.settings.collection.products limit: section.settings.products_to_show -%}
        <li class="grid__item{% if block.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide{% endif %}">
          {% render 'product-card',
            product_card_product: product,
            media_size: section.settings.image_ratio,
            show_secondary_image: section.settings.show_secondary_image,
            add_image_padding: section.settings.add_image_padding,
            show_vendor: section.settings.show_vendor,
            show_image_outline: section.settings.show_image_outline,
            show_rating: section.settings.show_rating
          %}
        </li>
      {%- else -%}
        {%- for i in (1..4) -%}
          <li class="grid__item">
            {% render 'product-card-placeholder' %}
          </li>
        {%- endfor -%}
      {%- endfor -%}
    </ul>
    {%- if block.settings.collection.all_products_count > 2 and section.settings.swipe_on_mobile and section.settings.products_to_show > 2 -%}
      <div class="slider-buttons no-js-hidden{% if block.settings.collection.all_products_count < 4 %} medium-hide{% endif %}{% if block.settings.collection.all_products_count < 3 %} small-hide{% endif %}">
        <button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
        <div class="slider-counter caption">
          <span class="slider-counter--current">1</span>
          <span aria-hidden="true"> / </span>
          <span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
          <span class="slider-counter--total">{{ products_to_display }}</span>
        </div>
        <button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
      </div>
    {%- endif -%}
  </slider-component>

  {%- if section.settings.show_view_all and more_in_collection -%}
    <div class="center{% if section.settings.swipe_on_mobile %} small-hide medium-hide{% endif %}">
      <a href="{{ block.settings.collection.url }}"
        class="button"
        aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: block.settings.collection.title }}"
      >
        {{ 'sections.featured_collection.view_all' | t }}
      </a>
    </div>
  {%- endif -%}
</div>

</div><!-- タブおわり --> 

{% endfor %}

 

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

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

 

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

liquidのfor文では、

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

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

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

 

ご参考まで。

(キュー田辺)

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