NextQueriesList

Component that inserts groups of next queries 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 next queries groups.	union
offset	The first index to insert a group of next queries at.	number	24
frequency	The items cycle size to keep inserting next queries groups at.	number	24
maxNextQueriesPerGroup	The maximum amount of next queries to add in a single group.	number	4
maxGroups	The maximum number of groups to insert into the injected list items list.	number
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

Slots

Name	Description	Bindings (name - type - description)
default	Next queries list layout.	items SearchItem[] - Next queries groups plus the injected list items to animation Vue | string - Animation to animate the elements.
slotName

Events

This component emits no events.

See it in action

Backend microservice required

To use this component, the QuerySignals microservice must be implemented.

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

Play with the index that next queries groups are inserted at

The component allows to customise where are the next queries groups inserted. In the following example, the first group of next queries will be inserted at the index 48 (offset), and then a second group will be inserted at index 120 because of the frequency prop configured to 72. Finally, a third group will be inserted at index 192. Because maxGroups is configured to 3, no more groups will be inserted. Each one of this groups will have up to 6 next queries (maxNextQueriesPerGroup).

Showing/hiding first next queries group when no more items

By default, the first next query group will be inserted when the total number of results is smaller than the offset, but this behavior can be deactivated by setting the showOnlyAfterOffset to true.

Customise the layout of the component

This component will render by default the id of each search item, both the injected, and for the groups of next queries generated, but the common case is to integrate it with another layout component, for example the BaseGrid. To do so, you can use the default slot

<template>
  <div>
    <SearchInput />
    <ResultsList>
      <NextQueriesList
        :offset="48"
        :frequency="72"
        :maxNextQueriesPerGroup="6"
        :maxGroups="3"
        #default="{ items }"
      >
        <BaseGrid :items="items" :animation="animation">
          <template #next-queries-group="{ item }">
            <span>NextQueriesGroup: {{ item.queries.join(', ') }}</span>
          </template>
          <template #result="{ item }">
            <span>Result: {{ item.name }}</span>
          </template>
          <template #default="{ item }">
            <span>Default: {{ item }}</span>
          </template>
        </BaseGrid>
      </NextQueriesList>
    </ResultsList>
  </div>
</template>
<script>
  import { NextQueriesList } from '@empathyco/x-components/next-queries';
  import { ResultsList } from '@empathyco/x-components/search';
  import { SearchInput } from '@empathyco/x-components/search-box';
  import { BaseGrid } from '@empathyco/x-components';
  export default {
    name: 'NextQueriesListDemo',
    components: {
      NextQueriesList,
      ResultsList,
      BaseGrid,
      SearchInput
    }
  };
</script>