更改Algolia Instantsearch.js统计信息模板

Question

How could I change Change Algolia instantsearch.js stats template? (X results found in Y m/s)

According to documentation it could be done via options.template, but that's it. Which variables represent results count and time , and perhaps other variables?

What is the best way to create a template?

This is what I have so far:

instantsearch.widgets.stats({
  container: '#stats'
})

Most probably I should add:

instantsearch.widgets.stats({
  container: '#stats',
  template: '#stats-template'
})

and then the template (what should be the variables?):

<script type="text/html" id="stats-template">
    <div data-reactroot="" class="ais-root ais-stats">
      <div class="ais-body ais-stats--body">
        <div>
          {{number of hits}} hits found
        </div>
      </div>
    </div>
</script>

Answer 1

Templates in Algolia work a bit differently, here is how your instantsearch.widgets.stats should look like:

instantsearch.widgets.stats({
  container: '#stats', // Your stats container
  templates: {
    body: getTemplate('stats') // Template for displaying stats
  }
})

and the template:

<script type="text/html" id="stats-template">
    <div data-reactroot="" class="ais-root ais-stats">
      <div class="ais-body ais-stats--body">
        <div>
          {{nbHits}} products found
        </div>
      </div>
    </div>
</script>

Full list of variables you can use in your stats template:

hasManyResults, hasNoResults, hasOneResult, hitsPerPage, nbHits, nbPages, page, processingTimeMS, query

More information: https://community.algolia.com/instantsearch.js/documentation/#stats

Answer 2

There is an example here: https://community.algolia.com/instantsearch.js/documentation/#templates

search.addWidget(
    instantsearch.widgets.stats({
        container: '#stats',
        templates: {
            body: function(data) {
                return 'Show ' + data.nbHits + ' results'
            }
        }
    })
);