# ページネーションの並び順と表示件数を変えたい

**URL:** <https://community.shopify.com/t/topic/234152>\
**Category:** 技術的なQ＆A\
**Tags:** javascript, css, html\
**Created:** [July 20, 2023, 3:18am UTC](https://community.shopify.com/t/topic/234152 "2023-07-20T03:18:52Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

Shopifyのコレクション一覧ページで、ページネーションの並び順（新着順）と表示件数（6件）を変更しようとしたところ、「Array 'st' is not paginateable」というエラーが発生。

**問題の原因:**
- `paginate`タグで使用できるのはglobal変数のみ
- `sort`や`reverse`フィルターで加工した配列（`st`）はglobal変数ではないため、ページネーション対象にできない

**現状:**
- 元のコードではソートは可能だが表示件数の変更ができない
- 表示件数を変更するとソート機能が効かなくなる

**検証結果:**
- Dawn 10.0.0のまっさらな環境では表示件数の制御が正常に動作することを確認
- 質問者の環境では全コレクションが表示されてしまう（ページネーション自体は生成される）

**推測される要因:**
- カスタマイズしたアプリやテーマのカスタマイズが影響している可能性
- ページネーションのCSSカスタマイズが原因の可能性

**ステータス:** 根本原因の特定が困難なため、別の方法での実装や新規作成を検討中

<div class="post-metadata">

**Author:** ![hdm](https://avatars.discourse-cdn.com/v4/letter/h/8797f3/32.png) [@hdm](https://community.shopify.com/u/hdm)\
**Post date:** [July 20, 2023, 3:18am UTC](https://community.shopify.com/t/topic/234152/1 "2023-07-20T03:18:52Z")

</div>

ページネーションの並び順をソートしたく下記コードにてできないかと試しましたがエラーフロントにエラー文が出てしまいました。

Liquid error (sections/main-list-collections line 29): Array ‘st’ is not paginateable.

やりたいこととしてはpaginateの並び順変更（新着順）と表示件数を6に変更。

```auto
  {% assign st = collections | sort: 'published_at' | reverse %}
  {%- paginate st by 6 -%}
    <ul
      class="collection-list grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down"
      role="list"
    >
      {%- for collection in collections -%}
        <li
          class="collection-list __item grid__ item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
          {% if settings.animations_reveal_on_scroll %}
            data-cascade
            style="--animation-order: {{ forloop.index }};"
          {% endif %}
        >
          {% render 'card-collection',
            card_collection: collection,
            media_aspect_ratio: section.settings.image_ratio,
            columns: 3
          %}
        </li>
      {%- endfor -%}
    </ul>
    {% render 'pagination', paginate: paginate %}
  {%- endpaginate -%}

```

また、元々存在したコードではソートができていましたが表示件数が変更できなかったため上記でできればと思いました。

元コード

```auto
  {%- liquid
    case section.settings.sort
      when 'products_high', 'products_low'
        assign collections = collections | sort: 'all_products_count'
      when 'date', 'date_reversed'
        assign collections = collections | sort: 'published_at'
    endcase

    if section.settings.sort == 'products_high' or section.settings.sort == 'date_reversed' or section.settings.sort == 'alphabetical_reversed'
      assign collections = collections | reverse
    endif

    assign moduloResult = 28 | modulo: section.settings.columns_desktop
    assign paginate_by = 30
    if moduloResult == 0
      assign paginate_by = 28
    endif
  -%}
  {%- paginate lp by paginate_by -%}
    <ul
      class="collection-list grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down"
      role="list"
    >
      {%- for collection in collections -%}
        <li
          class="collection-list __item grid__ item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
          {% if settings.animations_reveal_on_scroll %}
            data-cascade
            style="--animation-order: {{ forloop.index }};"
          {% endif %}
        >
          {% render 'card-collection',
            card_collection: collection,
            media_aspect_ratio: section.settings.image_ratio,
            columns: 3
          %}
        </li>
      {%- endfor -%}
    </ul>
    {% render 'pagination', paginate: paginate %}
  {%- endpaginate -%}

```

こちらがソートできている理由と表示件数が変更できないのはなぜでしょうか。

paginate\_byの部分を6に変更してもだめでした。

for文にソートをかけてみましたがページ単位でのソートになってしまいこちらは意味がありませんでした。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [July 20, 2023, 7:57am UTC](https://community.shopify.com/t/topic/234152/2 "2023-07-20T07:57:58Z")

</div>

@hdm 様

興味があり調査してみました。

しかし、十分に調査できているとは言い難いので、あくまで一意見とお考えください。

```auto
 Shopify Array is not paginateable

```

で、Google検索しますと、質問者様と同様の問題についての質問と回答をいくつか見つけることができました。

例えば、下記の投稿が参考になります。

[https://stackoverflow.com/questions/63328694/liquid-error-array-collection-products-is-not-paginateable](https://stackoverflow.com/questions/63328694/liquid-error-array-collection-products-is-not-paginateable)

上記の投稿は質問者様の疑問そのものに回答する内容ではありませんが、

そのヒントは含まれていると思っていまして、

おそらく、

変数がpaginateableであるには、

global変数である必要があるのだと思います。

[https://shopify.dev/docs/api/liquid/objects/collections](https://shopify.dev/docs/api/liquid/objects/collections)

こちらを拝見すると、

collectionsはglobal変数のようです。

しかし、質問者様が定義された “st” はもちろん、global変数ではありません。

そして、global変数を新たに追加する方法を見つけることはできませんでした。

(一応、schemaを利用したワークアラウンドはあるようですが、そもそも、schemaで作った変数には、liquidから値を代入できなかったり、typeにcollectionsがないような気がするので、今回の件の解決には使えないように見受けられました。)

さて、

新しいglobal変数を追加することはできなくても、

既存のglobal変数に値をセットし直すことはできます。

ですので、下記のようにするのはいかがでしょうか？

```markup
{% assign st = collections | sort: 'published_at' | reverse %}
↓
{% assign collections = collections | sort: 'published_at' | reverse %}

```

> こちらがソートできている理由と表示件数が変更できないのはなぜでしょうか。

> paginate\_byの部分を6に変更してもだめでした。

テーマ「Dawn 10.0.0」のコレクション一覧画面にて、

質問者様が言及されている箇所と同等と思われる箇所に、

直接数字を入れてみたところ、

表示数を調整することができました。

私の環境では再現できないため、

こちらについては回答が難しいです。

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![hdm](https://avatars.discourse-cdn.com/v4/letter/h/8797f3/32.png) [@hdm](https://community.shopify.com/u/hdm)\
**Post date:** [July 26, 2023, 5:10am UTC](https://community.shopify.com/t/topic/234152/3 "2023-07-26T05:10:16Z")

</div>

質問へのご回答ありがとうございます。  
global変数ということで納得しました。

問題としてはソートをすると表示件数の制御が効かなくことについてですが、

同じくDawnのバージョン10.0.0で問題が発生しています。

コレクションがすべて表示されていますがページネーションが生成されているため、件数の制御はできているのに何らかの影響ですべて表示されていると思われていますが原因が分からず…

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [July 26, 2023, 8:33am UTC](https://community.shopify.com/t/topic/234152/4 "2023-07-26T08:33:29Z")

</div>

@hdm 様

> コレクションがすべて表示されていますがページネーションが生成されているため、件 数の制御はできているのに何らかの影響ですべて表示されていると思われていますが原因が分からず…

弊社の開発ストアですと、

下記のように、セクション \> main-list-collections.liquid にて、表示数を2に設定しますと、

 ![screenshot_20230726_02.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/2/c/2c141f26da253bb53ae5e0ad80bea425d3a68b9d.png)

下記のように、コレクションが8つ存在するため、1ページに2件表示され、全4ページとなります。

 ![screenshot_20230726_01.png](https://canada1.discourse-cdn.com/shopifyforum/original/2X/e/e61e170ee1e576ce629c97c17cbc93f48c08ddda.jpeg)

質問者様の場合、こうはならず、

ページネーション自体は生成されるが、

1ページに全てのコレクションが表示されてしまう、

ということですね。

Dawnをあまりカスタマイズせずに使用している場合、

上図のように期待通りの表示になると思うのですが、

そうならないということは、

質問者様が加えたカスタマイズや、導入したアプリの影響が考えられます。

例えば、

全く新しいDawnを追加し、それでページネーションのカスタマイズを行い、うまく表示されるようでしたら、質問者様のカスタマイズかアプリ導入が影響している、と言えるかと思います。

もし、

原因解明が難しそうでしたら、

プライベートメッセージでやりとりさせていただき、

コラボレーターアクセスを頂戴して、

私たちが直接ストアを確認してみることはできます。

(解決のお約束はできませんが。)

ご参考まで。

(キュー田辺)

---

<div class="post-metadata">

**Author:** ![hdm](https://avatars.discourse-cdn.com/v4/letter/h/8797f3/32.png) [@hdm](https://community.shopify.com/u/hdm)\
**Post date:** [August 4, 2023, 4:45am UTC](https://community.shopify.com/t/topic/234152/5 "2023-08-04T04:45:45Z")

</div>

ご回答ありがとうございます。

dawnの11.0.0ではありますがまっさらな状態で試したところうまく動作しました。

アプリ追加、カート回りや商品周りにをカスタマイズしていますがこちらがもしかしたら影響しているのかもしれません。

正直原因解明は難しそうなので別の方法かまた新しく作りなおしながら検証してみようと思います。

ありがとうございました。