今回は、Shopifyの検索機能とソートについて書いていきます。
アプリを使わずにShopifyのデフォルトの機能を使って、検索フィルターやソートをさせたいという要望があり機能を実装しますが、どうゆうロジックになっているかわからない。やどこの値がヒットしているのか分からないと言う質問が多いので、ここでまとめておこうかと…。
ついでにこの記事が他の方の参考になれば、幸いです！
OS.１.０で検索機能
OS.1.0で使用できるのは、コレクションはタグでの絞り込み、検索はキーワード検索になります。
コレクションページでの絞り込み
| 機能 | 説明 | 対応 |
|---|---|---|
| キーワード検索 | キーワードによる絞り込み | 出来ない |
| タグによる絞り込み | コレクションAのタグBを含むもの | /collections/a/b |
| 複数タグによる絞り込み | コレクションAのタグBとCを含むもの | /collections/a/b+c |
検索結果のキーワード検索
URLが検索ページに飛ばされるタイプの検索機能です。
参考： https://help.shopify.com/ja/manual/online-store/storefront-search
| 機能 | 説明 | 対応 |
|---|---|---|
| 文字数 | 最低検索文字数 | ひらがな、カタカナ、漢字３文字 （漢字は２つ１組でもヒットする) |
| 似た言葉 | 似たような言葉にヒットするか？ ひらがな、カタカナは区別するか？ |
全文字一致（りんごとリンゴは別物） |
| アンド検索 | AとBを含む | A B （間を半角スペースで繋ぐ） |
| オア検索 | AまたはBを含む | A OR B （半角スペースとORで繋ぐ） |
| 除外検索 | AのBを含まない | A -B(半角スペースと-で繋ぐ） |
| プリフィックス検索 | Aで始まる | A\* （ワードと\*で繋ぐ） |
| 検索の対象を特定のものにしたい | Aのタイトルを含む Bのタグを含む |
title:A tag:B (対象：ワード） |
| フレーズ検索 | アンドじゃなく一つの用語として認識させたい時 | "A B" |
検索の対象になる値
| 検索のタイプ | ヒットする値 |
|---|---|
| 商品 | ・タイトル ・商品タイプ ・商品説明 ・タグ ・販売者 ・バリエーションタイトル ・バリエーションSKU ・バリエーションバーコード |
| ページ | ・タイトル ・本文 ・著者 |
| ブログ記事 | ・タイトル ・タグ ・本文 ・著者 |
商品タグのヒット条件について
商品のタグしか調べられていませんが、商品タグのヒット条件には少しクセがありました。
A、B、Cとタグがあり、各値がヒットするかどうかではなく、商品タグ全てをひとまとめにして、その値がヒットするかどうかみたいになっています。
検索キーワード： 冷凍便
商品タグ： 冷凍、送料無料、定期便
上の条件でヒットしてしまいます。
基本検索キーワードに対して全文ヒットになっているので、商品タグに「冷凍便」とうキーワードがないとヒットしないように思いますが、「冷凍」＋「便(定期便の便)」でヒットしているようです。（なので、定期便のタグを外すとヒットしなくなる）
なので、予測ではありますが
tags: ["冷凍","送料無料","定期便"]
ではなく
tags: "冷凍,送料無料,定期便"
のような形で検索しているのかも知れません。
OS.2.0で追加された検索機能
OS.２.0で追加された検索機能は、商品タイプやメタフィールドの値を指定して絞り込むタイプのフィルター機能です。
(値などの細い設定はこちらで確認してください）
参考： https://shopify.dev/themes/navigation-search/filtering/storefront-filtering
初期設定
よく忘れがちなのですが、この機能を利用するには
・コレクションや検索ページのファイルタイプがJSON形式じゃないと有効化出来ない
・管理画面 ＞ オンラインストア ＞ メニュー ＞ コレクションと検索の絞り込みで設定した値でないとフィルタリング出来ない
開発ストアと本番が分かれていて、リリース前に引っ越した時に、動かない！！なんで！！って流れをよくやるのでご注意！
検索できること
フィルター機能は、コレクション・検索どちらでも使用可能です。
（組み合わせに制限があります）
| 要件 | 可能かどうか |
|---|---|
| 商品、バリエーションで特定して絞り込めるか | 出来る |
| 商品の絞り込みの対象 | 商品タイプ 販売者 メタフィールド |
| バリエーションの絞り込み対象 | オプションで指定しているもの （カラーやサイズなど） |
各ページでの検索・絞り込み機能組み合わせ
| ページ | OS.1.0 | OS.2.0 | 1.0 + 2.0 |
|---|---|---|---|
| コレクション | 可能 | 可能 | 不可 |
| 検索結果 | 可能 | 可能 | 可能 |
コレクションページだけ、１.０と２.０の組み合わせが出来ないので注意が必要です。
例:
全ての商品を、販売者hogeで絞り込んで、尚且つfugaタグを含むものは出来ないです。
/collections/all?filter.p.vendor=hoge/fuga ←これは出来ない
/collections/all/fuga?filter.p.vendor=hoge ←これも出来ない
ソート（並び替え機能）
各ページで、並び替えの出来る値が決められています。
コレクション
| 項目 | 説明 | 値 |
|---|---|---|
| 新着順 | 作成された日時が新しい順 | created-descending |
| 古い順 | 作成された日時が古い順 | created-ascending |
| A-Z | タイトルがAからZ順(数字→A-Z→あーん） | title-ascending |
| Z-A | タイトルがZからA順（んーあ、Z-A、数字） | title-descending |
| 価格が高い順 | 販売価格が高い順 | price-descending |
| 価格が安い順 | 販売価格が安い順 | price-ascending |
| ベストセラー | 商品の売れ行き（よく売れている）順 | best-selling |
| 手動 | 管理画面で設定した並び順 | manual |
検索結果
| 項目 | 説明 | 値 |
|---|---|---|
| 価格が高い順 | 販売価格が高い順 | price-descending |
| 価格が安い順 | 販売価格が安い順 | price-ascending |
| 新着順 | 新着の購入可能順→売り切れの購入可能順 | ソートパラメーターなしの時 |
同じ値で並んだ時の並び(同じタイトルや同じ金額など)
| 項目 | 説明 |
|---|---|
| 新着・古い順 | 基本同時に作成されることはない |
| A-Z | 価格の高い順→古い順 |
| Z-A | 価格の低い順→新しい順 |
| 高価 | 新着順 |
| 安価 | 古い順 |
※ 商品登録はAPIを使えば、同時刻に複数件登録は可能だが、検証が大変なので今回はやってません。ごめんなさい。
※ 同じ売れ行き条件にするのが大変だったため、同じ売れ行きだった場合の検証もやってません。ごめんなさい。
まとめ
今回は、エンジニアさん向けではなく、どちらかというとディレクターさん向けかと…。
私自身も、知識の復習、深掘り、検証ができたのでよかったと思います。
あの時は出来ないと言いましたが、今回検証したら出来ちゃいました！なんてこともあります…〇〇さんごめんなさい。
ですが、よく聞かれる「これできますか？」、「これどうなってますか？」に、毎回Shopifyを再確認しに行くことなく、自信を持って返答出来そうです。
不足していたり分かりにくかったりするところもあるかと思いますが…。
この記事が誰かの役にたってもらえたら嬉しいですー！