ThemesContexts
Search
The search context in a StoreOS Fluid theme, with its route, widgets, the search object and an example widget.
The search context renders product search results.
Route
/search?q=<terms>
The terms are read from the q query string parameter. With no q, the page renders with no results and search.performed set to false.
Widgets
The widgets listed under pages.search in the theme document.
{ "pages": { "search": ["main-search"] } }Data
| Object | Contents |
|---|---|
search | terms, performed, results and results_count. See search |
page_title | Search: <terms>, or Search when nothing was searched |
Plus the data on every page.
search.results holds up to 48 matching products. Each is a product.
Example
{% comment %} widgets/main-search.fluid {% endcomment %}
<section class="search">
<form action="/search" method="get">
<input type="search" name="q" value="{{ search.terms }}" placeholder="Search products">
<button type="submit">Search</button>
</form>
{% if search.performed %}
<p>{{ search.results_count }} results for “{{ search.terms }}”</p>
<ul class="grid">
{% for product in search.results %}
<li>
<a href="{{ product.url }}">
<img src="{{ product.featured_image | image_url }}" alt="{{ product.title }}" loading="lazy">
<h3>{{ product.title }}</h3>
<p>{{ product.price | money }}</p>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</section>