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
animation	Animation component that will be used to animate the recommendations.	AnimationProp	'ul'
maxItemsToRender	Number of recommendations to be rendered.	number

Slots

Name	Description	Bindings (name - type - description)
default	(Required) Recommendation content.	recommendation recommendation - Recommendation data.

Events

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

• UserClickedARecommendation (opens new window): the event is emitted after the user clicks the link of a recommendation.

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.