E7. Diseñador Módulo - Bolígrafos varios modelos, ejemplo personalización con diseñador
En este producto al cliente se le ofrece poder comprar 3 modelos de bolígrafos diferentes con personalización gráfica para cada uno. Un lienzo para cada bolígrafo. Cada lienzo vinculado a un valor de la característica de modelo de bolígrafo.
- El cliente puede seleccionar el modo de color del serigrafiado y el color de la tinta.
- El producto se ofrece para compra por cantidad de unidades. Mínimo 500 bolígrafos.
- El precio se muestra en tabla relacionada con las opciones de tiempo de producción.
1. Creando del lienzo para personalización gráfica de un bolígrafo
1.1 Preparación de archivos:
1.1.1 Archivo JPG para la miniatura. Tamaño igual o inferior a 1 MB.
1.1.2 Archivo JPG con fondo blanco del modelo de bolígrafo. Esta imagen actuará como mockup.
1.1.3 Archivo PNG con fondo transparente con un icono de carga de imagen y opcionalmente con un marco de línea discontinua según el perímetro de la imagen. Esta imagen se utilizará para definir el área de reemplazo.
1.2 Creación del lienzo:
1.2.1 Nombrar el lienzo
1.2.2 Ajustar modo de color en "A todo color"
1.2.3 Ajustar tipo de imagen a subir en "Ambos"
1.2.4 "Texto" deshabilitado permitir añadir texto al cliente
1.2.5 Especificar para la vista del lienzo el ancho de 30 cm y el alto de 14 cm.
1.2.6 Cargar la imagen de miniatura preparada.
1.2.7 Guardar cambios
1.3 Edición del lienzo:
1.3.1 Subir la imagen JPG con el mockup del bolígrafo
Opcional resetear el área de impresión y definir el área de impresión según el último objeto seleccionado. Esto redimensionará el área de impresión adaptándolo a la imagen que se ha utilizado.
Ir a interfaz de capas y bloquear la imagen para que el cliente no pueda manipularla.
1.3.2 Cargar la imagen preparada para mostrar y usar como área de reemplazo.
Escalar la imagen al tamaño del área de personalización del bolsillo y posicionar en la ubicación del área a personalizar. Definir la imagen como área de reemplazo haciendo clic en el icono de nube en la capa.
1.3.3 Guardar cambios.
1.3.4 Repetir el proceso para crear los lienzos de los otros dos modelos de bolígrafos con las imágenes de miniaturas y archivos correspondientes.
2. Vinculando los lienzos
En este producto se ha vinculado el lienzo correspondiente a cada valor de la característica Modelo. El cliente al seleccionar un modelo de bolígrafo el selector de personalización de lienzo mostrará la imagen miniatura correspondiente al modelo seleccionado. El cliente al hacer clic en el selector de personalización accede al lienzo de personalización de ese tipo de bolígrafo.
En este producto el selector de lienzos de personalización en la vista del cliente muestra sólo uno. El correspondiente al tipo de bolígrafo seleccionado por el cliente.
Previa selección del área de reemplazo el cliente carga su diseño y puede transformarlo. El cliente ve en tiempo real sobre el mockup del bolígrafo los cambios de la personalización. Una vez conforme con la personalización para que sea guardada hace clic en botón "Hecho" , y la aplicación le lleva a la página del producto para que pueda añadirlo al carrito.
Cuando el cliente cambia de modelo de bolígrafo en la característica "Modelo" la imagen del botón del lienzo ahora muestra el bolígrafo que ha seleccionado. Una ventana emergente le alerta de que personalización de la anterior lienzo será descartada y que debe personalizar el lienzo. Pide confirmación del cambio.
3. Probando el diseñador de este producto desde el lado del cliente
El cliente accede al diseñador haciendo clic en el botón del lienzo correspondiente.lienzo.
LaSe imagen del botón de acceso al lienzo se cambia segúnabrirá el modelo de bolígrafodiseñador que seleccione el cliente en la característica que presenta las opciones de modelos.
Al acceder al diseñador muestra al cliente el lienzo creado para el bolígrafo que ha seleccionado.
El cliente reconoce el área de reemplazo por la línea discontinua que presenta y el icono subir archivo que el administrador ha usado para definir este área. Un PNG sin fondo.
El cliente hace clic en el área de reemplazo y luego clic en el botón de subida de archivo. Puede cargar un SVG o una imagen PNG o JPG a todo color.
Escala el archivo subido mientras lo ve en el lienzo. El área de reemplazo permiteindica visualmente al cliente verla zona de personalización ya que oculta la parte de la imagen subida por el cliente que queda fuera del área. Esto permite que el cliente vea los límites de escalado o rotarlo entre otras acciones posibles, y puedepueda ajustarlo paracomprobar que el archivo llegueestá conforme alsegún el espacio de personalización disponible.
El cliente puede hacer las transformaciones de escalar, rotar, duplicar, posicionar y eliminar entre otras, viendo los cambios en tiempo real sobre la imagen del objeto.
Una vez el cliente esté conforme hacecon la personalización ha de hacer clic en botón hecho"HECHO".
Si no es del agrado puede eliminar el o los archivos subidos y subir otros.
Importante: Después de cada modificación hacer clic en botón "HECHO" para guardarque lalos personalización.cambios se queden guardados.