1Créer un Produit
Créez d'abord un produit dans votre dashboard ou via API:
import { LuneoClient } from '@luneo/sdk';
const client = new LuneoClient({
apiKey: process.env.NEXT_PUBLIC_LUNEO_API_KEY
});
// Créer un produit personnalisable
const product = await client.products.create({
name: 'T-Shirt Personnalisé',
baseImage: '/images/tshirt-blanc.png',
customizable: true
});2Intégrer le Composant
Ajoutez le composant React dans votre page:
import { ProductCustomizer } from '@luneo/react';
export default function CustomizePage() {
return (
<ProductCustomizer
productId="prod_xxx"
productImage="/images/tshirt.png"
productName="T-Shirt"
onSave={(design) => {
logger.info('Design saved:', design);
}}
/>
);
}3Configuration Optionnelle
Personnalisez le comportement du customizer:
const config = {
canvas: {
width: 800,
height: 1000,
backgroundColor: '#ffffff'
},
tools: {
text: true,
images: true,
cliparts: true,
shapes: true
},
export: {
formats: ['png', 'svg', 'pdf'],
dpi: 300
}
};Résultat
Votre customizer est maintenant opérationnel ! Vos clients peuvent:
- Ajouter du texte
- Uploader des images
- Choisir des cliparts
- Exporter leur design