XIII.7. Diseñador Módulo - Introducción

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

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.

Si se crea un producto con diseñador también se puede activar el botón de "Requiere archivo". Así si se rechaza el archivo el administrador ya dispone de la imagen de vista de personalización y el cliente puede cargar de nuevo el archivo mediante el sistema de carga de "Requiere archivo" en su pedido.

Se recomienda abrir los archivos SVG subidos al pedido con la aplicación gratuita Inkscape. Es muy probable que otras aplicaciones de diseño vectorial no representen los SVG presentes en un archivo. 

Con el módulo diseñador instalado se presentan estos cambios en el gestor:

1. En la ficha de producto mostrará un ajuste para activarlo.

2. En el menú de la aplicación la sección de Ajustes -> Catálogo -> Fuentes para el diseñador

3. En los valores de las características se muestra el acceso a la interfaz para vincular lienzo.

4. Cuando se activa el diseñador en la ficha de producto se presentan el siguiente cambios en la ficha de producto: Presenta una nueva pestaña llamada "LIENZOS". 

En la pestaña "LIENZOS" se encuentra la interfaz de creación de lienzos.

Los lienzos son creados por el administrador. Para crearlos se requerirá disponer de los archivos necesarios de tipo imagen o vector (SVG).  Los archivos PNG pueden ser modificado el color desde el diseñador. 

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 puede vincularse con un valor. Cuando el cliente seleccione el valor 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.

Del lado del cliente la interfaz es igual que la del lado del gestor.  Los ajustes hechos por el administrador en el lienzo como por ejemplo bloqueo de capas o permitir añadir texto entre otros no permitirán al cliente realizar acciones relacionadas como por ejemplo; mover, escalar, rotar, eliminar la capa o añadir texto.

Interfaz general de añadir fuentes para el diseñador.

En el menú lateral del gestor > Ajustes > Catálogo, presenta la herramienta llamada "Fuentes para el diseñador".

Desde esta sección se añaden las fuentes que serán seleccionables en los campos de texto que se añadan a los diseños. Se pueden añadir diferentes tipos:

• • • Fuentes genéricas : que ya están integradas en los navegadores por defecto como son Arial, Times New Roman o Helvetica.
    • Fuentes de google: En caso de incluir una fuente de Google Fonts se deberá respetar el nombre otorgado por google y como url poner ‘google’.
    • Fuentes personalizadas: En caso de querer incluir una fuente externa, debemos conocer la url del archivo de la fuente, la cual deberá indicarse en el campo ‘url’.
      

Elemento	Función
Crear fuente botón	Para acceder a la interfaz de añadir fuente.
Filtro y paginación	Poder filtrar y buscar  en la lista fuentes añadidas. Paginación con elementos por página y totales que contiene la lista .
ID	Visualización de identificados único de cada fuente añadida. Para uso interno por el sistema.
Nombre	Visualización del nombre de la fuente añadida.
Enlace	Visualización del enlace de la fuente añadida.
Botón "Actualizar"	Acceder a la interfaz de actualización de la fuente añadido.
Flecha botón "Actualizar"	Para acceder a la acción de eliminar fuente añadida.