jhodgson4 February 2016

Use a hogan template in instantsearch.js widget

I'm trying to implement algolias instansearch.js. My search results are going to have a lot of HTML so I'd like to extract it into a hogan template. The results appear to be loading but nothing is being rendered?

<script type="text/template" id="hit-template">
  {{#hits}}
  <div class="hit">
    <div class="hit-image">
      <p>test: {{ objectID }}</p>
    </div>
  </div>
  {{/hits}}
</script>

<script>
var hitTemplate = Hogan.compile($('#hit-template').text());

search.addWidget(
  instantsearch.widgets.hits({
container: '#hits-container',
templates: {
  empty: 'No results',
  item: function(data){
    return hitTemplate.render(data);
      }
    },
    hitsPerPage: 6
  })
);
</script>

Any help would be much appreciated

Answers


vvo February 2016

You do not need to use Hogan yourself, just give us the template:

var hitTemplate = document.querySelector('#hit-template').innerHTML;

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits-container',
    templates: {
      empty: 'No results',
      item: hitTemplate
    },
    hitsPerPage: 6
  )
);

Also check the console for error messages. Thanks

Post Status

Asked in February 2016
Viewed 3,774 times
Voted 6
Answered 1 times

Search




Leave an answer