Frontend templating with Handlebars

Files, paths and overrides

Default template is located in the plugin folder in templates/result.hbs.php, you can override it in your theme folder in findstr/result.hbs.php.

You can also create a custom template for a specific group by naming it result-{group-name}.hbs.php where {group-name} is the group name and placing it in you theme folder in findstr/.

For example, if you have a group named post-listing, you can create a custom template findstr/result-post-listing.hbs.php.

Available data

The data is returned by Meilisearch in the response of a search query. Typically, the results is available in response.hits. But there is more data available, like response.hitsPerPage, response.page, response.totalHits, etc.

By default, a result item data looks like, with more date available once plugin and index is configured :

{
            "ID": 123456,
            "post_title": "The post title",
            "post_content": "The post content",
            "post_type": "post",
            "post_date": "2023-08-08 11:26:23",
            "permalink": "/relative-permalink/",
            "language": "fr",
            "featured_image": {
              "title": "Attachement title",
              "caption": "",
              "alt": "",
              "url": "/wp-content/uploads/2023/06/image.jpg",
              "medium": {
                "url": "/wp-content/uploads/2023/06/image-300x200.jpg",
                "width": 300,
                "height": 200
              },
              "large": {
                "url": "/wp-content/uploads/2023/06/image-1024x683.jpg",
                "width": 1024,
                "height": 683
              },
              "thumbnail": {
                "url": "/wp-content/uploads/2023/06/image-150x150.jpg",
                "width": 150,
                "height": 150
              },
              "medium_large": {
                "url": "/wp-content/uploads/2023/06/image-768x512.jpg",
                "width": 768,
                "height": 512
              }
            },
            "menu_order": 0,
            "_formatted": {
                "post_title": "The post title",
                "post_content": "The post content"
            }
        }

More documentation about meilisearch response.

Template example

{{#each hits}}
<a class="findstr-search-result-item" href="{{this.permalink}}" aria-label="{{this.post_title}}">
  <div class="findstr-search-result-content">
    <p class="findstr-search-result-title">
      <span class="title">{{{ this._formatted.post_title }}}</span>
      <span class="tag">{{this.post_type_label}}</span>
    </p>
    <p class="findstr-search-result-description">
      {{{ this._formatted.post_content }}}
    </p>
  </div>
</a>
{{/each}}

More about Handlebars

Handlebars is a very simple templating language, with Findstr we use it to render the search results. The templates are compiled on the server side, so you can use all the power of PHP to generate the templates.

Note:
Handlebars is a logic less templating language, so you can't use PHP logic in the templates. But you can use PHP to generate the templates.

Handlebars helpers

Handlebars has a lot of helpers to help you generate the templates.

Here are some examples of helpers you can use in your templates:

• if
• each
• unless
• with
• log

Specific helpers are available in Findstr to help you generate the templates.

compare

Compares values for conditional rendering.

{{#compare price ">" 100}}
    <span class="premium">Premium Item</span>
{{/compare}}

log

Log a value in the console. (Server side will log in the console if WP_DEBUG is enabled)

{{log this}}

dateI18n

Format a date with the WordPress date format.

{{#dateI18n 'long' }}{{this.post_date}}{{/dateI18n}}