Start your content search
2 min read

RelatedPromptsList

RelatedPromptsList

Component that inserts groups of related prompts in different positions of the injected search items list, based on the provided configuration.

Props

Name Description Type Default
animation Animation component that will be used to animate the related prompts groups. AnimationProp 'ul'
offset The first index to insert a group of related prompts at. number 24
frequency The items cycle size to keep inserting related prompts groups at. number 24
maxRelatedPromptsPerGroup The maximum amount of related prompts to add in a single group. number 4
maxGroups The maximum number of groups to insert into the injected list items list. number undefined
showOnlyAfterOffset Determines if a group is added to the injected items list in case the number
of items is smaller than the offset.		 boolean false

Events

This component emits no events.

See it in action

Usually, this component is going to be used together with the ResultsList one. Related prompts groups will be inserted between the results, guiding users to discover new searches directly from the results list.

Play with the position in the index

Play with the offset and frequency props, indicating the indices for inserting groups of related prompts. The following example shows that only three groups of related prompts can be added, as the maxGroups prop is set to 3. The first group of related prompts is inserted at index 48 using the offset prop. Since the frequency prop is set to 72, the second and third groups are inserted at indices 120 and 192, respectively. Each group can contain up to 6 related prompts (maxRelatedPromptsPerGroup).

By default, the first group of related prompts is inserted when the total number of results is smaller than the offset. You can deactivate this behavior by setting the showOnlyAfterOffset prop to true.

In the following example, related prompts will be displayed regardless of the number of results being over 48.

Customize the component layout

By default, this component shows the id of each search item, both the injected and the groups of related prompts generated. However, it's common to customize it using a layout component such as the BaseGrid component. To do so, you can use the default slot as follows:

<template>
  <div>
    <SearchInput />
    <ResultsList>
      <RelatedPromptsList
        :offset="48"
        :frequency="72"
        :maxRelatedPromptsPerGroup="6"
        :maxGroups="3"
        #default="{ items }"
      >
        <BaseGrid :items="items" :animation="animation">
          <template #related-prompts-group="{ item }">
            <span v-for="const prompt of items.relatedPrompts">
              RelatedPromptsGroup:
              <pre>{{ prompt }}</pre>
            </span>
          </template>
          <template #result="{ item }">
            <span>Result: {{ item.name }}</span>
          </template>
          <template #default="{ item }">
            <span>Default: {{ item }}</span>
          </template>
        </BaseGrid>
      </RelatedPromptsList>
    </ResultsList>
  </div>
</template>
<script>
import { RelatedPromptsList } from '@empathyco/x-components/related-prompts'
import { ResultsList } from '@empathyco/x-components/search'
import { SearchInput } from '@empathyco/x-components/search-box'
import { BaseGrid } from '@empathyco/x-components'
export default {
  name: 'RelatedPromptsListDemo',
  components: {
    RelatedPromptsLis,
    ResultsList,
    BaseGrid,
    SearchInput,
  },
}
</script>
Cookie-Less