Liquid、JavaScriptなどに関する質問
テーマをカスタマイズして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 %}
おそらくですが、最後のJQueryの関数に渡しているソートのキーがTOPだと渡せていないので、常にデフォルトのソート順になっているのではと思います。
JQueryの関数に、alert やconsole.logを入れて、関数呼び出しをでバックしてみてはどうでしょうか?
コメントいただきありがとうございます。
いろいろ試してみましたが、解決できませんでした。
「常にデフォルトのソート順になっているのではと思います。」
というより、トップだとプルダウンにリストが表示されないので、
そもそもデータを渡せていないようです。
コレクションページだと、今選んでいるコレクションが、 {{ collection }} オブジェクトに挿入されますが、TOPページだとそれがないので、データが空なのではと思います。
/collection/all のページのコードを参考にしてみてください。
TOPでコレクション未選択でコレクションの商品を表示するのは、 {{ collections[1].product }} のような感じで、まずどのコレクションを使うか指定する必要があると思います。
コレクション横断にする場合はこれをcollectionの数分回します。 ストアのコレクションの数は、shop.collections_count で取れると思います。
https://shopify.dev/docs/themes/liquid/reference/objects/shop#shop-collections_count
Shopifyのチェックアウトは世界一コンバージョン率が高いチェックアウトです。2023年4月に実施された世界3大手マネジメントコンサルティング会社の共同調査によると、Sho...
By Minami_ Apr 11, 2024Shopifyのルーツ Shopifyは、スノーボードをオンラインで販売したいという夢を叶えるために2004年に誕生しました。当時は大企業だけがインターネットで販売す...
By JapanGuru Apr 7, 2024リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024