Product Search
The functionality of product search hinges on query parameters, which dictate the information retrieved in search results and its presentation.
These parameters are integrated into the search form inputs and are subsequently reflected in the search URL upon execution.
Incorporating predictive search into your theme enables real-time display of suggested results as users input queries into the search field. To delve into predictive search implementation, consult Integrating Predictive Search into Your Theme.
Query Parameters
The search query supports the following parameters:
| Query Parameter | Type | Required | Description |
|---|---|---|---|
keyword | String | Yes | The search term. |
page_num | Integer | No | Indicates the page number of the current search results. Default is 1. |
page_size | Integer | No | Specifies the number of results per page in the current search results. Default is 48. |
Search Form
The search form can be embedded within a <form> element with the action attribute set to "/products/search".
Utilize the routes object to populate the action attribute, ensuring proper URL handling in multilingual setups.
Except for the keyword parameter, other query parameters do not necessitate user input and should therefore be configured as hidden inputs.
<form action="{{ routes.search_url }}">
<input type="text"
placeholder="Search"
name="keyword"
value="{{ search.terms }}"
/>
<input type="hidden" name="page_num" value="1"/>
<input type="hidden" name="page_size" value="48"/>
</form>
For another example of a search form implementation, you can examine the approach adopted in Seed.
Search URL Structure
The search page's URL dynamically reflects the ongoing search process.
For instance, a search with the specified parameters would yield the corresponding URL:
| Attribute | Value |
|---|---|
keyword | shorts |
page_num | 1 |
page_size | 48 |
/product/search?keyword=shorts&page_num=1&page_size=48
