// In an app: import { setupProductCard } from '@aparte/plugin-cards/product';
const { setupProductCard } = window.apartePlugins.cards.product;
// A card shows only http(s) pictures: these are served by this site, which its image
// policy lets load. Without it they wait behind "Show images", as any picture would.
window.aparte.aparteGlobalConfig.setImagePolicy(['self']);
const picture = (name) => new URL('/demo-pictures/' + name + '.svg', location.href).href;
setupProductCard({ tool: 'search_products', variant: 'compact' });
document.querySelector('aparte-chat-bubble').setSegments([{
id: 's1', type: 'tool_call', status: 'resolved',
toolCall: { id: 'c-s1', name: 'search_products', input: { query: 'wireless headphones', maxPrice: 300 } },
structuredResult: {
title: 'Wireless headphones under €300',
products: [
{ title: 'Arden 700 wireless headphones', image: picture('headphones-graphite'), price: 279, compareAtPrice: 349,
currency: 'EUR', rating: 4.6, reviewCount: 2184, availability: 'in-stock', merchant: 'Soundhouse',
badge: 'Bestseller', shipping: 0, url: 'https://shop.example.com/arden-700' },
{ title: 'Arden 500, sand', image: picture('headphones-sand'), price: 199, currency: 'EUR', rating: 4.4,
reviewCount: 836, availability: 'low-stock', merchant: 'Soundhouse', shipping: 0, url: 'https://shop.example.com/arden-500' },
{ title: 'Fjell Studio over-ear', image: picture('headphones-sage'), price: 239, currency: 'EUR', rating: 4.2,
reviewCount: 412, availability: 'preorder', merchant: 'Nordlyd', shipping: 4.9, url: 'https://shop.example.com/fjell-studio' },
],
},
}]);