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