Display Rich results with templates in the Hits widget for Instantsearch JS
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
~ 5 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 Terrierinstructor
~ 5 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.