Similar Media Content

When looking at a page about a specific item, such as a movie or book, it’s always useful to display related items. This way, if the current item isn’t what your user is looking for, they can easily jump to similar items.

Solution requirements

Implementation guide

This guide walks you through displaying movies related to “The Imitation Game.” The logic is the same for any content, such as books, podcasts, or articles.

You perform a search query on an index containing movies and use the configureRelatedItems widget to display the related items.

File and index structure

For this implementation, you need three files:

• index.html
• src/main.js
• src/style.css

You also need an Algolia index containing the movie dataset. Call the index perso_movies_carousel.

Adapting the HTML

In your index.html file, add the following div. This has the related movies.

1
<div class="carousel-container"></div>

Adapting the JavaScript

To compute related movies, you first need to have a reference. This is the item the user is currently looking at. In the example, the reference is “The Imitation Game.” You start by creating a referenceHit variable that has the record for “The Imitation Game.”

1
2
3
4
5
6
7
8
9
10
11
12
13
const referenceHit = {
  title: 'The Imitation Game',
  image: 'https://image.tmdb.org/t/p/w154/ntZGfHt4d73A9fDD4KUN4nbDQlq.jpg',
  color: '#192229',
  popularity_score: 108.4335114104872,
  actors: ['Benedict Cumberbatch', 'Keira Knightley', 'Matthew Goode'],
  genre: ['History', 'Drama', 'Thriller', 'War'],
  ongoing_watch: [],
  tmdb_id: 205596,
  views_last_7_days: 596898,
  days_to_expire: 44,
  objectID: '439434880',
};

To render your related items, you have to use the addWidgets method on the InstantSearch instance, and add the configure, configureRelatedItems, and hits widgets.

1
2
3
4
5
6
7
8
9
10
search.addWidgets([
  // Set some general settings
  configure(/* ... */),

  // Set some settings for related items
  EXPERIMENTAL_configureRelatedItems(/* ... */),

  // Render results
  hits(/* ... */),
]);

For the general settings, set the hitsPerPage parameter to 15, and the query parameter to an empty string.

1
2
3
4
configure({
  hitsPerPage: 15,
  query: '',
})

For the configuration of related items, you set the hit property to the reference hit mentioned earlier. You also have to provide the matchingPatterns property, which is an object that holds the attributes you want to relate items on. For your movies, you want to find items related by genre, and by actors.

Note that matchingPatterns uses optional filters with scores to find related items. In this example, movies with a genre matching the reference hit appears first, then movies with actors matching the reference hit, and then everything else.

1
2
3
4
5
6
7
EXPERIMENTAL_configureRelatedItems({
  hit: referenceHit,
  matchingPatterns: {
    genre: { score: 3 },
    actors: { score: 2 },
  },
})

Finally, render your related items with the hits widget.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
hits({
  container: '.carousel-container',
  templates: {
    item: (hit) => `
      <img src="${hit.image}" alt="${hit.title}">
      <div class="overlay">
        <h3>${hit.title}</h3>
        <ul>
          ${hit.genre
            .map((genre) => `<li>${genre}</li>`)
            .join('')}
        </ul>
      </div>
    `
  }
})

Next steps

This example is using an index sorting results by popularity, but you could make related items even more powerful with Algolia’s Personalization feature. This way users would see related items that also match their preferences.