Visual in lister pages

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>