Shopifyストアのコレクション商品一覧におけるページネーションの付け方についてLiquidのサンプルコードを交えて解説します。また、カスタマイズ画面で直観的に修正ができる方法も紹介します。
先日ブログの記事一覧にページネーションを付ける方法について投稿しました。
ご興味のある方はぜひご一読ください。
【Liquid小技】自作のブログ記事に「ページネーション」を実装する方法
今回は、ブログ記事一覧ではなく商品一覧におけるページネーションの付け方について解説します。
ページネーションを付ける上での注意点
まず、注意点について。
この記事で紹介するページネーション付きの記事一覧は、コレクションページでのみ有効な方法です。
方法としては、
①セクションを作成
②コレクションのデフォルトテンプレートを修正
※②に関しては、Liquidファイルを直接修正するか、カスタマイズ画面＞コレクションにて既存の一覧(たとえば、グリッド一覧)を削除(or非表示)し、セクションとして自作一覧を追加する方法になります。（個人的には、カスタマイズ画面＞コレクションで、既存の一覧を非表示にしています）
※カスタマイズ画面とは、Shopifyテーマで用意されているビジュアルエディタ、ビルダーのような画面。テーマエディタともいいます。
もし、ページネーション付きの「商品一覧」セクションを作ってトップ画面とかに付けると、ほとんどうまく動作しません。ページネーションの仕組上、新しいURLのページを生成するからです。
ページネーション付き「商品一覧」サンプルコード
では、サンプルコードを見ていきましょう。
{% schema %}
{
"name": "商品一覧ページネーション",
"presets": [
{
"name": "商品一覧ページネーション"
}
],
}
{% endschema %}
{%- paginate collection.all_products by 4-%}
<div class="section-{{ section.id }}-padding gradient color-{{ section.settings.color_scheme }}">
<div class="container productBox">
<ul class="collection-products">
{%- for product in collection.all_products -%}
<li class="collection-product-item">
<a href="{{ product.url }}">
<div class="collection-product-image">
<img src="{{ product.featured_image.src | img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}">
</div>
<div class="collection-product-info">
<div class="collection-product-title"><p>{{ product.title }}</p></div>
<div class="collection-product-price">{{ product.price | money }}</div>
</div>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{%- if paginate.pages > 1 -%}
{%- render 'pagination', paginate: paginate -%}
{%- endif -%}
{%- endpaginate -%}ではコードを解説します。
ページネーション実装のために必要なコードは以下の３つ。
まず、記事一覧(ループ)を囲む{%- paginate collection.all_products by 4-%}と{%- endpaginate -%}<。この構文により、4商品を１つのページとするページネーションが出来上がります。
次は、現在のページや全体のページ数、次のページや前のページへのリンクなどの表示。
{%- if paginate.pages > 1 -%}
{%- render 'pagination', paginate: paginate -%}
{%- endif -%}
これは「ページが1ページより多かったら」という条件分岐。すなわち、2ページ以上(ここでは5記事以上)であれば、記事一覧の下に「1、2、3」のようにページ番号がとリンクが表示するようにという「if文」です。
{%- render 'pagination', paginate: paginate -%}
のrenderは、Shopifyのパーツテンプレートをレンダリングする役割を持っています。後ろのpaginate: paginateは、現在のページや全体のページ数、次のページや前のページへのリンクなどを取得・表示する役割を持っています。
コレクションを設定していないのに？
実は、このLiquid文には「どのコレクションの一覧にする」という「指定」が施されておりません。
本来であれば、コレクションのハンドル(URL)などを使って指定するのですが、ここではcollection.all_productsと、ストア内のすべてのコレクションを指定しています。
では、どうやって指定もしていないのに、特定のコレクションの一覧が表示されるのでしょうか。
冒頭でも話しましたが、このサンプルコードはコレクションページのみで有効です。そのため、特定のコレクションページにこれを（サンプルコード）をセクション追加すると、（当たり前かもしれませんが）そのコレクションに属する商品の一覧が表示されるのです。
ページごとの表示件数をカスタマイズ画面で指定
{%- paginate collection.all_products by 4-%}だと、１つページに４つの商品が表示されます。表示件数を変えたいなら、「4」を別の数字に修正すればOK。
もう１つの方法として、カスタマイズ画面で直観的に修正ができる方法もあります。
カスタマイズ画面での指定ができるようにするためには、スキーマ設定が必要です。{% schema %}と{% endschema %}の以下の「setting」コードを挿入します。
"settings": [
{
"id": "product_limit",
"type": "range",
"label": "表示数を選択",
"min": 1,
"max": 12,
"step": 1,
"default": 6
}
],カスタマイズ画面でセクション追加をしてみると、サイドバーに以下のような記事件数指定ができるボックスが生成されます。
以下にてコードを簡単に説明しておきます。
①「id」は表示精進数設定のID
②「type」は「range(幅)」で、数が指定できる。
③「min」は「最低件数」。ここでは「１」。
④「max」は「最多件数」。ここでは「１２」。
⑤「step」はレンジを動かすときに増減する数。ここでは「１」。
⑥「default」はデフォルト件数。ここでは「６」。
スキーマ設定をした後は、これをLiquidに反映させる必要があります。
{%- paginate collection.all_products by 4-%}を{%- paginate collection.all_products by section.settings.product_limit-%}に修正する事により、カスタマイズ画面で指定した件数でページネーションが作られます。
以上、ページネーション付きの「コレクション商品一覧」の作り方をサンプルコードを交えて説明しました。
