1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

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

    Raphael TerrierRaphael Terrier
    algoliaAlgolia

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss