Zenn
Open2

【Shopify】ページネーション

Eiji Saito | UnReact Inc.Eiji Saito | UnReact Inc.

ページネーションの雛形

下記に、paginate オブジェクトやタグの和訳記事を載せておきます。

paginate タグ
https://qiita.com/eijiSaito/items/1dcee7a82e47a7b20560#paginate

paginate オブジェクト
https://qiita.com/eijiSaito/items/1c608e37d60322de87ac#pagenate-オブジェクト

part オブジェクト
https://qiita.com/eijiSaito/items/37769a88d95e67a38253#part-オブジェクト

セクションファイル

section.liquid
{% paginate collection.products by 1 %}
  {% for product in collection.products %}
    <p>{{ product.title }}</p>
  {% endfor %}
  {% render "pagination", paginate:paginate %}
{% endpaginate %}

{% paginate collection.products by 1 %}では、何ページに分割するかを指定します。
たとえば、by 1にすると、1ページに1商品だけを表示することができます。

この{% paginate %}{% endpaginate %}で囲まれた中では、paginateオブジェクトをしようすることができます。

{% render "pagination", paginate:paginate %}として、paginateオブジェクトを渡すことで、
スニペットの中でもpaginateオブジェクトを使用することができます。

スニペットファイル

snippet.liquid
{%- if paginate.parts.size > 0 -%}
    <nav role="navigation" aria-label="{{ 'general.pagination.label' | t }}">
      <ul role="list" class="tw-flex tw-justify-center tw-items-center tw-mx-auto">
      {%- if paginate.previous -%}
        <li class="tw-mx-3">
          <a href="{{ paginate.previous.url }}" aria-label="{{ 'general.pagination.previous' | t }}">
            <
          </a>
        </li>
      {%- endif -%}

      {%- for part in paginate.parts -%}
        <li class="tw-mx-2">
          {%- if part.is_link -%}
            <a href="{{ part.url }}" aria-label="{{ 'general.pagination.page' | t: number: part.title }}">{{ part.title }}</a>
          {%- else -%}
            {%- if part.title == paginate.current_page -%}
              <span class="tw-font-bold tw-border-b tw-border-black" aria-current="page" aria-label="{{ 'general.pagination.page' | t: number: part.title }}">{{ part.title }}</span>
            {%- else -%}
              <span>{{ part.title }}</span>
            {%- endif -%}
          {%- endif -%}
        </li>
      {%- endfor -%}

      {%- if paginate.next -%}
        <li class="tw-mx-3">
          <a href="{{ paginate.next.url }}" aria-label="{{ 'general.pagination.next' | t }}" >
            >
          </a>
        </li>
      {%- endif -%}
      </ul>
    </nav>
{%- endif -%}

part.titleの挙動

ページネーションの挙動は以下のようになります。




ページネーションの最初と最後のページは必ず表示されます。
他の数字は現在表示しているページの前後2ページ分の数字が表示されるみたいです。

Eiji Saito | UnReact Inc.Eiji Saito | UnReact Inc.

schemaで指定したオブジェクトのページネーション

schemaのコレクションピッカーで追加した、コレクションでは、ページネーションの実装はできない、、

ページ分割認定はされるけど、商品が切り分けて表示されない、、、