Items

The following endpoints return items in API response:

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

Items

Items returned by these endpoints can be directly rendered using the available information. 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).

<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>
    <visualproperties>
      <colspan>1</colspan>
      <rowspan>1</rowspan>
    </visualproperties>
  </item>
</items>

Properties

Property	Type	Description
itemno	text	Item identifier known by Tweakwise and corresponds to the `item.id` provided in the feed (or Backend API)
type	text	Item type, see Item types.
title	text	The item title, usually the product title
price	number	The item price, in case of products, the price provided in the feed.
brand	text	The item brand, if available
image	text	The item image, if available
url	text	The item URL, if available
attributes	List of Attribute	List of Attributes for this item
visualproperties	Object	Visual hints to use for rendering.

Attribute

Property	Type	Description
name	text	The attribute name (url slug)
values	List of value	List of values for this attribute. Can be 0, 1 or multiple.
values.value	text	The actual value.

Visual properties

Property	Type	Description
colspan	number	the number of columns to span the component
rowspan	number	the number of rows to span the component

For detailed instructions, see Flexible width for Builder items.

Example

A simple example that renders simple items:

<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>
        <visualproperties>
          <colspan>1</colspan>
          <rowspan>1</rowspan>
        </visualproperties>
      </item>
    </items>
  </group>
</groups>

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 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

Items

Properties

Attribute

Visual properties

Example

Grouped Items

Example

Item types

💡

Example

👍
Note