Shpifyでは商品一覧はURLのパラメーターで並び替えができるようになっています。この記事では
- どういった並び替えの方法があるのか
- ドロップダウンリスト等から動的に変更する方法
- タグで絞り込む方法
について紹介していきます！
商品一覧を自在に操りたい方は参考にしていただければと思います。
Shopifyが商品一覧で生成するURL
まずは、Shopifyが商品一覧ページでどういったURLを生成するかについて見ていきましょう！
すべての商品
すべて商品は/collections/all/というURLで以下のように生成されます。
https://your-shop.myshopify.com/collections/all/タグ一覧
商品を登録する際に「タグ」を登録できるかと思います。このタグを分類して一覧にすることができたります。そのときに生成されるURLが、先ほどのすべての商品のURLに「タグ名」を追加した/collections/all/[タグ名]といった形式となります。
https://your-shop.myshopify.com/collections/all/tag-name登録時の以下の部分ですね。
コレクション一覧
商品を一括にするShopiyの代表的な機能としてコレクションがあります。こちらも一覧用のページが生成されます。形式としては/collections/[コレクション名]です。
https://your-shop.myshopify.com/collections/collection-name商品管理 → コレクションから登録している部分です。
商品一覧にパラメーターを追加して並び替える
商品一覧に対してgetパラメーターを加えるだけで商品を並び替えることが可能です。Shopifyの据え膳感がすごいです。詳しくは以下を参考にしてください。
→ The collection object
パラメーターの型としてはsort_by=best-sellingとして、sort_byのキーで以下で紹介する各並び替えが実現できるようになります。
すべての商品、タグ一覧、コレクション一覧の全てで並び替えが可能です。
※ 以下は「すべての商品」のURLを例にして紹介していきます。
おすすめ
おすすめ順に並び替える場合は、manualの値を使います。
https://your-shop.myshopify.com/collections/all/?sort_by=manualベストセラー
売れ行き順で並び替える場合は、best-sellingの値を使います。
https://your-shop.myshopify.com/collections/all/?sort_by=best-sellingタイトル順, A-Z
タイトル順で並び替える場合は、title-ascendingの値を使います。この場合は「あ」から並ぶようなイメージです。
https://your-shop.myshopify.com/collections/all/?sort_by=title-ascendingアルファベット順, Z-A
タイトル順で並び替える場合は、title-descendingの値を使います。この場合は「ん」から並ぶようなイメージです。
https://your-shop.myshopify.com/collections/all/?sort_by=title-descending価格の安い順
価格の安い順で並び替える場合は、price-ascendingの値を使います。
https://your-shop.myshopify.com/collections/all/?sort_by=price-ascending価格の高い順
価格の高い順で並び替える場合は、price-descendingの値を使います。
https://your-shop.myshopify.com/collections/all/?sort_by=price-descending古い商品順
日付の古い順で並び替える場合は、created-ascendingの値を使います。
https://your-shop.myshopify.com/collections/all/?sort_by=created-ascending新着順
日付の新しい順で並び替える場合は、created-descendingの値を使います。
https://your-shop.myshopify.com/collections/all/?sort_by=created-descendingこのように、sort_byパラメーターを使うことで簡単に並び替えができるようになっています。
動的に並びかえるためのJavaScript
商品一覧の並び替えの仕組みが分かったところで、デフォルトのテーマにあるような商品の並び替えをドロップダウンリストから操作できるようにjavaScriptを書いてみます。
ドロップダウンリストを作成
collection.sort_optionsに並び替えのアイテムが格納されているので、ドロップダウンリストを作っていきます。
<label for="sort_by">並び替え</label>
<select id="sort_by" name="sort_by">
{% for option in collection.sort_options %}
<option value="{{ option.value }}" {% if option.value == collection.sort_by %}selected{% endif %}>{{ option.name }}</option>
{% endfor %}
</select>ドロップダウンリストの変更を検知する
続いてドロップダウンリストの変更を検知しましょう。JavaScriptでイベントを生成してあげます。
<script>
const selectElement = document.querySelector("#sort_by");
selectElement.addEventListener("change", function(event) {
console.log("変更されました", event.target.value);
});
</script>変更されました title-ascendingのような感じで、選択された値を取得できていることが分かります。
URLの生成
変更時にURLを再生成してリダイレクトさせてあげましょう。コードが長くなってしまい恐縮ですが、前半のまとまりがparametersを生成しています。現状のgetパラメーターを取得しているイメージです。
そして後半ではドロップダウンリストを検知して、前半で取得したパラメーターのparameters.sort_byを書き換えるといった処理を行っています。ドロップダウンリストで選択されたパラメーターを付与し直して並び替えを行っているといった処理ですね。
<script>
let parameters = {};
if (location.search.length) {
let keyValue = "";
let couples = location.search.substr(1).split('&');
for (let i = 0; i < couples.length; i++) {
keyValue = couples[i].split('=');
if (keyValue.length > 1) {
parameters[decodeURIComponent(keyValue[0])] = decodeURIComponent(keyValue[1]);
}
}
}
const selectElement = document.querySelector("#sort_by");
selectElement.addEventListener("change", function(event) {
parameters.sort_by = event.target.value;
const url = Object.keys(parameters).map(function(key) {
return encodeURIComponent(key) + '=' + encodeURIComponent(parameters[key])
}).join('&');
location.search = url;
});
</script>詳しくは以下が参考になります。
→ Reorder module to drop inside collection.liquid – may need CSS love.
（おまけ）タグでも並び替える
同様にタグもドロップダウンリストで選択すると同時に切り替えると言ったことをやってみましょう。考え方としては似ていますが、タグの場合はパラメーターではなく直接のURLを生成するという流れになります。
公式としては以下のドキュメントが詳しいです。
→ The collection object
ドロップダウンリストの作成
まずは、すべてのタグのドロップダウンリストを作成しましょう。collection.all_tagsから取得可能です。
<label for="tags">タグ</label>
<select id="tags" name="tags">
<option value="">すべて</option>
{% for tag in collection.all_tags %}
<option value="{{ tag | handle }}" {% if current_tags contains tag %}selected{% endif %}>{{ tag }}</option>
{% endfor %}
</select>ドロップダウンリストの変更を検知してリダイレクト
ドロップダウンリストの変更を検知するイベントを登録し、選択されたタグに対してリダイレクトする処理を行っています。具体的には、タグが設定されていれば、そのタグへのパスを指定し、タグがなければ（「すべて」が選ばれたら）すべての商品一覧に遷移するようにしました。
<script>
const tagsElement = document.querySelector("#tags");
tagsElement.addEventListener("change", function(event) {
if (event.target.value) {
window.location.href = "/collections/all/" + event.target.value;
} else {
window.location.href = "/collections/all/";
}
});
</script>おわり
Shopifyで商品を並び替える仕組みとJavaScriptで動的にソートする方法についてまとめました。並び替えのパラメーターを事前に用意してくれているあたりShopifyはさすがですね。
並び替えの自作に迫られた際はご参考にしていただければと思います。
