Youzu Swap

The Youzu Swap component allows users to swap furniture items in a room visualization.

Basic Usage

Add the <youzu-swap> tag to your HTML:

<youzu-swap></youzu-swap>

Demo

Usage Options

<youzu-swap 
  lang="en" 
  currency="USD">
</youzu-swap>
const swap = document.querySelector('youzu-swap');

// Listen for product clicks
swap.addEventListener('productClicked', event => {
  console.log('Product clicked:', event.detail);
});

// Listen for products added to basket
swap.addEventListener('productAddedToBasket', event => {
  console.log('Product added to basket:', event.detail);
});
// Add a product to user's products
const productId = 'product-123';

fetch(`https://platform-api.youzu.ai/api/v1/product/user-products/${productId}`, {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    generation_id: 'generation-456' // Optional
  })
})
.then(response => {
  if (response.status === 201) {
    console.log('Product added to user products');
  } else {
    console.error('Error adding product');
  }
})
.catch(error => {
  console.error('Error:', error);
});
import requests

# Add a product to user's products
product_id = 'product-123'
url = f'https://platform-api.youzu.ai/api/v1/product/user-products/{product_id}'

headers = {
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
    'Content-Type': 'application/json'
}

data = {
    'generation_id': 'generation-456'  # Optional
}

response = requests.post(url, headers=headers, json=data)

if response.status_code == 201:
    print('Product added to user products')
else:
    print('Error adding product:', response.status_code, response.text)
curl -X POST https://platform-api.youzu.ai/api/v1/product/user-products/product-123 \
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "generation_id": "generation-456"
  }'

Props

Property Attribute Type Default
currency currency string undefined
lang lang string undefined

Events

Event Description Type
productAddedToBasket CustomEvent<ApiV1LensPost200ResponseInner>
productClicked CustomEvent<ApiV1LensPost200ResponseInner>