更改Algolia instantsearch.js统计模板

时间:2016-04-26 13:25:53

标签: javascript html algolia

我如何更改Change Algolia instantsearch.js统计模板? (X结果以Y m / s为单位)

根据documentation,它可以通过options.template完成,但就是这样。哪些变量代表结果计数时间,可能还有其他变量?

创建模板的最佳方法是什么?

这是我到目前为止所做的:

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

我最应该补充的是:

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

然后是模板(变量应该是什么?):

<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>

2 个答案:

答案 0 :(得分:3)

Algolia 中的模板的工作方式略有不同,以下是您的instantsearch.widgets.stats应该是这样的:

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

和模板:

<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>

您可以在统计模板中使用的完整变量列表:

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

更多信息:https://community.algolia.com/instantsearch.js/documentation/#stats

答案 1 :(得分:1)

这里有一个例子: https://community.algolia.com/instantsearch.js/documentation/#templates

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