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>