商品ソートがトップページで機能しない

日本語 ディスカッション 技術的なQ＆A

AI-generated summary

TOPページに全商品を表示するようテーマをカスタマイズしたところ、コレクションページでは動く商品ソートがTOPでは機能しない問題。提示されたcollection-sorting.liquid自体は同じでも、TOPではプルダウンの選択肢が出ず、ソート用データが渡っていない状態と整理された。

主な見解:

  • コレクションページでは現在のコレクション情報がcollectionオブジェクトに入るが、TOPページでは通常これが存在しない。
  • そのためcollection.sort_byやcollection.sort_optionsが空になり、JS以前にLiquid側で必要な値を生成できていない可能性が高い。

提案された対応:

  • jQueryにalertやconsole.logを入れて値の受け渡しを確認する。
  • /collections/allの実装を参考にする。
  • TOPで表示する場合は、どのコレクションを使うか明示的に指定する。複数コレクション横断なら各コレクションを個別に処理する必要がある可能性がある。shop.collections_countも参照先として提示された。

結論は未解決で、TOP用にcollection依存の実装を見直す必要がある。

1

テーマをカスタマイズしてTOPページに全商品リストを表示させたのですが、テーマに実装されているソート機能がTOPページでは機能しません。

コレクションページでは問題なく動作しますので、下記のcollection-sorting.liquidをカスタマイズしないといけないと思われるのですが、

どこを編集すればいいか分かりません。

分かる方がいましたら、ご教示いただけますと幸いです。

{% assign sort_by = collection.sort_by | default: collection.default_sort_by %} {{ 'collections.sorting.title' | t }}

ソート機能の読み込み側のソースは以下のようになっており、TOPページ、collectionページともに違いはありません。

{% if collection.description != blank %}

{{ collection.title }}

{{ collection.description }}
{% include 'collection-sorting' %} {% include 'toggle-filters' %}
{% else %}

{{ collection.title }}

{% include 'collection-sorting' %} {% include 'toggle-filters' %}
{% endif %}
2

おそらくですが、最後のJQueryの関数に渡しているソートのキーがTOPだと渡せていないので、常にデフォルトのソート順になっているのではと思います。

JQueryの関数に、alert やconsole.logを入れて、関数呼び出しをでバックしてみてはどうでしょうか？

3

コメントいただきありがとうございます。
いろいろ試してみましたが、解決できませんでした。

「常にデフォルトのソート順になっているのではと思います。」

というより、トップだとプルダウンにリストが表示されないので、
そもそもデータを渡せていないようです。

4

コレクションページだと、今選んでいるコレクションが、 {{ collection }} オブジェクトに挿入されますが、TOPページだとそれがないので、データが空なのではと思います。

/collection/all のページのコードを参考にしてみてください。

TOPでコレクション未選択でコレクションの商品を表示するのは、 {{ collections[1].product }} のような感じで、まずどのコレクションを使うか指定する必要があると思います。

コレクション横断にする場合はこれをcollectionの数分回します。 ストアのコレクションの数は、shop.collections_count で取れると思います。

https://shopify.dev/docs/themes/liquid/reference/objects/shop#shop-collections_count