PromotedsList

It renders a ItemsList of promoteds from SearchState.promoteds by default using the ItemsInjectionMixin.

The component provides a default slot which wraps the whole component with the promoteds plus the searchInjectedItems which also contains the injected list items from the ancestor.

It also provides the parent slots to customize the items.

Props

Name	Description	Type	Default
animation	Animation component that will be used to animate the promoteds.	union	'ul'

Slots

Name	Description	Bindings (name - type - description)
default	Customized Promoteds List layout.	items Promoted[] - Promoteds plus the injected list items to render. animation Vue | string - Animation to animate the elements.
slotName

Events

This component doesn't emit events.

See it in action

Backend service required

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

Here you have a basic example of how the PromotedsList is rendered.

Type any term in the input field to try it out!

<template>
  <div>
    <SearchInput />
    <PromotedsList />
  </div>
</template>
<script>
  import { PromotedsList } from '@empathyco/x-components/search';
  import { SearchInput } from '@empathyco/x-components/search-box';
  export default {
    name: 'PromotedsListDemo',
    components: {
      SearchInput,
      PromotedsList
    }
  };
</script>

Play with the animation

<template>
  <div>
    <SearchInput />
    <PromotedsList :animation="fadeAndSlide" />
  </div>
</template>
<script>
  import { PromotedsList } from '@empathyco/x-components/search';
  import { FadeAndSlide } from '@empathyco/x-components/animations';
  import { SearchInput } from '@empathyco/x-components/search-box';
  export default {
    name: 'PromotedsListDemo',
    components: {
      SearchInput,
      PromotedsList
    },
    data() {
      return {
        fadeAndSlide: FadeAndSlide
      };
    }
  };
</script>

Overriding default content

<template>
  <div>
    <SearchInput />
    <PromotedsList #default="{ items, animation }">
      <BaseGrid :items="items" :animation="animation">
        <template #promoted="{ item }">
          <span>Promoted: {{ item.title }}</span>
        </template>
        <template #default="{ item }">
          <span>Default: {{ item }}</span>
        </template>
      </BaseGrid>
    </PromotedsList>
  </div>
</template>
<script>
  import { PromotedsList } from '@empathyco/x-components/search';
  import { SearchInput } from '@empathyco/x-components/search-box';
  import { BaseGrid } from '@empathyco/x-components';
  export default {
    name: 'PromotedsListDemo',
    components: {
      SearchInput,
      PromotedsList,
      BaseGrid
    }
  };
</script>

Overriding promoted content

<template>
  <div>
    <SearchInput />
    <PromotedsList #promoted="{ item }">
      <span class="promoted">
        {{ item.title }}
      </span>
    </PromotedsList>
  </div>
</template>
<script>
  import { PromotedsList } from '@empathyco/x-components/search';
  import { SearchInput } from '@empathyco/x-components/search-box';
  export default {
    name: 'PromotedsListDemo',
    components: {
      SearchInput,
      PromotedsList
    }
  };
</script>

Data injection

Starting with the ResultsList component as root element, you can concat the list of list items using BannersList, PromotedsList, BaseGrid or any component that injects the listItems value.

<template>
  <div>
    <SearchInput />
    <ResultsList>
      <PromotedsList>
        <template #promoted="{ item }">Promoted: {{ item.id }}</template>
        <template #result="{ item }">Result: {{ item.id }}</template>
      </PromotedsList>
    </ResultsList>
  </div>
</template>
<script>
  import { ResultsList, PromotedsList } from '@empathyco/x-components/search';
  import { SearchInput } from '@empathyco/x-components/search-box';
  export default {
    name: 'PromotedsListDemo',
    components: {
      SearchInput,
      ResultsList,
      PromotedsList
    }
  };
</script>