API Reference / Vue InstantSearch Widgets / ais-sort-by
Apr. 11, 2019

ais-sort-by

Widget signature
<ais-sort-by
  :items="object[]"
  // Optional parameters
  :transform-items="function"
  :class-names="object"
/>

About this widget

The ais-sort-by widget displays a list of indices, allowing a user to change the way hits are sorting (with replica indices). Another common use case for this widget is to let the user switch between different indices.

Examples

1
2
3
4
5
6
7
<ais-sort-by
  :items="[
    { value: 'instant_search', label: 'Featured' },
    { value: 'instant_search_price_asc', label: 'Price asc.' },
    { value: 'instant_search_price_desc', label: 'Price desc.' },
  ]"
/>

Props

items
type: object[]
Required

The list of indices to search in, with each item:

  • label: string: the label of the index to display.
  • value: string: the name of the index to target.
1
2
3
4
5
6
7
<ais-sort-by
  :items="[
    { value: 'instant_search', label: 'Featured' },
    { value: 'instant_search_price_asc', label: 'Price asc.' },
    { value: 'instant_search_price_desc', label: 'Price desc.' },
  ]"
/>
transform-items
type: function
default: x => x
Optional

Receives the items, and is called before displaying them. Should return a new array with the same shape as the original array. Useful for mapping over the items to transform, and remove or reorder them.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <!-- ... -->
  <ais-sort-by
    [...]
    :transform-items="transformItems"
  />
</template>

<script>
  export default {
    methods: {
      transformItems(items) {
        return items.map(item => ({
          ...item,
          label: item.label.toUpperCase(),
        }));
      },
    },
  };
</script>
class-names
type: object
default: {}
Optional

The CSS classes to override.

  • ais-SortBy: the root of the widget
  • ais-SortBy-select: the select element.
  • ais-SortBy-option: the option element of the select.
1
2
3
4
5
6
7
8
<ais-sort-by
  [...]
  :class-names="{
    'ais-SortBy': 'MyCustomSortBy',
    'ais-SortBy-select': 'MyCustomSortBySelect',
    // ...
  }"
/>

Customize the UI

default

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

Scope

  • items: object[]: the list of items the widget can display.
  • currentRefinement: string: the currently applied refinement.
  • hasNoResults: boolean: whether or not the search got results.
  • refine: (value: string) => void: the function to call with the next value of the index name.

Where each item is an object containing:

  • label: string: the label of the index to display.
  • value: string: the name of the index to target.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<ais-sort-by
  :items="[
    { value: 'instant_search', label: 'Featured' },
    { value: 'instant_search_price_asc', label: 'Price asc.' },
    { value: 'instant_search_price_desc', label: 'Price desc.' },
  ]"
>
  <ul slot-scope="{ items, currentRefinement, refine }">
    <li v-for="item in items" :key="item.value" :value="item.value">
      <a
        href="#"
        :style="{ fontWeight: item.value === currentRefinement ? 'bold' : '' }"
        @click.prevent="refine(item.value)"
      >
        {{ item.label }}
      </a>
    </li>
  </ul>
</ais-sort-by>

HTML output

1
2
3
4
5
6
7
<div class="ais-SortBy">
  <select class="ais-SortBy-select">
    <option class="ais-SortBy-option" value="instant_search">Featured</option>
    <option class="ais-SortBy-option" value="instant_search_price_asc">Price asc.</option>
    <option class="ais-SortBy-option" value="instant_search_price_desc">Price desc.</option>
  </select>
</div>

Did you find this page helpful?