Configurador de ventanas — 10 pasos, un motor de reglas y una vista 3D, directamente en el navegador.
Esta demo en vivo muestra un configurador completo para un producto técnico: material, tipo de ventana, medidas, tipo de apertura, perfil, color y decoración, herrajes, manillas, acristalamiento y accesorios. Un motor de restricciones mantiene válida cada combinación, la vista 3D sigue cada cambio y el precio se actualiza en vivo. Así construimos configuradores para fabricantes, distribuidores y oficios.
Demo en vivo: configúralo tú mismo
Elige un material, define las medidas, selecciona apertura y acristalamiento – deshaz o rehaz cualquier paso. El widget se carga bajo demanda al pulsar Iniciar.
Nota: Demo con un catálogo de ejemplo integrado: productos, opciones y precios son ilustrativos y no constituyen una oferta. En producción, catálogo, reglas y precios provienen del backend (API multiinquilino) y el resultado se entrega a la tienda, el CRM o el proceso de presupuestos. En esta demo no se recogen datos.
Lo que muestra esta demo técnicamente
- Asistente de 10 pasos con motor de restricciones: las combinaciones no válidas se bloquean o se corrigen automáticamente
- Vista 3D en tiempo real de la ventana (Three.js / React Three Fiber) – marco, hojas, profundidad de perfil y acristalamiento siguen cada cambio
- Precio en vivo a partir de precio base, medidas, opciones y recargos, recalculado en cada paso
- Deshacer/rehacer en toda la configuración, además de guardar y compartir una configuración
- Multiinquilino: catálogo, reglas y precios por cliente desde un backend JSON:API
- Entrega a la tienda: la configuración final va al carrito (Shopware) o a una solicitud de presupuesto
- Integrado como widget Shadow DOM aislado – sin conflictos de estilo con la página anfitriona, interfaz DE/EN
- Rendimiento: carga al hacer clic, un único archivo autónomo, sin peticiones externas
Del configurador a la pipeline quote-to-order
Un configurador como este es el front-end de un proceso quote-to-order completo. Traduce las elecciones del cliente en una configuración única y válida, genera precio y lista de materiales, y entrega el resultado de forma estructurada a la tienda, el ERP o el proceso de presupuestos – la misma pipeline que usamos para la automatización de presupuestos y CPQ.
Para la versión productiva conectamos tu catálogo de productos y tus reglas de precios, adoptamos tu lenguaje visual y configuramos la entrega: carrito, formulario de solicitud, presupuesto en PDF o entrada directa en el ERP. Reglas y precios residen en el servidor; el navegador solo muestra lo que entrega la API.
Otros proyectos de configuradores
Configurador 3D fotorrealista: metales preciosos, perfiles de anillo, engastes y brillo de diamante en vivo en el navegador.
Ver el proyecto →Planificación de vallas de arrastrar y soltar con lista de materiales automática, precio en vivo y traspaso directo al carrito.
Ver el proyecto →Configurador de 5 pasos con vista previa 3D en tiempo real, lista de materiales y salida en PDF.
Ver el proyecto →