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

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.