search​

The search template shows the search page, displaying the search results.

Location​

The products/search template is located in the theme's templates directory:

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

Content​

You should include the following in the search template or a section within it:

• The search object
• The search form
• The search results

The search object​

You can use the Handlebars search object to display search details.

The search form​

To access the search page, customers must use a search form. You can add this form to your theme by using a <form> element with the action="{{ routes.search_url }}" attribute. Inside the form, include an input with the following attributes:

• type="search"
• name="keyword"

You should also set the input value to match the search object terms property to keep the customer's search terms:

<form action="{{ routes.search_url }}">
  <input type="search"
   placeholder="Enter search keyword"
   name="keyword"
   value="{{ search.terms }}"
  >
  <input type="submit" value="search-btn">
</form>

The search results​

You can show the search results by looping through the results property of the search object:

{{#for search.results as |search_item|}}
  {{! search_item details }}
{{/for}}

Usage​

When using the search template, you should know how to highlight search terms.

Highlight search terms​

When you display any content related to search results, you can use the Handlebars highlight filter to emphasize the search terms in the content:

{{#for search.results as |search_item|}}
  {{{ highlight search_item.title search.terms }}}
{{/for}}