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.
Before you begin
Before implementing, think about these topics:
- What you want to display and how?
- Is there a difference between mobile vs desktop?
- Determine image ratios, to keep a consistent display, these should always be the same.
For more information, read A Deep Dive Into object-fit And background-size In CSS.
Data
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.
Front-end
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>
Additional options
Support
Currently we support the following platforms out of the box:
Magento
- Magento2Tweakwise v8.1.0 and higher
- Magento2TweakwiseHyva v4.1.0 and higher
Tweakwise JS
All Tweakwise JS implementations that run on Plugin Studio are ready to use visuals.
Currently we support one image for all breakpoints, an alternate image for desktop/mobile is not supported.
Troubleshooting
If your platform supports items other then products, and it is not showing up in your lister pages, there are a couple of things to check.
Magento
- Check if your version supports item-types.
- Merchandising Builder > Enabled: Yes.
The Merchandising Builder section is only visible when Ajax Filtering is on. - Layered navigation > Ajax Filtering: Yes.
The Merchandising Builder section is only visible when Ajax Filtering is on. - Enable alternative caching mechanism (eg Varnish)
Required for Builder.
Updated 6 days ago