UI libraries / Vue InstantSearch / Widgets

ais-configure-related-items

Signature 
<ais-experimental-configure-related-items
  :hit="object"
  :matchingPatterns="object"
  // Optional parameters
  :transformSearchParameters="function"
/>
Import
Copy 
1
2
3
4
5
6
7
8
9

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

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

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

This widget is experimental and is subject to change in minor versions.

The ais-experimental-configure-related-items widget computes search parameters to use in related items experiences, without rendering anything.

The widget uses the hit you pass as a reference to compute relevant search parameters, so you can retrieve related items.

We recommend to use this widget in a separate ais-index, only used specifically for related items. The ais-index will display the related items.

Examples

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<template>
  <ais-index index-name="related_items">
    <ais-experimental-configure-related-items
      :hit="hit"
      :matchingPatterns="matchingPatterns"
    />
    <!-- This displays only related hits -->
    <ais-hits />
  </ais-index>
</template>

<script>
export default {
  data() {
    return {
      hit: {
        objectID: '1234',
        name: 'Remote controller',
        brand: 'Amazon',
        categories: ['TV & Home Theater', 'Streaming Media Players'],
      },
    };
  },
};
</script>

Props

Parameter Description
hit
type: object
Required

The widget uses the hit you pass as a reference to compute the search parameters sent to Algolia.

You can retrieve this hit from any location (the app state, the backend, the history, etc.).
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<template>
  <ais-index index-name="related_items">
    <ais-experimental-configure-related-items
      <!-- ... -->
      :hit="hit"
    />
  </ais-index>
</template>

<script>
export default {
  data() {
    return {
      hit: {
        objectID: '1234',
        name: 'Remote controller',
        brand: 'Amazon',
        categories: ['TV & Home Theater', 'Streaming Media Players'],
      },
    };
  },
};
</script>
matchingPatterns
type: object
Required

A schema that creates scored filters based on the hit’s attributes.

In the example below, the brand value gets a score of 1 while the categories value gets a score of 2.

The preceding hit would generate the following search parameters:

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

{
  "sumOrFiltersScores": true,
  "facetFilters": ["objectID:-1234"],
  "optionalFilters": [
    ["brand:Amazon<score=1>"],
    [
      [
        "categories:TV & Home Theater<score=2>",
        "categories:Streaming Media Players<score=2>"
      ]
    ]
  ]
}

You can use nested attributes by using the dot notation to score them: { 'hierarchicalCategories.lvl0': { score: 2 } }.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<template>
  <ais-index index-name="related_items">
    <ais-experimental-configure-related-items
      <!-- ... -->
      :matchingPatterns="matchingPatterns"
    />
  </ais-index>
</template>

<script>
export default {
  data() {
    return {
      matchingPatterns: {
        brand: { score: 1 },
        categories: { score: 2 }
      },
    };
  },
};
</script>
transformSearchParameters
type: function
Optional

Function to transform the generated search parameters.

This can be useful to override default parameters, or to increase chances of finding related items. A recommended pattern is to consider the words of a hit’s name as optionalWords.
Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<template>
  <ais-index index-name="related_items">
    <ais-experimental-configure-related-items
      <!-- ... -->
      :transformSearchParameters="transformSearchParameters"
    />
  </ais-index>
</template>

<script>
export default {
  data() {
    return {
      transformSearchParameters = (searchParameters) => {
        return {
          ...searchParameters,
          // Replace `name` by what describes your hit the most
          optionalWords: hit.name.split(' '),
        };
      },
    };
  },
};
</script>

HTML output

This widget has no HTML output.

Did you find this page helpful?
Vue InstantSearch v4