搜索

搜索模板渲染搜索页面，显示商店搜索的结果。

位置

搜索模板位于主题的templates目录中：

└── theme
    ├── layout
    ├── templates
    |   ...
    |   ├── search.json
    |     ...
    ...

内容

您应在搜索模板或模板中的一个部分包含以下内容：

搜索对象

您可以访问 Liquid 搜索对象以显示搜索详情。

搜索表单

要进入搜索页面，客户需要通过搜索表单进行搜索。您可以在主题中加入一个搜索表单，使用属性为 action=”{{ routes.search_url }}”的<form>元素。在表单中，您需要一个具有以下属性的输入：

• type=”text”
• name=”q”。

您还应设置<input>的值，以反映搜索对象的 terms 属性的值，从而保留客户的搜索词 ：

<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 highlight filter突出显示该内容中的搜索词：

{% for item in search.results %}
  <!-- item details -->

  {{ item.content | highlight: search.terms }}
{% endfor %}

原文链接：https://shopify.dev/docs/themes/architecture/templates/search