Promoted

A promoted result is just an item that has been inserted into the search results to advertise something. Usually it is one of the first items in the grid, and has the same shape as a result. It just contains a link to the promoted content, an image, and a title.

Additionally, this component exposes the following props to modify the classes of the elements: titleClass.

Props

Name	Description	Type	Default
promoted	The promoted data.	PromotedModel
titleClass		string

Events

This component emits the following event:

• UserClickedAPromoted (opens new window): emitted when the user clicks the promoted item (if it has a URL).

Examples

In this example, promoted data is passed as a prop.

Here you can see how the Promoted component is rendered.

<template>
  <Promoted :promoted="promoted" />
</template>
<script setup>
import { Promoted } from '@empathyco/x-components/search'
import { ref } from 'vue'
const promoted = ref({
  modelName: 'Promoted',
  id: 'promoted-example',
  url: 'https://my-website.com/summer-shirts',
  image: 'https://my-website.com/images/summer-shirts.jpg',
  title: 'Trendy summer shirts',
  position: 1,
})
</script>

Customizing the items with classes

The titleClass prop can be used to add classes to the promoted title.

<template>
  <Promoted :promoted="promoted" titleClass="x-bg-neutral-50" />
</template>
<script setup>
import { Promoted } from '@empathyco/x-components/search'
import { ref } from 'vue'
const promoted = ref({
  modelName: 'Promoted',
  id: 'promoted-example',
  url: 'https://my-website.com/summer-shirts',
  image: 'https://my-website.com/images/summer-shirts.jpg',
  title: 'Trendy summer shirts',
  position: 1,
})
</script>