UI libraries / Vue InstantSearch / Widgets

ais-relevant-sort

Signature 
<ais-relevant-sort
  // Optional parameters
  :class-names="object"
/>
Import
Copy 
1
2
3
4
5
6
7
8
9

import { AisRelevantSort } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

export default {
  components: {
    AisRelevantSort
  },
  // ...
};

1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.

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 v-slot:text="{ 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 v-slot:button="{ isRelevantSorted }">
    <template v-if="isRelevantSorted">
      See all results
    </template>
    <template>
      See relevant results
    </template>
  </template>
</ais-relevant-sort>

Props

Parameter Description
class-names
type: object
default: {}
Optional

The CSS classes you can 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.

Note that when you implement this slot, none of the other slots will change the output, as the default slot surrounds them.

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 v-slot="{ 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 v-slot:text="{ 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>
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 v-slot:button="{ 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 v4