InstantSearch - condition & layout

Hi ! I would like to add conditions (if) with instantsearch: to be able to change the color of the text if the index ‘popularity’ is more than 300 . Is this possible ?

Thank you !

Hi @victos,

Assuming you’re using instantsearch.js, templates can also be a function and not only a string using Hogan.

Here’s a jsfiddle showing you how to add a classname based on a data returned by Algolia: https://jsfiddle.net/mthuret/j9nwpz34/19/

Is this what you are trying to achieve?

1 Like

Thank you for your answer, i’m not working on javascript but i’m using Vue instantsearch.
This is my code in php:

<ais-results>
      <template scope="{ result }">
        <div class="col-sm-6">
          <div class="feature feature--featured feature-1 boxed boxed--border" style="font-size:large;">
            <span class="label" style="background-color: #B8B2D9; color: #272727">@{{result.Code}}</span>
            </br>
            <b><ais-highlight :result="result" attribute-name="Label"></ais-highlight></b>
            <br style="line-height: 180%;">
          </div>
        </div>
      </template></ais-results>

and i would like that “@{{result.Code}}” be green if it’s under 100 and red if not.

How can i do that ?

Thank you.

I’m not a vue.js expert and @rayrutjes will correct me if I’m wrong but I believe you could use v-if inside your template and have a condition on result.Code

1 Like

Hi @victos,

Using v-if like @marielaure.thuret suggested is one option.

The other option would be to use Vue’s style binding capabilities.

<template>
    <ais-results>
        <template scope="{ result }">
            <div class="col-sm-6">
                <div class="feature feature--featured feature-1 boxed boxed--border" style="font-size:large;">
                    <span class="label" :style="{ 
                        backgroundColor: result.Code < 100 ? 'green' : 'red', 
                        color: result.Code < 100 ? 'green' : 'red', 
                        }">
                        @{{result.Code}}
                    </span>
                    </br>
                    <b>
                        <ais-highlight :result="result" attribute-name="Label"></ais-highlight>
                    </b>
                    <br style="line-height: 180%;">
                </div>
            </div>
        </template>
    </ais-results>
</template>

Let us know if you manage to get it work!

1 Like

Thank you ! It works !Thanks

Here is an example with v-if/v-else:

<template>
    <ais-results>
        <template scope="{ result }">
            <div class="col-sm-6">
                <div class="feature feature--featured feature-1 boxed boxed--border" style="font-size:large;">
                    <span v-if="result.Code < 100" class="label" style="background-color: green; color: green">
                        @{{result.Code}}
                    </span>
                    <span v-else class="label" style="background-color: red; color: red">
                        @{{result.Code}}
                    </span>
                    </br>
                    <b>
                        <ais-highlight :result="result" attribute-name="Label"></ais-highlight>
                    </b>
                    <br style="line-height: 180%;">
                </div>
            </div>
        </template>
    </ais-results>
</template>

You can read more about this syntax in the official documentation.

Cheers,

1 Like

Thank you so much ! It worked perfectly !

Have a nice day.

1 Like

You’re welcome!
Let us know if we can help with anything else.