Hits widget, unable to display template

Open Q&A
#1

Hi,
i’m trying to implement instantsearch on my website, with algoliasearch-lite & instantsearch.
i’ve follow the documentation step by step to have a working and simple POC.
But i don’t know why, Hits widget is throwing this error :

Uncaught (in promise) Error: Template must be 'string' or 'function', was 'undefined' (key: item)

here is my hits widget configuration :

instantsearch.widgets.hits({
        container: '#hit-template',
        templates: {
            item(hit) {
                return `
                    <h2>
                    ${hit.__hitIndex}:
                    ${instantsearch.highlight({ attribute: 'name', hit })}
                    </h2>
                    <p>${hit.description}</p>
                `;
            },
        },
})

as you can see, this is the example provided by the docs.

I’m loading algoliasearch and instantsearch locally (no cdn or npm), XHR request is getting results in the network view :

{,…}
results: [{hits: [{name: "Couette 4 saisons en duvet de canard ALPILLES",…},…], nbHits: 322, page: 
0,…}]
0: {hits: [{name: "Couette 4 saisons en duvet de canard ALPILLES",…},…], nbHits: 322, page: 0,…}
exhaustiveNbHits: true
hits: [{name: "Couette 4 saisons en duvet de canard ALPILLES",…},…]
hitsPerPage: 20
index: "XXXX" (==> is replaced with a valid indexName)
nbHits: 322
nbPages: 17
page: 0
params: "query=coue&highlightPreTag=__ais-highlight__&highlightPostTag=__%2Fais- 
highlight__&facets=%5B%5D&tagFilters=&filters=type_id%3Agrouped"
processingTimeMS: 2
query: "coue"

I don’t get what i’m missing…

any help would be appreciated

thanks

#2

Hey, can you please reproduce in this InstantSearch.js sandbox?

#3

Hi françoischalifour,

it’s working fine on the sandbox…

Could it be a version problem ?

i’m using :
algoliasearch-lite.umd.js | 4.5.1
InstantSearch.js 4.9.0 (i’m using the development version at the moment, for the integration)

#4

Hey Marie,

Could you try to define your template function as such (added :function between item and (hit)) ?

instantsearch.widgets.hits({
        container: '#hit-template',
        templates: {
            item: function(hit) {
                return `
                    <h2>
                    ${hit.__hitIndex}:
                    ${instantsearch.highlight({ attribute: 'name', hit })}
                    </h2>
                    <p>${hit.description}</p>
                `;
            },
        },
})
#5

Hi jerome.schneider,

unfortunatly, same error.
i’ve also tried with file version present in the sandbox (https://cdn.jsdelivr.net/algoliasearch/3.32.0/algoliasearchLite.min.js & https://cdn.jsdelivr.net/npm/instantsearch.js@4.8.7)

but same error as well

Maybe a stupid question but, do i need another js file for the hits widget or even the templating system ?

#6

Hi everyone,

little update about this problem.
I didn’t mention that i was trying to implement it on magento (1.9) platform.

I’ve been asked to integrate it the lightest way possible, so i’ve avoided the magento module.

So, after strugling for few days, i’ve tried to get it work outside magento, in a simple HTML file… and it’s working !

same file loaded, same configuration, same containers…

Could it be due to the way that magento load js files ?

#7

Hey marie.bals.consultan. It’s possible that there’s a conflict with the Magento extension (or other extensions that you have running). Be sure that you’re using the most recent versions of any extension or module that you’re using.