Liquid、JavaScriptなどに関する質問
表題の通り、コレクションページ内で売れ筋商品を一覧よりも上に表示したいと考えています。
イメージは上画像のような感じです。
上位3位まで表示されるようにしたいのです。
現状のコードは以下のとおりです。
{% assign ranking = collection.products | sort: 'best-selling' %} {% for product in ranking %} {% if forloop.index == 4 %} {% break %} {% else %} */ここにランキングカードの出力文が書かれています*/ {% endif %} {% endfor %}
sort: フィルターにどのようなものが使えるのか検索しましたが、探し当てることができませんでした。
Liquidのサンプルでは 'price' や 'title' が与えられていましたが・・・
またsort_by のオプションを変更すると出力されるものも一緒に変更されます(しかしながらそのソートとも異なる順番で表示されます。)やはり sort フィルターが効いていないと考えるべきなのでしょうか?
それとも現在売上がまだ無いのでだめなのでしょうか?
試しに3点ほどテスト注文してみましたが、順位に変動は見られませんでした。
解決方法、あるいはsort filter で使用可能なチートシート的なものがあればご教示願いたいです。
解決済! ベストソリューションを見る。
成功
ご返答ありがとうございます。
ご教示いただいたappは製品のリスト自体は自身で作成する必要があったため、やはり数百にも及ぶコレクションに設置するのは
骨が折れますね。。。ありがとうございました。
自己解決したので解決方法をこちらに提示いたします。
pageにcollectionのリストを表示する公式の方法からヒントを得て実装しました。
サンプルコードです。
{% assign all_collections = collections %} {% for col_obj in all_collections %} {% if col_obj.handle == collection.handle %} {% for product in col_obj.products limit: 3 %} <!-- ここに製品のカードを表示 3つだけ--> {% endfor %} {% endif %} {% endfor %}
非常にシンプルでした
collections オブジェクトは 通常のcollectionオブジェクトと異なり、全collectionオブジェクトを返すオブジェクトのようです。
ですので、collections オブジェクトをfor ループで回して 現在のcolllection オブジェクトのハンドルと比較し
一致したらそのオブジェクトからproductsオブジェクトを取り出すことで、
現在のcollectionの状況に関係しない(タグでのフィルタリングやソートの変更(URLクエリ)に左右されない)
リストを表示することができました。
※ただしベストセラー表示をするにはコレクションのデフォルトソートをベストセラーに統一する必要があります。
応用すれば、コレクションページやプロダクトページ問わず、ランキング表示スペースを設けることができます。
例えば、プロダクトページに、そのプロダクトが属するコレクションの売れ筋TOP5を表示するなど・・・
日本のECシーンではよく見るリコメンドをかんたんに実装できます。
同じようなことを考えている方の参考になれば幸いです。
liquidのチートシートは以下になります。
https://www.shopify.com/partners/shopify-cheat-sheet
sortは基本的にそのobjectに存在する項目のみでかつ、全ての項目がsort可能ではないかと思います。(どの項目でsort可能かの情報は確かに明示されていません)
また、売れ筋で並べるということは、商品の価格ではなくて、その商品の累計売り上げをチェックしなくてはならないので、 liquid単体だと難しいかと思います。
簡単な方法としては、売れ筋をあらかじめタグ設定しておき、タグでsortしてみるとかがあります。
もしくはアプリなどでそういったものがあるかもしれません。(レコメンドの派生機能など)
あとは、自動コレクションを使って一定の条件に一致するコレクションを生成する方法もあります(在庫が一定以下=売れ筋と見立てるなど)
ご回答ありがとうございます。
チートシート、ブックマークさせていただきました。
やはりliquidだけでは厳しいのでしょうか。。。
商品点数がおおく、またそれに付随してコレクション数もかなりの数になりそうですので
自動でliquid側から出力されたらなぁ~って希望的観測からでした。。。
外部サーバーのJSONは読み込みができたので、JSONをそれ用に毎日生成して読み込むようにでもしますかね。
コレクションとプロダクトの対照表みたいなのを作るの非常に面倒そうですが・・・
ご存じでしたらついでにお伺いしたいのですが
コレクションページにほかのコレクションを表示したりは可能なのでしょうか。
defalt_sort_byのなかにbest-sellingがあるので
デフォルトを全部売り上げ順に設定して、コレクションページでself_handleみたいなことができたら
最高なのですが。
なかなか難しいですね。。。
確かにコレクションの並び順にベストセラーがあるので、コレクション単位ならこれでカバーできると思います。
コレクションのなかにコレクションを埋める方法ですが、Buy Button Appをインストールすると、コレクション単位のBuy Buttonのコードを生成できます。これを別のこれククションのテーマに貼り付けると、コレクションの中に別のコレクションが埋め込まれるかもしれません。(検証はしていないです)
成功
ご返答ありがとうございます。
ご教示いただいたappは製品のリスト自体は自身で作成する必要があったため、やはり数百にも及ぶコレクションに設置するのは
骨が折れますね。。。ありがとうございました。
自己解決したので解決方法をこちらに提示いたします。
pageにcollectionのリストを表示する公式の方法からヒントを得て実装しました。
サンプルコードです。
{% assign all_collections = collections %} {% for col_obj in all_collections %} {% if col_obj.handle == collection.handle %} {% for product in col_obj.products limit: 3 %} <!-- ここに製品のカードを表示 3つだけ--> {% endfor %} {% endif %} {% endfor %}
非常にシンプルでした
collections オブジェクトは 通常のcollectionオブジェクトと異なり、全collectionオブジェクトを返すオブジェクトのようです。
ですので、collections オブジェクトをfor ループで回して 現在のcolllection オブジェクトのハンドルと比較し
一致したらそのオブジェクトからproductsオブジェクトを取り出すことで、
現在のcollectionの状況に関係しない(タグでのフィルタリングやソートの変更(URLクエリ)に左右されない)
リストを表示することができました。
※ただしベストセラー表示をするにはコレクションのデフォルトソートをベストセラーに統一する必要があります。
応用すれば、コレクションページやプロダクトページ問わず、ランキング表示スペースを設けることができます。
例えば、プロダクトページに、そのプロダクトが属するコレクションの売れ筋TOP5を表示するなど・・・
日本のECシーンではよく見るリコメンドをかんたんに実装できます。
同じようなことを考えている方の参考になれば幸いです。
ご回答ありがとうございます。素晴らしい!はい、次回同様の質問を探される方はこのページがヒットすることを願います笑
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024