To display a visual between products in your lister pages, follow these steps.Introduce a specific attribute where you will store your item type. This can be any attribute name, for example: item_type.
Contact us to configure the attribute as characteristic: the front-end API will use this type in the type field.
Include your new items into the existing XML feed, with item_type as visual, or create a separate content items feed.
<item>
<id>promo-2024-04-garden</id>
<name>Inside out</name>
...
<attributes>
...
<attribute>
<name>item_type</name>
<value>visual</value>
</attribute>
...
</attributes>
</item>
<item>
<id>promo-2024-04-vloerkleden</id>
<name>Haal binnen naar buiten</name>
<price>0</price>
<stock>0</stock>
<brand>fonQ</brand>
<image><![CDATA[//mb.fqcdn.nl/size420/12005092.jpg]]></image>
<url><![CDATA[https://www.fonq.nl/producten/categorie-buiten_vloerkleed/]]></url>
<attributes>
<attribute>
<name>item-type</name>
<value>visual</value>
</attribute>
<attribute>
<name>panel-bg-color</name>
<value>#90c189</value>
</attribute>
<attribute>
<name>panel-text-color</name>
<value>#ffffff</value>
</attribute>
<attribute>
<name>button-bg-color</name>
<value>#ffffff</value>
</attribute>
<attribute>
<name>button-text-color</name>
<value>#232222</value>
</attribute>
<attribute>
<name>button-text</name>
<value>Shop kleden voor buiten</value>
</attribute>
</attributes>
</item>
Read our product guide on how to configure a visual in Builder.
Implementation
Because our Front-end API already returns items (not just products) you can easily use item type to render your tiles in a different way.
A simplified JS solution could look like this:
<template>
<PromoTile v-if="item.type === 'promotion'" :item="item" />
<ProductTile v-else :item="item" />
</template>
<script setup>
import ProductTile from '@/components/ProductTile.vue';
import PromoTile from '@/components/PromoTile.vue';
</script>
The Front-end API can be configured to expose specific attributes. For example, the promotion item can include the panel & button attributes. That way you can use those fields directly from the API:
<template>
<a class="promo" :href="item.url">
<img :src="item.image" :alt="item.title" />
<div class="promo__panel" :style="`background: ${attributes['panel-bg-color']}; color: ${attributes['panel-text-color']};`">
<p>{{ item.title }}</p>
<a class="promo_button" :href="product.url" :style="`background: ${attributes['button-bg-color']}; color: ${attributes['button-text-color']};`">
{{ attributes['button-text'] }}
</a>
</div>
</a>
</template>
<script setup lang="ts">
import { type Item } from "@/api/models/item";
const { item } = defineModel({
item: Item
});
</script>