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