2 min read



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.


Name Description Type Default
animation Animation component that will be used to animate the recommendations. Vue 'ul'
maxItemsToRender Number of recommendations to be rendered. number


Name Description Bindings
(name - type - description)
layout Customized Recommendations layout. animation Vue - Animation to animate the elements.
recommendations Result[] - Recommendations to render.
default (Required) Recommendation content. recommendation recommendation - Recommendation data.


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

See it in action

Backend service required

To use this component, the Topclicked service must be implemented.

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 provides integration with other modules such like the tagging one.

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.

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, and due to Vue 2 limitations you will only be allowed to render a single element inside the layout slot.