---
title: Recommendations
tags: UI reference
---

# Recommendations

This component renders the list of recommendations stored in the state. It shows the most popular results. The “popularity” here means “the most clicked products in the search results” for a defined timeframe, so this list of results evolves and changes depending on user interactions.

Each recommendation is represented by `BaseResultLink` , in addition to other component as required. `BaseResultLink` **must** be used inside the Recommendations component.

IMPORTANT: TopClicked must be implemented.

## Props

| Name | Description | Type | Values | Default |
| ----------- | ------------------------------------------------------- | ----- | ------ | ------- |
| `animation` | Animation component used to display the recommendations | `Vue` | `ul` | None |

## Slots

| Name | Description | Bindings <br/> (name - type - description) |
| ---- | ----------- | -------- |
| `default` | Provides the content of the recommendation to display in a certain way. `BaseResultLink` can be used | **recommendation** - `Result` - Result data |

## See it in action
This example shows how recommendations are rendered without any additional effects.

:::warning
TopClicked must be implemented.
:::

_See how the recommendations can be rendered._

<div>
<LivePreview>
<template #editor>

<Recommendations>
  <template #default="{ recommendation }">{{recommendation.name}}</template>
</Recommendations>

</template>
<template #preview>

<Recommendations><template #default="{ recommendation }">{{recommendation.name}}</template></Recommendations>

</template>
</LivePreview>
</div>

#### Play with props
In this example, `StaggeredFadeAndSlide` animation prop has been added, so that the recommendations appear with a delay, then slide upwards.

_Type “toy” in the search input and press Enter to see how the recommendations are rendered._

<div>
<LivePreview>
<template #editor>

<SearchInput @UserPressedEnterKey="(query) => (message = query)"></SearchInput>
<Recommendations v-if="message" animation="StaggeredFadeAndSlide">
  <template #default="{ recommendation }">{{recommendation.name}}</template>
</Recommendations>

</template>
<template #preview="{update_message,message}">

<SearchInput @UserPressedEnterKey="(query) => update_message(query)"></SearchInput><Recommendations v-if="message" animation="StaggeredFadeAndSlide"><template #default="{ recommendation }">{{recommendation.name}}</template></Recommendations>

</template>
</LivePreview>
</div>

#### Play with default slot

In this example, the `default` slot contains the name of the product and `BaseResultLink`, converting the product name into a clickable link.

_See how the recommendations can be rendered._

<div>
<LivePreview>
<template #editor>

<Recommendations>
  <template #default="{ recommendation }">
    <BaseResultLink :result="recommendation">
      <template #default="{ result }">{{ result.name }}</template>
    </BaseResultLink>
  </template>
</Recommendations>

</template>
<template #preview>

<Recommendations><template #default="{ recommendation }"><BaseResultLink :result="recommendation"><template #default="{ result }"><span class="x-recommendations__title">{{ result.name }}</span></template></BaseResultLink></template></Recommendations>

</template>
</LivePreview>
</div>

## Extending the component

The Recommendations component can be used with results-related components such as `BaseResultLink`, `BaseResultImage`, `BaseResultCurrentPrice` or `BaseResultAddToCart`.

Here, the `BaseResultImage`, `BaseResultLink`, and `BaseResultCurrentPrice` components are implemented to render the product image, the product name as a clickable link, and its current price.

_See how the recommendations can be rendered using the results-related components._

<div>
<LivePreview>
<template #editor>

<Recommendations>
  <template #default="{ recommendation }">
    <BaseResultImage :result="recommendation"></BaseResultImage>
    <BaseResultLink :result="recommendation">
      <template #default="{ result }">{{ result.name }}</template>
    </BaseResultLink>
    <BaseResultCurrentPrice :result="recommendation"></BaseResultCurrentPrice>
  </template>
</Recommendations>

</template>
<template #preview>

<Recommendations><template #default="{ recommendation }"><BaseResultImage :result="recommendation"></BaseResultImage><BaseResultLink :result="recommendation"><template #default="{ result }">{{ result.name }}</template></BaseResultLink><BaseResultCurrentPrice :result="recommendation"></BaseResultCurrentPrice></template></Recommendations>

</template>
</LivePreview>
</div>