Youzu Fill

The Youzu Fill component allows users to fill a room with furniture items.

Basic Usage

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

<youzu-fill></youzu-fill>

Demo

Usage Options

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

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

// Listen for products added to basket
fill.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'
  }
})
.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'
}

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

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"

Props

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

Events

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