API Reference / Vue InstantSearch Widgets / ais-relevant-sort

ais-relevant-sort

Widget signature 
<ais-relevant-sort
  // Optional parameters
  :class-names="object"
/>
See code examples
See Live example

About this widget

Virtual indices allow you to use Relevant sort, a sorting mechanism that favors relevancy over the attribute you’re sorting on. The ais-relevant-sort widget displays the current search mode when searching in a virtual replica index, and allows users to switch between Relevant and regular sorting, which is more exhaustive and can return less relevant results.

Examples

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<ais-relevant-sort>
  <template slot="text" slot-scope="{ isRelevantSorted }">
    <template v-if="isRelevantSorted">
      We removed some search results to show you the most relevant ones
    </template>
    <template>
      Currently showing all results
    </template>
  </template>
  <template slot="button" slot-scope="{ isRelevantSorted }">
    <template v-if="isRelevantSorted">
      See all results
    </template>
    <template>
      See relevant results
    </template>
  </template>
</ais-relevant-sort>

Props

class-names
type: object
default: {}
Optional

The CSS classes to override.

  • ais-RelevantSort: the root element of the widget.
  • ais-RelevantSort-text: the text element.
  • ais-RelevantSort-button: the button element.
Copy 
1
2
3
4
5
6
7

<ais-stats
  :class-names="{
    'ais-RelevantSort': 'MyCustomRelevantSort',
    'ais-RelevantSort-text': 'MyCustomRelevantSortText',
    'ais-RelevantSort-button': 'MyCustomRelevantSortButton',
  }"
/>
default

The slot to override the complete DOM output of the widget.

Scope

  • isRelevantSorted: boolean: true if the current index is Relevant sorted.
  • refine: function: function to toggle between showing relevant or all results.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12

<ais-relevant-sort>
  <template slot-scope="{ isRelevantSorted, refine }">
    <button @click="refine">
      <template v-if="isRelevantSorted">
        show all results
      </template>
      <template v-else>
        show most relevant results
      </template
    </button>
  </template>
</ais-relevant-sort>
text

The slot to override the introductory text.

Scope

  • isRelevantSorted: boolean: true if the current index is Relevant sorted.
Copy 
1
2
3
4
5
6
7
8
9
10

<ais-relevant-sort>
  <template slot="text" slot-scope="{ isRelevantSorted }">
    <template v-if="isRelevantSorted">
      We removed some search results to show you the most relevant ones
    </template>
    <template>
      Currently showing all results
    </template>
  </template>
</ais-relevant-sort>
default

The slot to override the complete DOM output of the widget.

Scope

  • isRelevantSorted: boolean: true if the current index is using Relevant sort.
  • refine: function: function to toggle between showing relevant or all results.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12

<ais-relevant-sort>
  <template slot-scope="{ isRelevantSorted, refine }">
    <button @click="refine">
      <template v-if="isRelevantSorted">
        show all results
      </template>
      <template v-else>
        show most relevant results
      </template
    </button>
  </template>
</ais-relevant-sort>
button

The slot to override the toggle button.

Scope

  • isRelevantSorted: boolean: true if the current index is using Relevant sort.
Copy 
1
2
3
4
5
6
7
8
9
10

<ais-relevant-sort>
  <template slot="button" slot-scope="{ isRelevantSorted }">
    <template v-if="isRelevantSorted">
      See all results
    </template>
    <template>
      See relevant results
    </template>
  </template>
</ais-relevant-sort>

HTML output

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="ais-RelevantSort">
  <div class="ais-RelevantSort-text">
    <p>We removed some search results to show you the most relevant ones</p>
  </div>
  <button class="ais-RelevantSort-button">
    <span>See all results</span>
  </button>
</div>

<!-- or -->

<div class="ais-RelevantSort">
  <div class="ais-RelevantSort-text">
    <p>Currently showing all results</p>
  </div>
  <button class="ais-RelevantSort-button">
    <span>See relevant results</span>
  </button>
</div>

Did you find this page helpful?

Vue InstantSearch v3