Liquid、JavaScriptなどに関する質問
ページネーションの並び順をソートしたく下記コードにてできないかと試しましたがエラーフロントにエラー文が出てしまいました。
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文にソートをかけてみましたがページ単位でのソートになってしまいこちらは意味がありませんでした。
解決済! ベストソリューションを見る。
成功
@hdm 様
興味があり調査してみました。
しかし、十分に調査できているとは言い難いので、あくまで一意見とお考えください。
Shopify Array is not paginateable
で、Google検索しますと、質問者様と同様の問題についての質問と回答をいくつか見つけることができました。
例えば、下記の投稿が参考になります。
上記の投稿は質問者様の疑問そのものに回答する内容ではありませんが、
そのヒントは含まれていると思っていまして、
おそらく、
変数が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」のコレクション一覧画面にて、
質問者様が言及されている箇所と同等と思われる箇所に、
直接数字を入れてみたところ、
表示数を調整することができました。
私の環境では再現できないため、
こちらについては回答が難しいです。
ご参考まで。
(キュー田辺)
成功
@hdm 様
興味があり調査してみました。
しかし、十分に調査できているとは言い難いので、あくまで一意見とお考えください。
Shopify Array is not paginateable
で、Google検索しますと、質問者様と同様の問題についての質問と回答をいくつか見つけることができました。
例えば、下記の投稿が参考になります。
上記の投稿は質問者様の疑問そのものに回答する内容ではありませんが、
そのヒントは含まれていると思っていまして、
おそらく、
変数が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」のコレクション一覧画面にて、
質問者様が言及されている箇所と同等と思われる箇所に、
直接数字を入れてみたところ、
表示数を調整することができました。
私の環境では再現できないため、
こちらについては回答が難しいです。
ご参考まで。
(キュー田辺)
質問へのご回答ありがとうございます。
global変数ということで納得しました。
問題としてはソートをすると表示件数の制御が効かなくことについてですが、
同じくDawnのバージョン10.0.0で問題が発生しています。
コレクションがすべて表示されていますがページネーションが生成されているため、件数の制御はできているのに何らかの影響ですべて表示されていると思われていますが原因が分からず...
@hdm 様
> コレクションがすべて表示されていますがページネーションが生成されているため、件 数の制御はできているのに何らかの影響ですべて表示されていると思われていますが原因が分からず...
弊社の開発ストアですと、
下記のように、セクション > main-list-collections.liquid にて、表示数を2に設定しますと、
下記のように、コレクションが8つ存在するため、1ページに2件表示され、全4ページとなります。
質問者様の場合、こうはならず、
ページネーション自体は生成されるが、
1ページに全てのコレクションが表示されてしまう、
ということですね。
Dawnをあまりカスタマイズせずに使用している場合、
上図のように期待通りの表示になると思うのですが、
そうならないということは、
質問者様が加えたカスタマイズや、導入したアプリの影響が考えられます。
例えば、
全く新しいDawnを追加し、それでページネーションのカスタマイズを行い、うまく表示されるようでしたら、質問者様のカスタマイズかアプリ導入が影響している、と言えるかと思います。
もし、
原因解明が難しそうでしたら、
プライベートメッセージでやりとりさせていただき、
コラボレーターアクセスを頂戴して、
私たちが直接ストアを確認してみることはできます。
(解決のお約束はできませんが。)
ご参考まで。
(キュー田辺)
ご回答ありがとうございます。
dawnの11.0.0ではありますがまっさらな状態で試したところうまく動作しました。
アプリ追加、カート回りや商品周りにをカスタマイズしていますがこちらがもしかしたら影響しているのかもしれません。
正直原因解明は難しそうなので別の方法かまた新しく作りなおしながら検証してみようと思います。
ありがとうございました。
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024