Shopify 商品の表示件数案内 （全〇〇件中 １〜〇〇件）の作り方

今回案件の中で使うことのあった、ECサイトの商品一覧ページで見かける 全〇〇件中 １〜〇〇件 の作り方を紹介します。（上の画像みたいなやつ）
ページネーションと連動して今のページに表示されている商品件数を案内するものです。

　まずはコードから

全{{ paginate.items }}件中
{% assign page_count = paginate.page_size %} 
{% assign page_offset = paginate.current_offset | plus: 1 %}
{% if paginate.previous and paginate.next %}
  {%- comment -%} 前も次もある {%- endcomment -%}
  {{ page_offset }}〜{{ paginate.current_offset | plus: page_count }}

{% elsif paginate.next %}
  {%- comment -%} 次がある（一番最初） {%- endcomment -%}
  1〜{{ page_count }}
  
{% elsif paginate.previous %} 
  {%- comment -%} 前がある（一番最後）{%- endcomment -%}
  {% if page_offset == paginate.items %}
    {%- comment -%} 一番最後が一件のみの時 {%- endcomment -%}
    〜{{ page_offset }}
  {% else %}
    {%- comment -%} 一番最後表示件数 {%- endcomment -%}
    {{ page_offset }}〜{{ paginate.items }}
  {% endif %}
{% else %}
  {%- comment -%} 最初のページで全てが表示される時 {%- endcomment -%}
  {{ paginate.items }}
{% endif %}
件

　オブジェクトの説明

　paginate.page_size　
　1ページに表示されるアイテムの数

　paginate.current_offset　
　現在のページより前のページにあるアイテムの総数

　| plus: 1　
　Liquidの足し算

　paginate.next　
　次へのリンクを返します

　paginate.previous　
　前へのリンクを返します

　paginate.items
　ページネーションで管理されているアイテムの総数。全〇〇件中の〇〇の部分

コードの説明

{% assign page_count = paginate.page_size %}
{% assign page_offset = paginate.current_offset | plus: 1 %}
この二行で現在のページに表示されるアイテム数と現在のページまでのアイテム数を変数に代入しています。

{% if paginate.previous and paginate.next %}
{{ page_offset }}〜{{ page_offset | plus: page_count }}
前もある、次もあるページかを判別して、そのページであれば、今までのページのアイテム数＋１ 〜 今までのページのアイテム数＋ページに表示されるアイテム数

{% elsif paginate.next %}
1〜{{ page_count }}
上記の条件に当てはまらないということは、一番最初のページが一番最後のページになります。
次がるので一番最初。一番最初であれば、 １〜 ページに表示されるアイテム数

{% elsif paginate.previous %}
上記までの条件に当てはまらない→　前と次（両方）はない、次はない、ので一番後ろ

{% if page_offset == paginate.items %}
{{ page_offset }}
{% else %}
{{ page_offset }}〜{{ paginate.items }}
{% endif %}
一番最後のページで、今までのページ＋１（現在のページの一番最初に表示されるアイテム数） イコール （アイテムの総数） の時は、一番最後のページに表示されるアイテムの数が、１件なので、〜今までのページ＋１。それ以外は、一番最後のページに表示されるアイテムが複数あるので、今までのページのアイテム数＋１ 〜 今までのページのアイテム数＋ページに表示されるアイテム数

{% else %}
{{ page_count }}
{% endif %}
上記までの条件に当てはまらないということは、（前＋次、次、前 がない）ということは、次のページに行くほどのアイテム数がないので、一番最初のページに全てが表示されている状態。
ページネーションで管理されているアイテムの総数

＃ まとめ

私の環境上で動作確認は行っていますが…もっとスマートな方法があるのかもしれませんし、間違っているかもしれません。（間違っていた場合はその都度この記事を修正します。）
その時はごめんなさい。
ですが、よく見かける機能なのでコードを書くのが苦手な方は参考にされてみてください。

参考：https://shopify.dev/docs/themes/liquid/reference/objects/paginate#paginate-page_size