Plugin Woocommerce - Personalizador De Neones Online.

Necesitamos desarrollar un Personalizador online de neones para nuestra web https://espacioneon.com .

**Objetivo**: Desarrollar un personalizador en tiempo real para rótulos de neón que permita a los usuarios visualizar y ajustar diseños basados en texto, tipografía, archivos SVG y extras adicionales.

---

## **1. Funcionalidades Principales:**

### **Introducción de Texto:**

- Los usuarios deben poder introducir texto que se mostrará como un rótulo de neón en tiempo real.
- Posibilidad de seleccionar entre distintas tipografías.
- Ciertas tipografías implicarán un aumento en el precio.

### **Alineación y Organización del Texto:**

- Los usuarios tendrán la opción de alinear su texto a la izquierda, al centro o a la derecha en la vista previa del diseño.
- El selector de texto permitirá al cliente escribir el texto tanto en una sola línea como en múltiples líneas. Deberá existir una interfaz intuitiva para realizar este ajuste.
    - La opción de varias líneas afectará lógicamente a las dimensiones del rótulo neon. Es decir, el ancho y alto del diseño se ajustarán automáticamente en función de la longitud del texto y de cuántas líneas se estén utilizando.
- La proporción y la organización del diseño deben mantenerse coherentes, independientemente de la alineación o del número de líneas utilizadas.

### **Subida de Archivos SVG:**

- Los usuarios pueden subir sus propios diseños en formato .svg.
- La vista previa del diseño en SVG tendrá una anchura predeterminada.
- El cliente podrá definir la anchura deseada, y el alto se ajustará proporcionalmente.

### **Selector de Color Configurable:**

- El color tanto del texto/SVG como del resplandor exterior debe ser seleccionable por el usuario.
- El conjunto de colores disponibles en este selector debe ser configurable desde el backend.

### **Efecto Glow (Resplandor):**

- Tanto los textos introducidos por el usuario como los archivos .svg cargados se visualizarán con un efecto de resplandor en el frontend para simular el efecto neón.
- Al cambiar el color utilizando el selector, no solo cambiará el color principal del texto o del diseño .svg, sino que también se ajustará el color del efecto de resplandor.

### **Indicadores Dinámicos de Dimensiones:**

- En la vista previa del diseño, se deben mostrar dos indicadores en forma de flechas (similares a las cotas técnicas) para representar las dimensiones del diseño en tiempo real.
    - Una flecha horizontal que muestra la anchura (o longitud) del rótulo en centímetros.
    - Una flecha vertical que muestra la altura del rótulo en centímetros.
- Estos indicadores deben ser dinámicos:
    - Cambiarán automáticamente en función de las opciones seleccionadas por el cliente, como el tamaño de la letra o el número de caracteres introducidos.
    - Al cargar un archivo .svg, las cotas se ajustarán para reflejar las dimensiones reales del diseño, manteniendo siempre las proporciones del archivo original.
- Es esencial que las proporciones del diseño, ya sea basado en texto o en un archivo .svg, sean respetadas y no puedan ser alteradas por el usuario.

### **Extras Adicionales:**

- Posibilidad de añadir opciones adicionales al personalizador desde el backend, como "Tipo de material", "Acabados", entre otros.
- Cada extra tendrá un impacto configurable en el precio final del producto.
- Los usuarios pueden seleccionar entre estas opciones adicionales y ver el impacto en tiempo real en el precio.

### **Visualización y Edición en el Carrito:**

- Cuando el cliente añade su diseño personalizado al carrito, debe ver un resumen detallado de todas las configuraciones seleccionadas.
- Desde el carrito, el cliente debe poder:
    - Modificar directamente ciertas configuraciones sin salir del carrito.
    - Pinchar en el producto y ser redirigido a la página del producto con todas sus configuraciones cargadas, listas para ser editadas.

---

## **2. Especificaciones Técnicas:**

### **Configurabilidad desde el Backend:**

- **Dimensiones del rótulo**:
    - Definir un mínimo y un máximo para las dimensiones del rótulo, incluso estos maximos serán aplicados no por ancho y alto sólo sino por ejemplo por el lado más largo, ejemplo de regla:
    - El lado más largo hasta 300cm y el otro lado más pequeño no superará los 145cm (Uno de los lados siempre tiene que ser menor de 145cm
    - Esta misma regla se podría saltar especificando al usuario que su rótulo será enviado en distintas piezas.
- **Configuración de Precio**:
    - Establecer un precio base para el producto.
    - Configurar precios adicionales basados en el tamaño (m^2) del rótulo.
    - Poder configurar precio según densidad de letras, mientras más letras tenga un rótulo irá aumentando el coste porcentualmente, poder establecer rangos, ejemplo :
        - De 0 a 5 letras→ + 0%
        - De 6 a 10 letras → +2%
        - 11 a 20 letras → + 5%
    - El cálculo final del precio deberá ser la suma del precio base + (área del rótulo x precio por m^2) * porcentaje de coste de letras * porcentaje según tipografía.
- **Tipografías y Extras**:
    - Establecer tipografías disponibles y asociar precios adicionales a ciertas tipografías. Este precio adicional será porcentual respecto al precio base configurado anteriormente.
    - Añadir opciones adicionales al personalizador desde el backend, como "Tipo de material", "Acabados", entre otros. Cada extra tendrá un impacto configurable en el precio final del producto y se verá en el frontend con un selector de imagen y la posibilidad de tooltip

### **Optimización de Carga:**

- Asegurar que el personalizador no ralentice significativamente la velocidad de carga de la página.
- Utilizar técnicas modernas de desarrollo para garantizar una experiencia fluida y sin latencia en el frontend.

---

## **3. Consideraciones Adicionales:**

### **Generación de PDF:**

- Una vez que el cliente haya finalizado su diseño, el sistema debe generar un PDF con el diseño del pedido, este pdf podrá ser enviado a un webservice o por mail para poder crear una automatización

### **Vista Previa con Fondos Configurables:**

- El backend debe permitir subir diferentes fondos para que los usuarios puedan ver su diseño de neón en diferentes contextos.

### **Alertas Configurables:**

- Mostrar mensajes automáticos basados en ciertas condiciones, por ejemplo, si una dimensión del rótulo supera los 150 cm.

### **Experiencia de Usuario (UX):**

- La interfaz debe ser intuitiva y amigable para el usuario. Evitar sobrecargar de opciones y utilizar señales visuales claras.

### **Compatibilidad Multi-navegador:**

- Asegurarse de que el personalizador funcione correctamente en todos los navegadores principales (Chrome, Firefox, Safari, Edge).

### **Soporte Post-Desarrollo:**

- Establecer un período posterior al lanzamiento donde el desarrollador estará disponible para solucionar bugs o problemas que puedan surgir.

---

## **4. Entrega:**

### **Pruebas:**

- Realizar pruebas intensivas para asegurar la correcta funcionalidad en distintos dispositivos y navegadores.

### **Formación:**

- Una breve sesión (puede ser virtual) para formar al equipo sobre cómo utilizar y configurar el personalizador desde el backend.