FROM CACHE - jp_header
解決済

collection 内でのランキング表示をしたいのですが、sortフィルターがうまく動作しません。売上順に並べたものを常に一番上に表示したいと考えています。

WEBUILD
Shopify Partner
39 11 41

表題の通り、コレクションページ内で売れ筋商品を一覧よりも上に表示したいと考えています。

 

image.png

 

イメージは上画像のような感じです。
上位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 で使用可能なチートシート的なものがあればご教示願いたいです。

 

1 件の受理された解決策
WEBUILD
Shopify Partner
39 11 41

成功

ご返答ありがとうございます。
ご教示いただいた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シーンではよく見るリコメンドをかんたんに実装できます。

同じようなことを考えている方の参考になれば幸いです。

元の投稿で解決策を見る

5件の返信5

junichiokamura
Community Manager
1200 280 506

liquidのチートシートは以下になります。

https://www.shopify.com/partners/shopify-cheat-sheet

 

sortは基本的にそのobjectに存在する項目のみでかつ、全ての項目がsort可能ではないかと思います。(どの項目でsort可能かの情報は確かに明示されていません)

 

また、売れ筋で並べるということは、商品の価格ではなくて、その商品の累計売り上げをチェックしなくてはならないので、 liquid単体だと難しいかと思います。

 

簡単な方法としては、売れ筋をあらかじめタグ設定しておき、タグでsortしてみるとかがあります。

 

もしくはアプリなどでそういったものがあるかもしれません。(レコメンドの派生機能など)

 

あとは、自動コレクションを使って一定の条件に一致するコレクションを生成する方法もあります(在庫が一定以下=売れ筋と見立てるなど)

 

Senior Partner Solutions Engineer
WEBUILD
Shopify Partner
39 11 41

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

チートシート、ブックマークさせていただきました。

やはりliquidだけでは厳しいのでしょうか。。。
商品点数がおおく、またそれに付随してコレクション数もかなりの数になりそうですので
自動でliquid側から出力されたらなぁ~って希望的観測からでした。。。
外部サーバーのJSONは読み込みができたので、JSONをそれ用に毎日生成して読み込むようにでもしますかね。
コレクションとプロダクトの対照表みたいなのを作るの非常に面倒そうですが・・・

ご存じでしたらついでにお伺いしたいのですが
コレクションページにほかのコレクションを表示したりは可能なのでしょうか。
defalt_sort_byのなかにbest-sellingがあるので
デフォルトを全部売り上げ順に設定して、コレクションページでself_handleみたいなことができたら

最高なのですが。

なかなか難しいですね。。。

junichiokamura
Community Manager
1200 280 506

確かにコレクションの並び順にベストセラーがあるので、コレクション単位ならこれでカバーできると思います。

 

コレクションのなかにコレクションを埋める方法ですが、Buy Button Appをインストールすると、コレクション単位のBuy Buttonのコードを生成できます。これを別のこれククションのテーマに貼り付けると、コレクションの中に別のコレクションが埋め込まれるかもしれません。(検証はしていないです)

Senior Partner Solutions Engineer
WEBUILD
Shopify Partner
39 11 41

成功

ご返答ありがとうございます。
ご教示いただいた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シーンではよく見るリコメンドをかんたんに実装できます。

同じようなことを考えている方の参考になれば幸いです。

junichiokamura
Community Manager
1200 280 506

 ご回答ありがとうございます。素晴らしい!はい、次回同様の質問を探される方はこのページがヒットすることを願います笑

Senior Partner Solutions Engineer