Recommendations

Recommendations

It renders a list of recommendations from the 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. Vue 'ul'
maxItemsToRender Number of recommendations to be rendered. number

Slots

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.

Examples

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

Basic example

A BaseResultLink must be used inside the Recommendations component. In the example below the BaseResultLink default slot is filled with an image of the result and a span for the title. Besides that, an additional button has been added.

<Recommendations>
  <template #default="{ recommendation }">
    <BaseResultLink :result="recommendation" class="x-recommendations__link">
      <template #default="{ result }">
        <img :src="result.images[0]" class="x-recommendations__image"/>
        <span class="x-recommendations__title">{{ result.name }}</span>
      </template>
    </BaseResultLink>
    <button>Custom Behaviour</button>
  </template>
</Recommendations>

Overriding layout content

It renders a list of recommendations customizing the layout slot. In the example below, instead of using the default Recommendations content, a BaseGrid component is used to render the recommendations.

<Recommendations :animation="staggeredFadeAndSlide">
  <template #layout="{ recommendations, animation }">
    <BaseGrid :items="recommendations" :animation="animation">
      <template #result="{ item }">
        <BaseResultLink :result="item">
          <BaseResultImage :result="item" />
          <span class="x-result__title">{{ item.name }}</span>
        </BaseResultLink>
      </template>
    </BaseGrid>
  </template>
</Recommendations>

Play with props

In this example, the suggestions has been limited to render a maximum of 3 items.

Type “puzzle” or another toy in the input field to try it out!

<template>
  <BaseSuggestions :suggestions="suggestions" :maxItemToRender="3" />
</template>
<script>
import { BaseSuggestions } from "@empathyco/x-components";
export default {
  name: "BaseSuggestionsDemo",
  components: {
    BaseSuggestions
  },
  data() {
    return {
      suggestions: [
        {
          facets: [],
          key: "chips",
          query: "Chips",
          totalResults: 10,
          results: [],
          modelName: "PopularSearch"
        }
      ]
    };
  }
};
</script>

Events

A list of events that the component will emit:

  • UserClickedARecommendation: the event is emitted after the user clicks the button.
  • A list of events emitted by the BaseResultLink.
We are cookie-less

This is a cookie-free area. Who needs cookies when you can have trust? Feel free to browse our site and the only cookies you need to worry about are the edible kind.