Liquid、JavaScriptなどに関する質問
お世話になります。
類似の質問はありましたが、解決まで辿り着けませんでしたのでご質問させていただきます。
テンプレート: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 %}
動作確認をせず、コードを追ってみただけですので、誤りがある可能性がありますが、何かのヒントになれば幸いです。
まず、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
うまく活用することで、その違いを表現できるかと思います。
ご参考まで。
(キュー田辺)
Shopifyペイメント決済サービスを利用していて、ストアの管理画面の通知セクションに突然「Shopifyペイメントの使用を継続するために必要な情報」というバナーメッセージが表示さ...
By Mirai Dec 3, 2023すべてのShopifyアカウントはデフォルトではmyshopify.comのURLと関連付けられており、これはアカウント設定時に使用したビジネス名に基づいて作成されます。しかし、オ...
By Nina_13 Nov 26, 2023このトピックは英語版コミュニティの投稿:Shopify Web Pixel Manager Sandbox FAQの日本翻訳です。
By Mirai Nov 19, 2023