Search Page

LemonStand offers the ability to add front-end product search to your store. Allowing users to find the product they want to purchase quickly and efficiently.

Creating the search form

The search page requires a search form for you to enter values to search against. It's a good idea to include your search form as part of a partial, as you will probably want to display the search form on all pages in your store. Below is an example of a search form partial:

<code class="language-twig"><div>
 {{ open_form({'class': 'search', 'method': 'get', 'action': site_url('search')}) }}
   <input type="text" name="query" value="{{query|unescape}}" placeholder="Search store…"/>
 {{ close_form() }}
</div></code>

    

We begin by opening a form using the {{open_form tag}}. For the 'action' we specify a site_url that will tell LemonStand which page in your store to use when outputting the search results. We then create an input tag to be used for entering a value for the search. The value is set as {{query|unescape}} which will result in the input field displaying the searched term when the search results page is loaded.

Creating the search results page

Once you have added the search partial to your store, you then need a page to display the results returned by the search. Start by creating a new page in the back-end of your store and give the page a name as well as a URL, for example /search. For the search page to function you also need to make sure you set the page's action to shop:search. Below is an example of a basic search page:

<code class="language-twig"><div class="row">
    <div class="content twelve columns">
        <div class="row">
            <div class="six columns">
                <p>Products found: {{ products.get().count() }}</p>
            </div>
        </div>
      <div class="row product-list">
        {{ partial('shop-product-list',
        {'products': products}) }}
      </div>
    </div>
</div></code>

    

First we have the {{ products.get().count() }} tag which will return a count of the number of products returned by the search. We then use the shop-product-list partial to output the individual products produced by the search. Below is an example of a more stylized search page output from one of our free and open source themes.


Using the search

By default, a product search takes in a string, and yields results as the string compares against the following product fields where they have been set:

  • Name
  • Short description
  • Long description
  • SKU
  • Category
  • Product type
  • Manufacturer  

For instance, if one has a product with a name 'Unisex Tank', a SKU of 'this-is-a-test-123', and is associated with the category 'Tops', the following keyword searches will match this product:

  • Unisex
  • Tank
  • unisex
  • tank
  • unis
  • this-is-a-test-123
  • this
  • top
  • tops
  • unisex tank, etc.