Related Content Blocks

I would like to use Algolia to display related content on each page. These need to be different than the actual search results provided in the search query using the search bar. A few examples:

I want to have a featured content section on the home page where articles that are marked “featured” would appear in these divs and remain unaffected by search results.

On each internal page, I’d like to have a “related content” section that features articles that would be most likely to pertain to the current article or even the user’s behavior. Either way, we’re building a search-driven site so there will be a search bar on every page in the nav.

Could someone please point me the right direction? I’ve spent a week solid looking through documentation and can’t seem to find the right fit.

Hi @nick7,

Thanks for contacting Algolia!

Underlying your goal is the concept that an index search does not have to be tied to a search bar.

Let’s walk through what you might consider:

  • Classic Searchbar - This will be your “standard” Algolia search using an InstantSearch front-end where the typed query searches your Algolia index.

  • Featured Content - This is not a searchbar for interaction by the user. Instead this is just a static Algolia search instance that could use a filter on the attribute that identifies a “featured” article. For example, you might use the JavaScript client to create a search and display the hits:

      index.search({
          filters: 'featured:true'
      },
      function searchDone(err, content) {
          if (err) throw err;
    
          console.log(content.hits); // do something with your hits
      });
    
  • Related Content: This can work much the same the above “Featured Content”, but the filter would be dynamic and set by you programatically. For example, let’s say you have an article “My Favorite Article”, which has an attribute called related_article_ids, and the object looks something like this in Algolia:

    {
       "name": "My Favorite Article",
       "related_article_ids": [ 55, 3, 215]
    }
    

On click of “My Favorite Article” you would update the search for the “Related Content” section to filter on those ids:

    index.search({
        filters: 'objectID:55 OR objectID:3 OR objectID:215'
    },
    function searchDone(err, content) {
        if (err) throw err;

        console.log(content.hits); // do something with your hits
    });

It would be your job to keep your index up-to-date including keeping that related_object_ids attribute updated.

Again, the goal is the bigger concept that you can manually set your search parameters, without a searchbar.

Hope this helps!

This is very helpful! Thank you so much!

I have another related question. Can a single page have multiple index.search no the same page? So for example, if i create a homepage with instantSearch results, but also want to maintain separate content blocks for the promoted posts and featured content, how would I do that without the search bar query affecting the static search instance?

The other workflow issue I’m having with this is the internal pages. The internal pages have a search bar in the nav, but related posts on the page as well. Should I use autocomplet.js for this?

Thanks so much!