今回は検索結果に表示される内容を商品だけに絞り込みたいについてです！
Dawnでは、テーマのカスタム機能に検索結果に表示される内容を商品、ページ、記事どれかに絞り込んで表示させる機能がありません。
なので、直接コードを触って、表示されるものを絞り込んであげる必要があります。
コードの記載箇所さえ分かれば、難しいコードを書く必要がないので、非エンジニアの方もぜひ参考にされてください。
Dawnのコードを編集
コードを編集すると言っても、コードを１箇所に付き１行追加するだけです。
Dawnのバージョンは、６.０.2で説明してます。
1,コードエディターを開く
Shopify 管理画面 ＞ オンラインストア ＞ テーマ ＞ コードを編集する
を選択し、コードエディターを開きましょう。
２、header.liquidを開く
テーマのsectionディレクトリ内にある、header.liquidファイルを開きます。
このファイルの中に、変更する箇所が２箇所あります。
・コマンドFでroutes.search_urlと書かれている箇所を探す
・316行目に
<form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
が見つかると思います。（バージョンによっては、上下するかもしれませんが、formと書かれている行が見つかればOK）
・フォームのすぐ下に、<input type="hidden" name="type" value="product">を追記します。
もう１箇所が、
・512行目にある
<form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
の下に<input type="hidden" name="type" value="product">を追加します。
headerは、この二箇所に２行追加するだけです。
３、main-search.liquidを開く
検索結果になるページです。こちらは１箇所になります。
・コマンドFでroutes.search_urlが書かれている箇所を探します
・74行目の
<form action="{{ routes.search_url }}" method="get" role="search" class="search">
の下に、<input type="hidden" name="type" value="product">を追記します。
これで完了です。
補足
行数はあくまで目安です。
大事なのが、検索に使うフォーム < fromで始まり、action="{{ routes.search_url }}"かaction="/search"と書かれている行を探し、その下に<input type="hidden" name="type" value="product">を追記してあげることです。
formの部分が検索したいデータを、サーバーに送る役目をし、inputで始まる部分が、表示タイプを商品に絞り込んでくれます。
これがわかっていれば、他のテーマにも応用できるので、ぜひ参考にしてください。
※formだけで探すと、検索以外のフォームの可能性もあるので、actionも必ず確認してください。
余談…
ついでに言うと、この検索を入力する欄に入力していると、入力欄の直ぐ下にローディングのグルグルが周り始めませんか？
これをそのままにしているショップを結構見ます。
このグルグル何かというと、入力中のキーワードに関連する商品などを表示しようとしています！
めっちゃいい機能！
ですがこの機能、テーマの設定言語が日本語だと対応しておらず、エラーでデータが取得できないので、ずっとグルグルですw
この機能の切り方は、
管理画面 ＞ テーマ ＞ カスタマイズ ＞ テーマの設定 ＞ 検索行動 ＞ 商品のおすすめを有効にする のチェックを外してください
グルグルが表示されなくなると思います。
まとめ
今回は、商品だけに絞り込む形になりましたが、value="product"の箇所をページや記事に変更してあげると、別のもので限定するこができ、
バージョンが変わっても、補足の箇所を参考にしてもらえば、絞り込むことは出来ると思います！
また、何か使えそうなネタがあれば記事を追加していきますので、よろしくお願いします！
あと…
私が働くARCHETYPでは、Shopifyのテーマ開発やアプリ開発をやりたいエンジニアを募集しております！
気になった方はお気軽にエントリーをお待ちしております！(業務委託もOK）
https://www.archetyp.jp/recruit/
noteでブログもやってるので良かったらチェックしてください！
https://note.com/archetyp