Diseñador Módulo

El módulo diseñador permite crear productos en los que el cliente pueda cargar archivos tipo PNG, JPG, y SVG, añadir y editar textos y visualizarlos en el mockup del producto. Es decir, permite crear un producto para compra de productos personalizados con una interfaz visual en tiempo real que actúa además como sistema de carga del archivo.

Para crear un producto con diseñador es necesario tener contratado el módulo correspondiente.

Con el módulo la interfaz de la ficha del producto presentará los siguientes nuevos ajustes de producto en el gestor:

Se muestra un botón para activar o desactivar el uso del diseñador.
Se muestra la interfaz de crear lienzos en la columna izquierda de le ficha de producto.
En los valores se muestra el acceso a la interfaz para vincular lienzo
En el menú de la aplicación la sección de Ajustes -> Catálogo -> Fuentes para el diseñador

Con el módulo la interfaz de la ficha del producto presentará los siguientes nuevos ajustes de producto en la vista del cliente:

Selector con imagen de los lienzos disponibles para personalizar
Interfaz de personalización

A tener en cuenta

Los lienzos son creados por el administrador. Para crearlos se requerirá disponer de los archivos necesarios de tipo imagen.
Los lienzos requieren ser nombrados.
Cada lienzo puede tener múltiples áreas de reemplazo. Son áreas en las que el cliente puede cargar una imagen y que están delimitadas por la imagen o imágenes que se utilizan como áreas de reemplazo. El cliente al cargar la imagen entre otras acciones puede escalarla, pero el área de reemplazo ocultará la parte de la imagen que se salga del área de reemplazo establecida.

Una vez creado el lienzo ha de vincularse con una opción. Cuando el cliente seleccione la opción la visualización en la vista del cliente del selector de lienzos cambiará y mostrará la imagen de miniatura que el administrador ha subido para ese lienzo.

Una vez el cliente haya terminado con la personalización ha de hacer clic en el botón "Hecho". Esa acción hará que se guarde provisionalmente la personalización, el lienzo con la imagen y si procede el texto u otras modificaciones hechas por el cliente.
Cuando el cliente haga clic en "Añadir al carrito" el lienzo personalizado será cargado para ser recibido con el pedido una vez haya sido tramitado.

Interfaz de creación de lienzos (columna izquierda)

Nombre asignado al lienzo
Descripción es para reflejar información de interés para los administradores.
Modo de color. Permite limitar la personalización según modo de color. Disponibles opciones de a uno, dos, tres, cuatro colores y "A todo color".

El ajuste de modo de color "A todo color" es el único que permite la subida de imágenes de tipo mapa de bits y de tipo vector. El resto de modos de color sólo permiten carga de vectores.
Tipo de imagen a subir. Permite limitar la personalización según el tipo de imagen a subir. Disponibles cuatro opciones, ninguno, vector (SVG) , trama (mapa de bits JPG o PNG) o ambos (trama y vector).
Texto habilitado. Botón para permitir o no al cliente añadir y editar un texto.
Ancho. Tamaño de ancho del lienzo. Afecta a al tamaño de ancho de la vista del diseñador.
Alto. Tamaño de alto del lienzo. Afecta a al tamaño de ancho de la vista del diseñador.
Miniatura. Imagen para la vista del selector de lienzos desde el lado del cliente. Tamaño máximo 1 MB (380 x 380 pixeles a 72 ppp).
Eliminar. Botón eliminar lienzo
Duplicar. Botón duplicar lienzo
Guardar cambios. Botón guardar

Además de estos elementos de la interfaz se encuentra la columna derecha. es la parte de visualización. En ella hay más ajustes para el lienzo. A continuación se muestran con un ejemplo práctico de creación de un lienzo de camisa.

Creando un lienzo de ejemplo de un lienzo con cuatro cuadros para personalizar laminas.

Clic en crear lienzo. Nombrar lienzo, seleccionar modo de color, tipo de imagen a subir, tamaño de lienzo, subir miniatura y guardar.
Clic en el icono de cámara para comenzar a subir las imágenes que van a componer el lienzo.
Subimos la imagen de los 4 cuadros.
Clic en la imagen en la vista del diseñador para que nos muestre todos los botones relacionados con área de impresión.
Hacemos clic en resetear área de impresión para poder definirla de nuevo.
Con la misma imagen seleccionada hacemos clic en "Definir el área de impresión según el último elemento seleccionado". El área de impresión se ajusta al tamaño de la imagen subida.
Hacemos clic en el icono de capas y bloqueamos la capa de la imagen del mockup de los cuadros haciendo clic en el icono del candado.
A continuación vamos a crear las áreas de reemplazo. Para lo que hemos preparado unas imágenes en png con el icono de carga de archivo. Estas imágenes tienen la misma proporción de tamaño y orientación que las de los espacios para laminas de los cuadros. Guardamos en PNG sin fondo.
Subimos la imagen PNG al lienzo de la misma forma que en el paso 3. La imagen se muestra en el lienzo y en cada esquina presenta un icono de acciones de transformación, como eliminar, rotar, duplicar y escalar. Hacer clic y arrastrar en este último para escalarla y hacerla más pequeña. Si se comete un error se puede hacer o deshacer con los botonoes correspondientes que se muestran en la zona inferior del lienzo.
También podemos ver que la imagen subida muestra una interfaz más completa justo en la zona inferior de ella. Más adelante se mostrarán más detalles sobre esta interfaz.
Una vez escalada y centrada la imagen al espacio de la lamina se procede a definirla como área de reemplazo. Para ello desde la sección de capas seleccionado la capa de la imagen y hacemos clic en el icono de nube para activarla como área de reemplazo.
llllll