Display Rich results with templates in the Hits widget for Instantsearch JS

Algolia

Share this video with your friends

Displaying barebones Hits won’t catch your user’s attention. The UI is key to provide a good search experience and hits are the meat of this experience so they need extra attention. By using Mustache templating we’ll see how to display rich results to your users.

Ale Narvaja

~ 6 years ago

Hello, I wanted to warn you that the .menu widget does not render anything in the view. You know why?. The other widgets do work. Thank you.

Raphael Terrier(instructor)

~ 6 years ago

Hello Ale, hard to say without a bit more info. The current course don't cover the menu widget specifically but it behaves in a similar way than refinementList for instance. 3 things must be done for it to render properly:

set a container in the html and
configure the attribute you want to use for the menu as an attributeForFaceting on your Algolia index
properly add the widget in your js file I've just tried it in the plunker embed above using the demo index and it works: in the index.html add this just above the hits container:

<div id="menu"></div>

in the app.js set it like so before the search.start();

search.addWidget(
  instantsearch.widgets.menu({
    container: "#menu",
    attribute:"brand"
  })
);

hope this helps.