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

Raphael Terrier
InstructorRaphael Terrier

Share this video with your friends

Send Tweet
Published 4 years ago
Updated a year ago

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.

Instructor: [00:00] Displaying relativism simply won't work for our users. We've previously seen how to use Mustache templates to access item values in our menu example. It's time to put that to good use for our hits.

[00:13] Let's show the product names first. Let's add the item template. As a value, we'll have a string that will hold two curly braces, where we will be able to access the name value. Good. We now have the names of every hit.

[00:29] Another way to build templates is by using a function, passing it the item data, and writing it as a string literal. Let's modify our item to make it more interesting. Let's add an image, the price, the description, and have that on separate lines for now to see how it looks. Everything appears correctly, but that doesn't look great.

[00:53] Let's tweak those hits a little. The image value is a URL string. We can use it directly in an image tag as its source attribute. Then the name and price will be in a container div with a class of hitTitle, the product name inside an h4 tag, and the price in its own div with a class of price. We'll add the description in a p tag right below.

[01:16] Let's check our page. We now have some good-looking hits displayed. Of course, if we type in some queries, everything is updated. The final touch we can add to those hits, and a search best practice, is to provide some feedback when no results are found for a given query.

[01:34] When we type in a query that doesn't return any match, we only get a no result label. To make this a bit more user-friendly, we can leverage the empty template. Here, we'll simply add an h1 suggesting another query. This is pretty basic, but you can of course make something much more interesting as an original template.

Ale Narvaja
Ale Narvaja
~ 3 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
Raphael Terrierinstructor
~ 3 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.