The following endpoints return items in API response:

Items

Items returned by these endpoints can be directly rendered using the available information:

<items>
  <item>
    <itemno>100012674</itemno>
    <type>product</type>
    <title>Foldable Mint</title>
    <price>115</price>
    <brand/>
    <image>https://cdn.tweakwise.com/media/catalog/product/2/4/24.77.03.00_1.png</image>
    <url>/foldable-mint</url>
    <attributes>
      <attribute>
        <name>highlighted_plp_trampoline_shape</name>
      </attribute>
      <attribute>
        <name>highlighted_plp_trampoline_type</name>
      </attribute>
      <attribute>
        <name>highlighted_plp_size_jump_mat</name>
      </attribute>
    </attributes>
  </item>
</items>

If more product data is required, this should be retrieved in your platform. The itemno is the item identifier known by Tweakwise and corresponds to the item.id provided in the feed (or Backend API).

Example

A simple example that renders simple items, if it's not a product it just shows the image:

<template>
  <div v-for="item in items" :key="item.itemno" class="item">
    <img :src="item.image" :alt="item.title">
    <h2>{{ item.title }}</h2>
    <p>{{ item.brand }}</p>
    <p>€{{ item.price }}</p>
  </div>
</template>

<script setup>
import { type Item } from "@/api/models/item";
const { items } = defineModel({
    items: Item[]
});
</script>

[
  {
    "itemno": "100001501",
    "type": "product",
    "title": "Red Hoody",
    "price": 100.0,
    "brand": "Tweakwise"
  },
  {
    "itemno": "100001502",
    "type": "product",
    "title": "Blue Hoody",
    "price": 100.0,
    "brand": "Tweakwise"
  },
  {
    "itemno": "100001503",
    "type": "product",
    "title": "Green Hoody",
    "price": 100.0,
    "brand": "Tweakwise"
  }
]

Grouped Items

If you're using group codes, the following endpoints return grouped items:

Instead of just items, these endpoints return groups of items, grouped by group code.

<groups>
  <group>
    <code>0000001537318848</code>
    <items>
      <item>
        <itemno>100012674</itemno>
        <type>product</type>
        <title>Foldable Mint</title>
        <price>115</price>
        <brand/>
        <image>https://cdn.tweakwise.com/media/catalog/product/2/4/24.77.03.00_1.png</image>
        <url>/foldable-mint</url>
        <attributes>
          <attribute>
            <name>highlighted_plp_trampoline_shape</name>
          </attribute>
          <attribute>
            <name>highlighted_plp_trampoline_type</name>
          </attribute>
          <attribute>
            <name>highlighted_plp_size_jump_mat</name>
          </attribute>
        </attributes>
      </item>
    </items>
  </group>
</groups>

Example

A simple example that renders the first item of the groups, if it's not a product it just shows the image:

<template>
  <div>
    <div v-for="(itemGroup, index) in data" :key="index" class="item">
      <img :src="itemGroup.items[0].image" :alt="itemGroup.items[0].title" />
      <h2>{{ itemGroup.items[0].title }}</h2>
      <p>{{ itemGroup.items[0].brand }}</p>
      <p>€{{ itemGroup.items[0].price }}</p>
    </div>
  </div>
</template>

<script setup>
import { type Item } from "@/api/models/item";
const { data } = defineModel({
    data: Item[]
});
</script>

[
  {
    "code": "1000015",
    "items": [
      {
        "itemno": "100001501",
        "type": "product",
        "title": "Red Hoody",
        "price": 100.0,
        "brand": "Tweakwise"
      },
      {
        "itemno": "100001502",
        "type": "product",
        "title": "Blue Hoody",
        "price": 100.0,
        "brand": "Tweakwise"
      },
      {
        "itemno": "100001503",
        "type": "product",
        "title": "Green Hoody",
        "price": 100.0,
        "brand": "Tweakwise"
      }
    ]
  },
  {
    "code": "promo-builder-external-data",
    items: [
      {
        "itemno": "promo-builder-external-data",
        "type": "visual",
        "title": "Feature | Connect external services with Builder",
        "price": 0,
        "brand": "Tweakwise"
      }
	 ]
]

Item types

On instance-level we can configure any attribute as discriminator to distinguish types of data. We call this the item-type characteristic. This concept will allow you to use different types of content besides products: editorial content, content search or promotional content.

<item>
  <type>product</type>
  <itemno>10001-101</itemno>
  <title>Tweakwise Hoodie Blue</title>
  ...
</item>

{
    "type": "product",
    "itemno": "10001-101",
    "title": "Tweakwise Hoodie Blue",
    // ...
}

💡
Read the announcement: Feature | The concept of Item types for non-products

Example

A simplified solution renders a promo tile on a special type and regular product tiles for regular items:

<template>
  <div v-for="item in items" :key="item.itemno" class="item">
    <div v-if="item.type === 'product'">
      <img :src="item.image" :alt="item.title">
      <h2>{{ item.title }}</h2>
      <p>{{ item.brand }}</p>
      <p>€{{ item.price }}</p>
      <button>Buy</button>
    </div>
    <div v-else-if="item.type === 'visual'">
      <img :src="item.image" :alt="item.title">
    </div>
  </div>
</template>

<script setup>
import { type Item } from "@/api/models/item";
const { items } = defineModel({
    items: Item[]
});
</script>

[
  {
    "itemno": "0000001537322781",
    "type": "product",
    "title": "Hoody",
    "price": 100.0,
    "brand": "Tweakwise"
	},
	{
    "itemno": "promo-builder-external-data",
    "type": "visual",
    "title": "Feature | Connect external services with Builder",
    "price": 0,
    "brand": "Tweakwise"
  }
]

<template>
  <PromoTile v-if="item.type === 'visual'" :item="item" />
  <ProductTile v-else :item="item" />
</template>
<script setup>
import ProductTile from '@/components/ProductTile.vue';
import PromoTile from '@/components/PromoTile.vue';
</script>

👍
Note
The navigation and navigation-grouped calls can be used interchangeably, depending on your preference.

Items

Example

Grouped Items

Example

Item types

💡

Example

👍Note

👍
Note