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:

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.