📁

【Shopify.dev和訳】Themes/Architecture/Templ.../list-collections

2021/09/18に公開約3,000字

この記事について

この記事は、Themes/Architecture/Templates/list-collectionsの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

リストコレクション

list-collectionsテンプレートは、ストアのすべてのコレクションを一覧表示するコレクションリストページをレンダリングします。このページはショップの/ collectionsURL にあります。


コレクションオブジェクト

Liquidコレクションオブジェクトにアクセスして、ストアのコレクションを表示できます。


コレクションの順序を変更する

通常、このテンプレートには、コレクションをアルファベット順に出力する表示を出力するための、コレクションを介した次のループが含まれています。

{% for collection in collections %}
  <!-- collection info -->
{% endfor %}

順序を変更する場合は、目的の順序でコレクションをホストするメニューを作成し、メニュー項目をループすることができます。この方法を使用する場合は、販売者が使用するメニューを選択できるように設定を作成する必要があります。Liquidリンクリストオブジェクトを介してメニューにアクセスし、リンクタイプに基づいてコレクションのメニュー項目をフィルタリングし、リンクオブジェクト.を介してコレクション情報にアクセスできます。

{% for link in settings.collection_list_menu %}
  {% if link.type == 'collection_link' %}
    {% assign collection = link.object %}

    <!-- collection info -->
  {% endif %}
{% endfor %}

コレクション画像のフォールバック

コレクションにコレクション画像がない場合のフォールバックが必要です。たとえば、コレクション内の最初の商品の画像を使用できます。

{% if collection.image %}
  {{ collection.image | img_url: '450x450' | img_tag: collection.image.alt }}
{% else %}
  {% assign alt = collection.title | escape %}
  {{ collection.products.first.image | img_url: '450x450' | img_tag: alt }}
{% endif %}

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

https://apps.shopify.com/shopify-application-314?locale=ja&from=daniel

Shopify アプリである、「らくらく日本語フォント設定|リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

https://apps.shopify.com/font-picker-1?locale=ja&from=daniel

Discussion

ログインするとコメントできます