メタフィールドを使用してコレクション一覧ページを作成中で、3つのメタフィールドを配置している。
現在の課題:
実装内容:
表示速度改善のためにページネーションを追加したいが、具体的な実装方法についてアドバイスを求めている状況。
お世話になります。
現在、新規メタフィールドを作成して、コレクション一覧ページを作成しております。
（上記コレクション一覧ページには、3つのメタフィールドを配置しております。）
こちらのコレクション一覧ページに表示される数が多いため、ページネーションを作成したいのですが、作成方法が不明で困っております。
どなたか、実装方法をご存知の方がいらっしゃいましたら、教えて頂けますと助かります。
例でお伝えしますと、絵画通販ページを制作しております。
画家さんのお名前、写真、代表作を各メタフィールドで作成しており、コレクション一覧ページへと抽出しております。
現状掲載者が約200名ほどいらっしゃいますので、表示スピードが遅くなってしまい改善の為にページネーションをつけようとしておりますが、難航している状況です。
今後も、画家さんの掲載は増えていく想定です。
ご教授頂けますととても、助かります。
どうぞ、よろしくお願いいたします。
利用されているテーマによっては実際のLiquidコードは異なりますが、コレクションでページネーションを実現する基本的なコードの構成は下記になります。
{% paginate collection.products by 24 %}
{% for product in collection.products -%}
<!-- 商品情報 -->
{%- endfor %}
{{- paginate | default_pagination }}
{% endpaginate %}
上記の {% paginate collection.products by 24 %} の24が1ページに表示される商品数であり、{{- paginate | default_pagination }} がページネーションを出力します。
下記が参考です。
基本、このようにすればうまくいくと思うのですが、どこで詰まっていらっしゃいますか？
ご参考まで。
(キュー田辺)
親切にご回答を頂きまして、ありがとう御座います。
ご返信にお時間を頂戴し、失礼いたいました。
こちらの実装がうまくお伝え出来ておらず、すみません。
恐れ入りますが、頂きました内容は自分の方でも理解出来ております。
特定のメタフィールドで絞り込んだ状態でのコレクション一覧に
ページネーションをつけたい。がこちらの要望になります。
ご存知でしたら、ご教授頂けますと幸いです。
どうぞ、よろしくお願いいたします。
特定のメタフィールドで絞り込んだ状態でのコレクション一覧にページネーションをつけたい。がこちらの要望になります。
そういうことでしたか。
失礼いたしました。
絞り込みはどのように行なっていらっしゃいますか？
書き込まれている内容から推測しますと、Liquid上でメタフィールドで絞り込んでいるのでしょうか？
もし、Liquid上で絞り込んだ値を格納する独自の配列を用意されている場合、paginateタグでページネーションできるのは、こちらに記載の通り、下記の配列でしかpaginateはできまないことになりますので、実現は難しいです。
一番簡単なのは、下記のShopifyアプリでメタフィールドでの絞り込みを実装可能することです。
このアプリを利用して絞り込んだ場合、URLがちょっと長くなってしまいますが、デフォルトのコレクションページのLiquidコードのままでメタフィールドによるソートを実現できるかと思います。
どうしてもLiquidで実装されたい場合は、ページネーションを完全に自作し、URLに?page=2といったパラメータがついているときに、メタフィールドでソートして作った配列をオフセットしてあげれば良いかと思いますが、これを実装するコードを提示するのはちょっと大変です。
サイドキックやChatGPTに質問してみるとコードを提示してくれるかもしれませんのでお試しください。
もしどうしてもできない場合は、有料になりますが、弊社にてご相談に乗ることも可能です。
ご参考まで。
(キュー田辺)
[email removed]QcoltdShopify Partner
(キュー田辺)様
いえいえ、こちらこそです。
きちんとご要望をお伝え出来ておらず、すみません。
ご回答をありがとうございます。
絞り込みはご指摘の通りです。
Liquid上でメタフィールドで絞り込んでおりました。
こちらのご教授いただきました方法で、一旦実装を試みます。
親切なご対応を誠にありがとう御座いました。
引き続き、どうぞ宜しくお願いいたします。
(キュー田辺)様
先日はご親切にご回答を頂きまして、ありがとう御座いました。
大変恐れ入ります、こちらご回答いただきました、Search & DiscoveryAPPでの実装は不可能な様でした。自分の実装方法が間違っているのかもしれませんが、
こちらがきちんと仕様をお伝えできていない点もあり、大変恐れ入ります。
現状特定のメタフィールドは商品ではなく、コレクションに設定しております。
商品に紐づいているメタフィールドでしたら、ページネーションの実装は可能と思いますが、
コレクションに実装しておりますメタフィールドは、Search & DiscoveryAPPでは、そもそも絞り込み検索へ紐づけることが仕様的に不可能なのではないかと思います。＝shopifyの仕様同様の認識です。
(キュー田辺)様へ、ご意見をお伝えしたい訳ではありません。
お気を悪くしないで頂けますと助かります。
この実装を試みているユーザもいらっしゃるかなと思いましたので、
共有の意味も込めて投稿しております。
やはり、スクラッチで実装するしかなさそうですね。
クライアントにそこまでの開発予算は今回はないので、一旦こちらは、諦めます。
ご親切にご回答をありがとう御座いました。