Search Page
A key part of a great e-commerce search experience is getting good search results
Our Search Page makes this user experience swift and easy to build.
Adding a Search Page to a website
The Search Page let's you create a full page showing the best possible matches for any given query.
<span
class="clerk"
data-api="search/search"
data-limit="40"
data-labels='["Search Page"]'
data-query="INSERT_QUERY_HERE"
data-orderby="INSERT_SORTING_ATTRIBUTE"
data-order="asc_OR_desc">>
<div class="product-search-result-list">
<div>Products matching <i>{{ query }}</i></div>
{% for product in products %}
<div class="product">
<h2 class="product-name">{{ product.name }}</h2>
<img src="{{ product.image }}" title="{{ product.name }}" />
<div class="price">${{ product.price | money }}</div>
<a href="{{ product.url }}">Buy Now</a>
</div>
{% endfor %}
{% if count > products.length %}
<div class="clerk-load-more-button"
onclick="Clerk('content', '#{{ content.id }}', 'more', 40);">
Show More Results
</div>
{% endif %}
</div>
</span>
The Search Page functionality supports pagination through the Clerk("content");
functionality, as can be seen in the above example. You can read more about this here
Attribute | Value |
---|---|
data-limit | The amount of products to be returned at a time |
data-category | The ID of the category to show results for |
data-orderby | An attribute to sort the result on, like price , age or name . If not set, Clerk orders results by the AIs prediction of what is most likely to sell right now. |
data-order | Either asc or desc for ascending or descending result order when using data-orderby |
Filtering results
The search page can be filtered by visitors using the built-in Facets functionality. Read more about this here.
Searching categories and other content
By default, the Search Page will only search for products but can be set to search for both categories and pages.
This is done by adding attributes that specify how many categories or pages should be returned as either, data-search-categories
or data-search-pages
+ data-search-pages-type
. This will make the categories
and pages
variables available in the templates / Designs.
<span
class="clerk"
data-api="search/search"
data-limit="6"
data-query="INSERT_QUERY_HERE"
data-search-categories="6"
data-search-pages="6"
data-search-pages-type="blog">
<dl class="product-search-result-list">
<h2>Search results for <i>{{ query }}</i></h2>
<!-- Show categories if there were any match -->
{% if categories.length > 0 %}
<dt>Categories</dt>
{% for category in categories %}
<dd class="category">
<a href="{{ category.url }}">
<p class="category-name">{{ category.name }}</p>
</a>
</dd>
{% endfor %}
{% endif %}
<!-- Show products if there were any match -->
{% if products.length > 0 %}
<dt>Products</dt>
{% for product in products %}
<dd class="product">
<h2 class="product-name">{{ product.name }}</h2>
<img src="{{ product.image }}" title="{{ product.name }}" />
<div class="price">${{ product.price | money }}</div>
<a href="{{ product.url }}">Buy Now</a>
</dd>
{% endfor %}
{% endif %}
<!-- Show pages if there were any match -->
{% if pages.length > 0 %}
<dt>Pages</dt>
{% for page in pages %}
<dd class="page">
<a href="{{ page.url }}">
<p class="page-name">{{ page.name }}</p>
</a>
</dd>
{% endfor %}
{% endif %}
</dl>
</span>
Updated about 1 month ago