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">
  
  <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-query`	The search terms to show results for

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="CMS Pages">
  
  <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>