Shopifyでランキングを作成する(アプリとコレクション不使用/ほぼコピペでOK)
[追記:2024.7.2]
記事公開時点からShopify Flowはアップデートされ、メタオブジェクトも登場し、当記事よりも優れた方法が存在する可能性が高くなりました。
しかしながら当記事の内容もまだ参考になるかなということもあり、有料部分を値下げしました。
Dawn v9時点での記事のため、別テーマに入れ込む場合と同様だと考えていただき、CSSの調整が必要になる可能性がある点には留意ください。
目的
最新から最大100件までの注文を対象としたランキング(=販売数順に商品を表示)セクションを作成する
アプリやコレクションは使わない
各部の色変更、多通貨対応、除外商品、セール価格表示などの機能を実装
コレクションのベストセラーは期間のような範囲指定ができませんが、当記事の方法であれば最新からある程度の範囲までという指定が可能です。
厳密にいえば少し違いますが「最近売れた商品」に近い役割としても使えます。
コレクションのベストセラーの問題点
期間が指定できないため、ランキング内の商品が想定よりも固定化されやすくなる可能性があります。
いつも同じ商品が並んでいると新鮮さを感じにくくなり、リピーターへの訴求力が低減すると思われます。
対して当記事の方法であれば、期間指定ではありませんが最新からの注文数という形で範囲が絞れるため、新鮮さをそれなりに保てると思います。
ただし長期間を対象としたロングセラーのようなランキングを表示させることはできません。
手法の検討
当記事ではアプリや外部サーバーへのデータ保存などの手段は用いず、コレクションのベストセラーも用いず、Shopify Flowとメタフィールドを使った以下の手順での実装を試みます。
Shopify Flowを使い注文情報を取得してメタフィールドに保存する
テーマファイル側でliquidを使いメタフィールドから値を取り出して商品リストを出力する
Shopify Flowの留意点
liquidのsplitフィルターによる配列作成ができない
オブジェクトをそのまま丸ごと出力できない
メタフィールドの留意点
上記では文字数の最大数が65535文字となっています。
アプリのMetafields Guruを使って実際に65536文字以上を入力して試すと、以下のエラーが出て保存できませんでした。
Can't exceed 65536 characters.
他方、少し古いですが上記では制限に達せずともデータが取れなくなるという書き込みもありました。
前述と同様にMetafields Guruを使って65535文字を保存した状態で値が取り出せるか実験したところ、問題なく表示できました。
多少の不安はありますが、いずれにしても制限は確実に存在するので最大限で保存しようとせず、確実に安全なラインを意識して保存した方が良いと思われます。
サンプルコード
以降にサンプルコードを記載しますが、大半はコピーペーストで作業を進められます。
ただしいくつか注意点がありますので、購入を検討される方は確認ください。
注意点
Shopify Flowを使えることが必須です
アプリほどの自由度はないのでそれなりに制限事項があります
開発ストアで動作を確認していますが、本番ストアでの確認をしておらず、コードを使用した際に損害が発生しても責任を負いかねますので自己責任でお願いします
Dawn(ver 9.0.0)テーマで確認していますが、他のテーマで使用する場合はCSSの干渉があるかもしれません
試作であることに加え詳細な説明は記載していないので、機能の追加や改変にはShopifyのテーマカスタマイズの知識が必要です
返金不可設定にしており質問も受け付けられませんので、不安なら迷わずアプリを探して使用してください。高機能で便利で手厚いサポートが受けられるはずです。
ここから先は
¥ 1,500
この記事が気に入ったらチップで応援してみませんか？