What are component templates?

Some of the Search SDK components contain an option called templates. It allows you to fully customize the component display elements. Each component’s page contains the specific information needed to create a template for that component. On this page we are going to provide a general overview of the feature.

The components that can use the templates option are:

• Expandable results
• Facet filter
• Refinement lists
• Refinement tabs
• Results
• Semantic autocomplete
• Stats
• Typeahead autocomplete

How do templates work?

Templates substitute all of the component’s default HTML structure with the one provided by the user. You can make the SDK display any component the way you need it. In order to display the information of the component, templates use Handlebars.js to handle the component properties.

Components using templates specify on their respective documentation all of the properties that can be used for the template. For example, suppose that you want to modify how the results component displays the list of contents. You can provide a template like:

item: '<a href="{{ __url }}" {{{ __clickable }}}>'
        + '{{ title }} - ({{ id }})'
        + '</a>'
        + '<p>{{ attributes.PARAGRAPHS }}</p>'

The SDK will automatically use this HTML structure for each displayed content:

<a href="{{ __url }}" {{{ __clickable }}}>'
  {{ title }} - ({{ id }})'
</a>'
<p>{{ attributes.PARAGRAPHS }}</p>

All the information between {{ }} are the variables provided by the component during the Search.

Special cases

Parsing HTML

Using two handlebars ({{ }}) displays the text with HTML-escaped. If you do not want to escape HTML, you can use three handlebars ({{{ }}}).

For example, imagine that you have the variable title with an ampersand (&) like this: { title: "One thing & another" }. Using the following template:

<div>
{{title}}
</div>
<div>
{{{title}}}
</div>

This would be the outcome:

<div>
One thing &amp; another
</div>
<div>
One thing & another
</div>

As you can see, the HTML inside the variable is escaped using two handlebars, while it is displayed as expected using three.

Clickable elements

Some of the Search SDK components track certain user actions. To maintain this behavior, some components have special elements, like {{{ __clickable }}} which makes the HTML element clickable. For example, the following template converts the div element into a clickable element so that it can be tracked:

<div {{{ __clickable }}}>
One thing & another
</div>