Hogan templating with Algolia

Question

I'm currently in the process of templating with Algolia + Hogan. But I'm constantly running into the following errors, I'm running Algolia on CraftCMS.

<script>

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

    const search = instantsearch({
      appId: '{{ craft.searchPlus.getAlgoliaApplicationId }}',
      apiKey: '{{ craft.searchPlus.getAlgoliaSearchApiKey }}',
      indexName: 'products',
      urlSync: true
    });

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

    search.start();

</script>

And this is my hit template. Raw because CraftCMS throws up errors from the .

{% raw %}

  <script type="text/template" id="hit-template">
          {{#hits}}
          <li>
              <h4><a href="{{ absoluteUri }}">{{ title }}</a></h4>
              {{{ description }}}
              <p>{{#productImage}}</p>
                <img src="{{ url }}"/>
              {{/productImage}}
          </li>
          {{/hits}}
  </script>

{% endraw %}

Getting the following errors through Console.

Warning: Failed prop type: Invalid prop templates.item supplied to t.

Template.js:117 Uncaught Error: Template must be 'string' or 'function', was 'object' (key: item)

score 1 · Accepted Answer · answered Jun 15 '17 at 07:33

1

there's no need to compile the template yourself, you can just do:

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

And that should solve your issue.

answered Jun 15 '17 at 07:33

vvo

2,653
23
30

Thanks for answering - unfortunately now I'm getting the following: **Uncaught TypeError: Cannot read property 'textContent' of null** – JMKelley Jun 15 '17 at 08:42
By moving the script below the template removes the error - but no hits template renders. – JMKelley Jun 15 '17 at 08:51
Read answer below as well for complete answer. – JMKelley Jun 15 '17 at 09:11

score 1 · Answer 2 · answered Jun 15 '17 at 09:11

1

Fixed by removing {{#hits}} block and adding @vvo answer.

answered Jun 15 '17 at 09:11

JMKelley

599
2
17
36

Hogan templating with Algolia

2 Answers2