📁
【Shopify.dev和訳】Themes/Architecture/Templates/serch
この記事について
株式会社 UnReact はプロジェクトの一環としてShopify 開発者ドキュメントの和訳を行っています。
この記事は、Themes/Architecture/Templates/serchの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
検索
searchテンプレートは、ストアフロント検索の結果を表示する検索ページをレンダリングします。
検索オブジェクト
Liquid検索オブジェクトにアクセスして、検索の詳細を表示できます。
検索フォーム
検索ページにアクセスするには、顧客は検索フォームから検索を実行する必要があります。 action = "{{routes.search_url}}"の属性を持つ<form>要素を使用して、テーマに検索フォームを含めることができます。フォーム内には、次の属性を持つ入力が必要です。
type="text"name="q"
また、入力の値を検索オブジェクトのterm属性の値を反映するように設定して、顧客の検索用語が保持されるようにする必要があります。
<form action="{{ routes.search_url }}">
<input type="text"
placeholder="Search"
name="q"
value="{{ search.terms | escape }}"
>
<input type="submit" value="Search">
</form>
検索結果
検索オブジェクトのresults属性の値をループすることにより、検索結果を表示できます。
{% for item in search.results %}
<!-- item details -->
{% endfor %}
検索用語を強調表示する
検索結果に関連するコンテンツを出力する場合は、Liquidハイライトフィルターを使用して、そのコンテンツ内の検索用語をハイライトできます。
{% for item in search.results %}
<!-- item details -->
{{ item.content | highlight: search.terms }}
{% endfor %}
Discussion