---

title: Recommendations

---

# Recommendations

It renders a list of recommendations from the
RecommendationsState.recommendations state by default.
The component provides the slot layout which wraps the whole component with the
recommendations bounded. It also provides the default slot to customize the item, which is
within the layout slot, with the recommendation bounded. Each recommendation should be
represented by a BaseResultLink component besides any other component.

## Props

| Name                          | Description                                                           | Type                       | Default           |
| ----------------------------- | --------------------------------------------------------------------- | -------------------------- | ----------------- |
| <code>animation</code>        | Animation component that will be used to animate the recommendations. | <code>AnimationProp</code> | <code>'ul'</code> |
| <code>maxItemsToRender</code> | Number of recommendations to be rendered.                             | <code>number</code>        | <code></code>     |

## Slots

| Name                 | Description                        | Bindings<br />(name - type - description)                             |
| -------------------- | ---------------------------------- | --------------------------------------------------------------------- |
| <code>default</code> | (Required) Recommendation content. | **recommendation** <code>recommendation</code> - Recommendation data. |

## Events

This component emits no events, but it makes components such as `BaseResultLink` emit additional
events:

- [`UserClickedARecommendation`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks the link of a recommendation.

## See it in action

<!-- prettier-ignore-start -->
:::warning Backend service required
To use this component, the Topclicked service must be implemented.
:::
<!-- prettier-ignore-end -->

Here you have a basic example on how the recommendations are rendered. You can customize how each
result is rendered by using the `default` slot. It is highly recommended to use base components such
as the `BaseResultLink` or the `BaseResultAddToCart`, as they provide integration with other
modules such as the `tagging` one.

```vue live
<template>
  <Recommendations v-slot="{ recommendation }">
    <BaseResultLink :result="recommendation" class="x-recommendations__link">
      <img
        :src="recommendation.images[0]"
        :alt="recommendation.name"
        class="x-recommendations__image"
      />
      <span class="x-recommendations__title">{{ recommendation.name }}</span>
    </BaseResultLink>
    <BaseResultAddToCart :result="recommendation"
      >Add to cart</BaseResultAddToCart
    >
  </Recommendations>
</template>

<script setup>
import { Recommendations } from "@empathyco/x-components/recommendations";
import { BaseResultLink, BaseResultAddToCart } from "@empathyco/x-components";
</script>
```

### Play with props

In this example, the component will render a maximum of 4 result recommendations, and will use the
`StaggeredFadeAndSlide` animation for the results, smoothing the entrance.

```vue live
<template>
  <Recommendations
    v-slot="{ recommendation }"
    :maxItemsToRender="4"
    :animation="StaggeredFadeAndSlide"
  >
    <BaseResultLink :result="recommendation" class="x-recommendations__link">
      <img
        :src="recommendation.images[0]"
        :alt="recommendation.name"
        class="x-recommendations__image"
      />
      <span class="x-recommendations__title">{{ recommendation.name }}</span>
    </BaseResultLink>
    <BaseResultAddToCart :result="recommendation"
      >Add to cart</BaseResultAddToCart
    >
  </Recommendations>
</template>

<script setup>
import { Recommendations } from "@empathyco/x-components/recommendations";
import { BaseResultLink, BaseResultAddToCart } from "@empathyco/x-components";
import StaggeredFadeAndSlide from "@empathyco/x-components/animations/staggered-fade-and-slide.vue";
</script>
```

### Play with the layout

In this example you can build your own layout, and the `Recommendations` component will just act as
a provider of the result recommendations data. Using the component this way, you can render any
layout you want using the `layout` slot.

```vue live
<template>
  <Recommendations v-slot:layout="{ recommendations }">
    <div class="x-recommendations">
      <article
        class="x-recommendations-list"
        v-for="recommendation in recommendations"
        :key="recommendation.id"
      >
        <BaseResultLink
          :result="recommendation"
          class="x-recommendations__link"
        >
          <img
            :src="recommendation.images[0]"
            :alt="recommendation.name"
            class="x-recommendations__image"
          />
          <span class="x-recommendations__title">{{
            recommendation.name
          }}</span>
        </BaseResultLink>
        <BaseResultAddToCart :result="recommendation"
          >Add to cart</BaseResultAddToCart
        >
      </article>
    </div>
  </Recommendations>
</template>

<script setup>
import { Recommendations } from "@empathyco/x-components/recommendations";
import { BaseResultLink, BaseResultAddToCart } from "@empathyco/x-components";
</script>
```