Personalizador de productos en Magento

En comunic-art llevamos días investigando como funcionan los sistemas para personalizar un productos en Magento.

En este proceso hemos averiguado distintas formas de llevar a cabo un personalizador o costumizador. 

Normalmente los clientes piden 2 tipos de personalización que implican abordar los requerimientos de formas muy distintas. Nosotros lo hemos enumerado de la siguiente manera.

  • 1) Personalización de producto hiperrealista.
    • 1.1) Personalizador a partir de capas de imágenes 3D.
    • 1.2) Personalizador a partir de mallas 3D.
  • 2) Personalización de producto a partir de dibujo vectorial (menos realista).

A continuación explicamos en que consiste cada posibilidad.

1) Personalización de producto Magento hiperrealista

En esta imagen vemos el personalizador de timbuk2.com, se trata de un personalizador muy completo y realista. Cada parte de la bolsa se puede "pintar" con una tela distinta, ya sea un patrón, una textura o un color, por ejemplo la parte del medio:

Cutomizador de producto

El resultado es muy realista, parece una fotografía, pero sin duda, no lo es.  

Un personalizador de este estilo se puede hacer de varias maneras. A continuación pasamos a comentar las que nos parecen más interesantes y/o adecuadas:

1.1) Personalizador a partir de capas de imágenes 3D en Magento

Para esta primera opción necesitamos una imagen de base del producto y otras con transparencia de las partes configurables en las distintas opciones que existan.

Las imágenes raramente son fotografías, se suele realizar a partir un producto de modelado en 3D y renderizado con las distintas opciones de colores y texturas.

En el funcionamiento el usuario visualiza la imagen de base del producto: el producto en 3D "pintado" de blanco y puede elegir un color o textura, según la opción que elija el cliente el producto queda personalizado gracias a la superposición de imágenes y el resultado final es muy realista.

Puede ser que el producto tenga varias opciones y zonas por lo que ésta técnica requiere tener un grupo numeroso de capas e implica un gran trabajo de preproducción:

  • Modelado de producto en 3D.
  • Texturizado en todas las opciones de texturas y colores.
  • Definición de zonas personalizables.
  • Guardado de imágenes por zonas, texturas y colores.

El número de capas total será: capa base más número de zonas multiplicado por opciones (color y textura).

Por ejemplo: si tenemos un bolso con parte de delante + parte de detrás + correa + ribete y 10 opciones de color o textura por cada elemento necesitaremos un total de 40 capas. Necesitaremos 10 renders por cada elemento que nos darán un número altísimo de posibilidades de personalización.

Nota: es importante pensar en una nomenclatura que nos pueda servir para identificar las imágenes: modelo, zona, textura o color, posición de capa en el producto final.

A partir de todo este material en Magento se tienen que realizar una serie de trabajos de programación para:

  • Suplantar el sistema que lleva Magento de mostrado de imágenes de la ficha del producto, por el sistema de múltiples capas que necesitará el personalizador
  • Comunicar el sistema de atributos y valores con el personalizador.
  • Poder guardar una muestra de la imagen final para el pedido.

Es importante hacer un sistema flexible y que ahorre tiempo a la hora de crear cada producto configurable desde el backend de Magneto.

1.2) Personalizador a partir de mallas 3D

El mismo resultado se puede conseguir con softwares especializados para la realización de mallas 3D.

En lugar de trabajar con programas 3D estaremos trabajando con photoshop + un plugin especializado en mallas (hay varias empresas que realizan estos plugins y sus precios suelen rondar los 1000€). 

Esta malla va a procesar cada uno de los patrones o texturas que le añadamos a nuestro producto en una determinada area de la imagen, deformando la imagen a fin de reproducir fielmente el volumen y sombra de la pieza. 

Una ventaja sobre el método anterior comentado en el punto 1.1, es que no dependemos de un departamento de modelado 3D y la realización de la malla 3D es más simple. Una posible desventaja es que el sistema de mallas puede presentar alguna limitación dependiendo de la complejidad de la forma del producto. Normalmente está pensado para productos textiles y algunas formas de madera y cerámicas: no es lo mismo una camiseta, una cortina o el bolso de la imagen de ejemplo - que no dejan de ser telas algo deformadas -  que un objeto con volúmenes complejos. 

Hasta este punto, no podemos decir que un método presente una ventaja clara sobre el otro. Pero seguidamente vamos a comentar lo que creemos que es una ventaja importante de este método de mallas sobre el anterior: el caso es, que algunas de estas empresas que ofrecen estos plugins, cuentan también con un motor de render online capaz de procesar la generación de texturas online, desde la web.  Así pues, en este caso, no se necesita tener los renders de cada pieza del producto en cada una de las opciones, será suficiente con cargar la malla y las texturas por separado. O en el caso que se trate de añadir un nueva opción, simplemente subir la textura o patrón.

Este motor web también cuenta con un precio de licencia de otros 1000€ aprox.

*Evidentemente, a parte del precio del plugin + el motor, cabe contar con el trabajo que supone integrar el sistema a Magento. Un trabajo, que siendo totalmente distinto al método anterior, es similar en complejidad y volumen de horas.

 

2) Personalización del producto Magento a partir de dibujo vectorial:

Ver ejemplo de personalizador de producto en proyecto real realizado por comunic-art

A partir de un dibujo del producto se necesita poder "pintar" distintas zonas con colores o texturas.

Personalizador Magento

En este segundo caso el trabajo de preproducción es más simple que en el anterior.

Aquí solo necesitamos tener el producto trazado en dibujo vectorial con las distintas zonas pintadas de blanco y separadas por capas:

Customizador de productos magento

Y no necesitamos tener una imagen para cada opción de la zona.

En el funcionamiento el usuario puede interactuar con la imagen seleccionando las zonas (clic con el ratón) y eligiendo las distintas posibilidades.

Para Comunic-art esta es una más de las experiencias que ha hecho crecer nuestro "Know How" en Magento. A parte de tiendas con personalizador y tiendas estándar podéis consultar otras tareas menos usuales que hemos realizado en Magento en este post:

Nuestra experiencia con Magento.

Consultar otros tipos de customizador: Canvas html5, para camisetas y productos de merchandising