FROM CACHE - jp_header
解決済

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

hdm
Shopify Partner
21 2 2

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

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

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

 

 

  {% 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 -%}

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

 

元コード

 

  {%- 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文にソートをかけてみましたがページ単位でのソートになってしまいこちらは意味がありませんでした。

 

1 件の受理された解決策

Qcoltd
Shopify Partner
1015 412 388

成功

@hdm 様

 

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

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

 

 Shopify Array is not paginateable

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

 

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

https://stackoverflow.com/questions/63328694/liquid-error-array-collection-products-is-not-paginatea...

 

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

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

おそらく、

変数がpaginateableであるには、

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

 

https://shopify.dev/docs/api/liquid/objects/collections

こちらを拝見すると、

collectionsはglobal変数のようです。

 

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

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

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

 

さて、

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

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

 

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

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

 

 

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

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

 

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

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

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

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

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

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

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

4件の返信4

Qcoltd
Shopify Partner
1015 412 388

成功

@hdm 様

 

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

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

 

 Shopify Array is not paginateable

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

 

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

https://stackoverflow.com/questions/63328694/liquid-error-array-collection-products-is-not-paginatea...

 

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

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

おそらく、

変数がpaginateableであるには、

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

 

https://shopify.dev/docs/api/liquid/objects/collections

こちらを拝見すると、

collectionsはglobal変数のようです。

 

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

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

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

 

さて、

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

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

 

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

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

 

 

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

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

 

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

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

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

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

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

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

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
hdm
Shopify Partner
21 2 2

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

 

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

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

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

Qcoltd
Shopify Partner
1015 412 388

@hdm 様

 

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

 

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

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

screenshot_20230726_02.png

 

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

screenshot_20230726_01.png

 

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

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

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

ということですね。

 

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

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

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

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

 

例えば、

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

 

もし、

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

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

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

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

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

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
hdm
Shopify Partner
21 2 2

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

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

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

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

 

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