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

art_o_shi
新規メンバー
5 0 0

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

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

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

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

<div class="form-horizontal">
{% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
<label for="sortBy" class="small--hide">{{ 'collections.sorting.title' | t }}</label>
<select name="sort_by" aria-describedby="a11y-refresh-page-message" id="sortBy">
{% for option in collection.sort_options %}
<option value="{{ option.value }}"{% if sort_by == option.value %} selected="selected"{% endif %}>{{ option.name }}</option>
{% endfor %}
</select>
</div>

<script>
Shopify.queryParams = {};
if (location.search.length) {
for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
aKeyValue = aCouples[i].split('=');
if (aKeyValue.length > 1) {
Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
}
}
}

$(function() {
$('#sortBy')
// select the current sort order
.val('{{ collection.sort_by | default: collection.default_sort_by | escape }}')
.bind('change', function() {
Shopify.queryParams.sort_by = jQuery(this).val();
location.search = jQuery.param(Shopify.queryParams).replace(/\+/g, '%20');
}
);
});
</script>

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

{% if collection.description != blank %}
<header class="section-header">
<h1 class="section-header--title h1">{{ collection.title }}</h1>
<div class="rte rte--header">
{{ collection.description }}
</div>
</header>
<hr{% if has_sidebar %} class="hr--offset-left"{% endif %}>
<div class="section-header">
<div class="section-header--right">
{% include 'collection-sorting' %}
{% include 'toggle-filters' %}
</div>
</div>
{% else %}
<header class="section-header">
<h1 class="section-header--title section-header--left h1">{{ collection.title }}</h1>
<div class="section-header--right">
{% include 'collection-sorting' %}
{% include 'toggle-filters' %}
</div>
</header>
{% endif %}

 

 

0 件の「いいね!」
junichiokamura
Community Manager
Community Manager
1077 248 421

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

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

Technical Partner Manager, Japan
0 件の「いいね!」
art_o_shi
新規メンバー
5 0 0

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

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

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

0 件の「いいね!」
junichiokamura
Community Manager
Community Manager
1077 248 421

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

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

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

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

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

 

Technical Partner Manager, Japan
0 件の「いいね!」