Site Search

Search List Layout

The site search list layout, by default, is found under ‘Pages’ > ‘Edit Settings’ > ‘Layouts’ and you can create additional list layouts in the Page settings for this purpose.

You can also change the source of the layout used with the source parameter on the ‘site_search’ component tag. For example, you could change the source form “Page” to “Blog Post” and create your list layout within the Blog Post layout interface.

Regardless of where the list layout is sourced from, only data output in the resulting items can be rendered to the list. For example, the name and description are common fields across all module types and so you can safely use {{this['name']}} and {{this['description']}}, respectively. However, if you wanted to render a Products price, for example, in the site search results, using {{this['price']}} would only work for module items that have a price field and so you may need to allow for this for when other item types are listed. Such as with a Liquid IF statement: {% if this['price'] %}Our price is: ${{this['price']}}{% endif %}

Adding a Search Form

There is no admin interface or settings page for this feature. However, the code for the search form and results component can be generated from the Component Manager when using the admin editor for any item/page.

In the Component Manager, selecting “Site Search” from the list of available Components will copy the full search form code and results component tag to your clipboard, ready to be pasted in your page or layout.

The default code is as follows:

<form action="">
    <input type="text" name="SearchKeyword">
    <input class="button" type="submit" value="Search">
</form>
{% component type: "site_search", source: "Page", layout: "Site Search List", displayPagination: "true" %}

This generates a form element including a SearchKeyword text input, submit button and an empty form action attribute and the ‘site_search’ component tag for rendering the list of results. More on these elements below.

Keyword Input

The SearchKeyword text input allows multiple keywords to be entered for searching.

The search logic combines multiple keywords with an AND operator, so items will be returned only if they include ALL keywords entered.

Currently, Site Search does not support any manual logic operators to be used in the keyword input field (such as; AND, OR, NOT...)

Keywords submitted will be passed as URL parameters for use by the ‘site_search’ component tag.

‘site_search’ component

This component outputs data relating to a keyword search query passed in the URL parameter SearchKeyword (typically from a search form submission) to the page that the component resides on.

By default, the Site Search form has an empty action attribute, so, once submitted, it will redirect to the current page with the URL parameter appended to the page URL.

The ‘site_search’ component will use the value of this parameter (the keyword/s) to return items to its layout and/or collection.

For example, if you placed the default Site Search code onto a page with URL slug “/my-search”, and entered “Keywords to Search” for the search query, the form submission will reload the page as “/my-search?SearchKeyword=Keywords+to+Search”.

You can, instead, separate the Site Search form from the ‘site_search’ component, having the component on a separate page and sending the search query to that page instead of the current page.

To do this, you’d add the other page URL slug to the form’s action attribute. So if the other page was “/search-results”, you’d adjust the form as such:

<form action="/search-results">

Then, insert the ‘site_search’ component tag on this page where the search query will be passed as “/search-results?SearchKeyword=Keywords+to+Search”.

In either case, any items found that include all those keywords will be returned via the component.

You may want to separate the Site Search form from the component tag if you want a dedicated search results page, or where you have a search input in the header or footer of all pages as so searches could be made from any page.

There are additional ways to configure the ‘site_search’ component tag, such as, for controlling pagination, sorting results, assigning the data to a collection, etc. More information on this can be found in the Site Search Component article here.

For searching specific modules only and/or with additional query fields, see the “Searching Module Items” heading for that particular module’s documentation.

Related Articles

• Liquid Components
  site_search
  This component outputs data relating to a site search request passed in a URL parameter...

External Resources

• Site Search Demo

Please let us know if you have any other contributions or know of any helpful resources you'd like to see added here.

Questions?

We are always happy to help with any questions you may have.
Visit the Treepl Forum for community support and to search previously asked questions or send us a message at support@treepl.co and we will consult you as soon as possible.