Content injection between Hits for InstantSearch.js

[dhayab]

We recently published a guide on how to inject custom content between hits, for React InstantSearch, and we'd like to gather interest in adapting this guide for InstantSearch.js.

What's Content injection between Hits?

Content injection consists of inserting data between search results. This pattern can be helpful for a variety of use cases:

• Displaying promotional or editorial content based on the search parameters, like the query or active refinements
• Inserting promoted brand banners between hits
• Showing customized suggestions based on the user profile

See Live Demo →

How to show your interest?

Simply add a "👍" reaction on this issue, and optionally subscribe to its notifications. We will share updates here.

[jonathan-bird]

Very keen for this to be implemented in the Vue version as well as the React library.

[mlbrgl]

Also keen to see the React InstantSearch Hooks version.

[JessycaFrederick]

I'd love to see this instantsearch.js please!

[unclescooby]

Yes please add this for instantsearch.js

[simonkoehler]

+1 from me 👍

[yannlugus]

+1

[robinsimonklein]

+1 !

[emregozel]

We need this function on the product category page to show some banner or content between two products.

[Haroenv]

While this isn't yet planned, I'm on support today so I have made a demo on content injection in InstantSearch.js, you can see that here: https://github.com/algolia/doc-code-samples/pull/412

[davpetersonaz]

really want this feature in instantsearch.js, we currently have tiles injected between search results which i added to my code a couple years ago, and we thought it would be available for the algolia JS version...

[kelenakamura]

looks like this was added to v6 of react instant search, but not avail in v7. how come?

[Haroenv]

The most impactful a comment can be is explaining which subset of the features would be interesting to you; are the injected content static banners, set by rules, coming from another index, how do you want to decide where it goes etc.

[kelenakamura]

i got here from this page - https://www.algolia.com/doc/deprecated/instantsearch/react/v6/guides/injecting-content/ - so im voting on having that avail in V7.

i think being able to insert hits from another index like the recipes and ingredients example would be ideal. though from 3rd party sources would be great too (ie cms - for promotions etc).

if we want this functionality now, does that mean we just have to stick with v6?

[Haroenv]

@kelenakamura https://github.com/algolia/instantsearch/issues/5440 would be the right issue for react. Multiple indices I'd recommend using useInstantSearch to read scopedResults (combined with multiple index widgets) and doing the merge in user land

[kelenakamura]

@Haroenv oh perfect ill subscribe to that one thanks!

Also if you combine in user land, then you'll need to manually manage pagination numbers so that you return 1 less for each page of results you want to insert content into? just so the total # of hits per page remains consistent.

[emoltd]

Yes please add this for instantsearch.js