ais-relevant-sort
<ais-relevant-sort // Optional parameters :class-names="object" />
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.
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
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
class-names
|
type: object
default: {}
Optional
The CSS classes you can override:
|
||
Copy
|
|||
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
|
||
Copy
|
|||
text
|
The slot to override the introductory text. Scope
|
||
Copy
|
|||
button
|
The slot to override the toggle button. Scope
|
||
Copy
|
HTML output
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>