自作で「検索窓パーツ」を作成してみたので、本記事で手順などを共有します。記事後半には「商品」のみ検索できるようにカスタマイズできる方法も紹介します。
Shopifyストアのテーマには、ストアの商品などの検索ができる、通称「検索窓」パーツが存在しています。
私がよく使うテーマ「Sense」にもヘッダーに設置されていて、虫眼鏡アイコンをクリックすると、検索窓がモーダル表示される仕組みになっています。
先日、スタッフの1人から「好きな場所に、検索を促す文言を入れて表示させたい」という要望を受け、自作で「検索窓パーツ」を作成してみたので、本記事で手順などを共有したいと思います。
自作と言うとも
自作と言うとも、検索ができる機能を一から作るのは大変ですので、Shopify側が用意しているパーツを活用する事にしました。
Shopify側が用意している検索機能の仕組みをざっくり説明すると、
①「セクション > header.liquid」の中に、検索窓パーツ(スニペット)をレンダリングするコード（{% render 'header-search', input_id: 'Search-In-Modal' %}）が組み入れられている。
②「スニペット > header-search.liquid」にモーダル検索窓を提供するコードが書かれている。
③検索窓で検索を行うと「ストアURL/search?q=〇〇〇(検索ワード)」という検索結果ページに遷移する。検索結果を吐き出すの「セクション > main-search.liquid」。
となります。
ここから、「スニペット > header-search.liquid」の一部分を借りて自作「検索窓」を作成します。
※この記事では、予測検索機能を提供するpredictive_searchについては説明を割愛いたします。
サーチフォーム(form)をコピペ
自作「検索窓」パーツは、スニペット > header-search.liquid」の約43行目に書かれている以下のコードをコピペして作ります。
<form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
<div class="field">
<input
class="search__input field__input"
id="{{ input_id }}"
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ 'general.search.search' | t }}"
{%- if settings.predictive_search_enabled -%}
role="combobox"
aria-expanded="false"
aria-owns="predictive-search-results"
aria-controls="predictive-search-results"
aria-haspopup="listbox"
aria-autocomplete="list"
autocorrect="off"
autocomplete="off"
autocapitalize="off"
spellcheck="false"
{%- endif -%}
>
<label class="field__label" for="{{ input_id }}">{{ 'general.search.search' | t }}</label>
<input type="hidden" name="options[prefix]" value="last">
<button
type="reset"
class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
aria-label="{{ 'general.search.reset' | t }}"
>
<svg class="icon icon-close" aria-hidden="true" focusable="false">
<use xlink:href="#icon-reset">
</svg>
</button>
<button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
<svg class="icon icon-search" aria-hidden="true" focusable="false">
<use href="#icon-search">
</svg>
</button>
</div>
{%- if settings.predictive_search_enabled -%}
<div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
{%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
</div>
<span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
{%- endif -%}
</form>私の場合は、このコードだけでスニペットファイル（search-field.liqud）を作成し、好きな場所に入れています。
「header-search.liquid」のファイルをそのまま使っても良いですが、モーダル表示なので、検索窓が最初から見せるため、上記のコードだけで作成しました。
商品だけにする
Shopifyのデフォルト検索窓パーツは、ストア内の商品、ブログ記事、ページと、全コンテンツが対象になります。
商品だけに絞って検索できるようにするためには、の下に、以下のコードを挿入します。
<input type="hidden" name="type" value="product">このコード追加する事で、索時にデータのタイプが「product(商品)」であることを指定できます。
ブログ記事だけにする
同様にvalueを「article(記事)」にすると、ブログ記事だけが検索できる検索窓になります。
<input type="hidden" name="type" value="article">検索結果ページ(main-search.liquid)も修正
上記のように検索窓パーツにvalueを指定する事ができますが、１つの問題が‥
検索後、検索結果一覧ページに遷移しますが、そこにも検索窓が表示されています。
そのページでユーザーが「再検索」をすると、valueは全コンテンツを対象になっているため、商品と記事が混在した検索結果になります。
検索結果一覧ページの検索窓パーツも、商品だけ、ブログ記事だけの検索にするためには「セクション > main-search.liquid」を修正すればＯＫ。
同ファイルの約103行目にがあるので、その下に<input type="hidden" name="type" value="product">もしくは<input type="hidden" name="type" value="article">を挿入します。
以上、自作の「検索窓パーツ」の作成について紹介してみました。ご活用いただければ幸いです。
