📁

【Shopify.dev和訳】Themes/Architecture/Templates/collection

2021/09/17に公開

Shopify

themes

tech

この記事について

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

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

Shopify アプリのご紹介

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

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

コレクション

collectionテンプレートは、コレクション内のすべての製品を一覧表示するコレクションページをレンダリングします。

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

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

コレクションをフィルタリングする

ストアフロントフィルタリングを使用して、コレクションを製品のより小さなサブセットにフィルタリングできます。

コレクション内の商品の並べ替え

コレクションページのsort_byURL パラメーターを使用して、製品を並べ替える順序を選択できます。

https://my-store.myshopify.com/collections/frontpage?sort_by=price-descending

コレクションオブジェクトを介して、以下にアクセスできます。

sort_options属性で使用可能なオプション。
sort_by属性によって現在選択されているオプション（選択されている場合）。
default_sort_by属性を持つデフォルトオプション。

利用可能なオプションを<select>要素に出力して、顧客が選択できるようにしたり、現在のオプションとデフォルトのオプションに基づいてセレクターを初期化したりできます。新しい選択が行われたら、JavaScript を使用して URL パラメーターを追加し、ページを更新する必要があります。

以下は、ソート順セレクターとそれに付随する JavaScript の簡単な例です。

Example

<select id="sort-by">
  {% assign sort_by = collection.sort_by | default: collection.default_sort_by %}

  {% for option in collection.sort_options %}
    <option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>
      {{ option.name }}
    </option>
  {% endfor %}
</select>

<script>
  Shopify.queryParams = {};

  // 既存のクエリパラメータを保持する
  if (location.search.length) {
    var params = location.search.substr(1).split('&');

    for (var i = 0; i < params.length; i++) {
      var keyValue = params[i].split('=');

      if (keyValue.length) {
        Shopify.queryParams[decodeURIComponent(keyValue[0])] = decodeURIComponent(keyValue[1]);
      }
    }
  }

  // 選択変更時にsort_byクエリパラメータを更新します
  document.querySelector('#sort-by').addEventListener('change', function(e) {
    var value = e.target.value;

    Shopify.queryParams.sort_by = value;
    location.search = new URLSearchParams(Shopify.queryParams).toString();
  });
</script>

ページ付け製品

商品はコレクションオブジェクトのproducts属性からアクセスでき、1 ページあたり 50 の制限があります。このため、コレクションの商品にページを付けて、すべての商品にアクセスできるようにする必要があります。

Example

{% paginate collection.products by 20 %}
  {% for product in collection.products %}
    <!-- product info -->
  {% endfor %}

  {{ paginate | default_pagination }}
{% endpaginate %}

Shopify アプリのご紹介

Discussion

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