API Reference / Vue InstantSearch Widgets / ais-configure-related-items

ais-configure-related-items

Widget signature 
<ais-experimental-configure-related-items
  :hit="object"
  :matchingPatterns="object"
  // Optional parameters
  :transformSearchParameters="function"
/>
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

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 values gets a score of 2.

The hit above 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 v3