Conditional Items on Hits Instant Search JS


I’m using Laravel and InstantSearch JS for my search.

I’ve looked through the InstantSearch documentation and I’m struggling to find the best way to load items conditionally for the hits widget.

For example, in my search certain items could be marked as “New” or “Featured” depending on if that record has those attributes, these are stored on the record as a boolean e.g. New = 1 if that record is new.

Essentially I want to display some HTML if a record is marked as new and not if it isn’t.

Thanks in advance for any help or advice (this forum is always so friendly & helpful :slightly_smiling_face:).


In InstantSearch, you can set filters with the configure widget. If you want to conditionally toggle a filter after a user interaction, you might want to have a look at toggleRefinement.

Thanks for your reply.

Essentially I want to use if statements inside of the “Hits” widget creation.

You use a function from InstantSearch to create the “Hits” widget which allows you to format how the hit items will display

Like I mentioned previously a good example of what I’m trying to achieve is to display some HTML on a hit item if that particular hit item (record) has the value “new” set.

Does that make sense?

Hi @alex8,

The InstantSearch hits widget has a templates option. [1] You can use conditionals in your template as shown, for example, in this similar inquiry. [2]

Something like this:

      container: "#hits",
      templates: {
        item:function(data) {
          // perform check here
          if(data.New === 0) {
            // use markup for "not New / Old" products
            return '<div>OLD Item </div>'
          } else {
            // use markup for "New" products
            return '<div> NEW Item </div>'

[2] Unsure how to set conditional blocks in hit template

Thanks this looks great.

Do I have to return an entire separate template however can I use an if statement inside of the template like below? (I know the markup for the if statement isn’t correct just using as an example)

        container: '#hits',
        templates: {
        item: `
            <div class="h-100">
                <p class="m-0 search-hit-title text-contained">{{#helpers.highlight}}{ "attribute": "username" }{{/helpers.highlight}}</p>
                     if( new === 1 || new  ) { <div class="search-hit-new">NEW</div> } 
                    <img class="img-fluid search-hit-image w-100" src="{{ profile_image_id }}/{{ profile_image }}" alt="{{ username }}" />
                <div class="search-hit-footer">
                    <small class="m-0 search-hit-tagline">{{ tag_line }}</small>
                    <div class="d-flex justify-content-between">
                            <p class="m-0">Rate from: <strong>£{{ price }}</strong></p>
                        <a href="/profile/{{ slug }}" class="btn btn-em-lilac">see profile</a>

Hi @alex8,

I’m afraid this won’t work and you do need to write your conditional statement to return the full template modified with the change you want to apply for each condition.

You can re-use the snippet shared by my colleague Ajay and then return the full template each time instead of just a div. You will indeed repeat yourself a little !