Variantes de producto en la capa de resultados

imok

Una vez más el equipo de desarrollo de Doofinder te trae un tutorial nivel no tocar si no sabes lo que estás haciendo. Si cuando ves código fuente te parece estar viendo el código de Matrix, mejor contacta con tu desarrollador de cámara, que seguro que él te puede ayudar.

¿Qué vas a aprender hoy?

Como dice el título, vamos a aprender a mostrar múltiples variaciones de un mismo producto en la capa, pero como un único producto con varias imágenes que cambian al pasar el ratón por encima de unas circunferencias coloreadas, en lugar de mostrar las variaciones como productos independientes.

Como nos gustan los retos, lo vamos a hacer de forma artesanal, diseñando una forma de representar los datos en el feed que nos haga relativamente fácil la tarea de pintar el HTML que necesitamos en la plantilla de la capa.

Análisis del problema

Vamos a suponer que acabamos de crear nuestra tienda online de teléfonos móviles y ya tenemos un par de modelos que vender: uno en el típico color negro, soso y elegante al mismo tiempo, y otro para gente sofisticada que quiere ver cómo mostrar las variantes del teléfono en todos los colores posibles en un mismo resultado de su capa de búsqueda.

Un producto normal sin variantes tendría, por ejemplo, los siguientes campos:

  • Identificador único de producto
  • Nombre del modelo de móvil
  • Enlace a la página de producto
  • Enlace a la imagen de producto
  • Marca
  • Precio
  • Color

El caso típico para mostrar variantes de producto consiste en repetir ese mismo patrón de campos para cada variante, añadiendo algún parámetro a la URL de la página de producto, y cambiando la URL de la imagen.

Nuestro modelo de teléfono en negro, plata y dorado se exportaría tres veces en el feed, una para cada color, y aparecería como tres resultados independientes en la capa de resultados.

Para que se muestre como un único producto en el feed lo que vamos a hacer es que el campo color contenga todos los valores posibles de color para el teléfono, y vamos a añadir un nuevo campo images que contendrá las diferentes imágenes de las variantes.

Resumiendo, tendremos que:

  1. Exportar la información necesaria en el feed de datos en un formato que sea fácilmente transformable mediante Javascript en el renderizado de la capa.
  2. Configurar la plantilla de resultados de la capa con el HTML adecuado que nos permita pintar el selector de color y las imágenes de las variaciones para aquellos productos que las tengan.
  3. Añadir las funciones de plantilla necesarias para transformar los campos que recibimos en los resultados de búsqueda y que el HTML que se pinte tenga sentido, ya que el valor en bruto no nos va a ser de mucha utilidad.
  4. Añadir la gestión de eventos necesaria para que las imágenes cambien al pasar el ratón por el selector de colores.

Colores e imágenes en el feed de datos

Como ya hemos mencionado, vamos a añadir los campos color e images a los campos habituales de nuestro feed de datos.

El campo color contiene varios valores separados por el carácter de barra horizontal / (MAYUS + 7). En nuestro ejemplo los tres colores que manejaremos son:

  • black
  • silver
  • gold

El campo images es un poco más complejo: necesitamos asociar a cada color de los disponibles, una imagen diferente, todo ello en un único campo de texto.

Para ello vamos a inventarnos un formato, de modo que por medio de secuencias de caracteres específicas podamos extraer los valores que necesitamos.

En el siguiente ejemplo una imagen se define por un color (de entre los disponibles para el producto), un separador :: y la URL de la imagen. Podemos repetir este patrón separando las distintas ocurrencias mediante el separador **.

El feed podría ser algo así:

El campo images, en varias líneas para mayor legibilidad:

Una vez procesado este feed, tenemos todos los datos que necesitamos para programar nuestra plantilla.

Variaciones en la plantilla de resultados

A partir de este punto voy a asumir que tienes un script de capa de Doofinder funcionando con los valores por defecto. Si no es así, puedes crear un script desde tu panel de control de Doofinder. De este modo podemos centrarnos solamente en los cambios que haya que realizar.

El siguiente paso consiste en realizar modificaciones a la plantilla de resultados por defecto de la capa para que incluya las imágenes de las diferentes variantes de color del producto y un selector para poder alternar entre ellas.

Comencemos por pintar las imágenes. En este caso hay 3 supuestos:

  1. Que efectivamente haya varias imágenes, que vendrían en el campo images.
  2. Que no haya un campo images y sí haya un campo image_link (el campo por defecto en un feed normal).
  3. Que no haya ninguna imagen. En este caso no se pintaría nada.

El código HTML que representa los 3 supuestos es bastante sencillo:

En el código verás que se hace referencia a una función remove-protocol y a una función image_variants.

La primera viene incluida con la capa y permite que las imágenes se vean bien tanto si la capa se sirve en una página por HTTP como por HTTPS.

La segunda, en cambio, la tendremos que añadir nosotros para pintar el HTML de las imágenes. Luego veremos cómo.

Para terminar con las modificaciones de la plantilla, añadiremos el selector de variantes, cuyo código es más sencillo si cabe que el anterior:

Aquí declaramos una función color_selector que recibe el valor del campo color y pinta el HTML del selector.

La plantilla completa la incluiremos en nuestra web mediante una etiqueta <script> con un atributo type que el navegador reconozca como texto para que no intente interpretarlo como Javascript.

He aquí el código completo de la plantilla dentro de la etiqueta <script>:

Por último nos quedaría indicarle a la capa dos cosas:

  1. Que utilice la plantilla de resultados que acabamos de crear en lugar de la plantilla por defecto.
  2. Que cuando pida resultados al servidor de Doofinder, no los devuelva transformados, de modo que nuestros campos personalizados estén disponibles para nuestra recién creada plantilla.

Esto lo haremos añadiendo un par de opciones a la capa:

Para pasar la plantilla a la capa lo que hacemos es referenciar, mediante su atributo id, la etiqueta <script> que hemos añadido, y obtener el contenido de dicha etiqueta.

Transformación de datos

Lo siguiente es crear las funciones que hemos declarado en nuestra plantilla y que transformarán los datos recibidos de Doofinder en HTML.

Estas funciones se declaran dentro de un objeto Javascript en las opciones de la capa, dentro de templateFunctions.

Comenzaremos explicando image_variants.

Si recuerdas, el campo images contiene una cadena de texto que representa parejas de color y URL separadas por ::. Cada pareja está separada de la siguiente por **.

Lo que hace la función es partir la cadena para obtener cada pareja y luego, para cada pareja, se extrae el color y la URL y se compone el HTML necesario para pintar una imagen. El color se almacena en un atributo data-image-variant de la imagen.

Solamente la primera imagen se mostrará inicialmente, las demás permanecerán ocultas mediante CSS.

La función color_selector es todavía más sencilla, ya que simplemente obtiene los colores partiendo el valor del campo color por el separador / y pinta el HTML que utilizaremos para seleccionar cada variante. En este caso el color también se almacena en un atributo data-image-variant.

En este punto ya se deberían pintar las etiquetas HTML correctamente, pero probablemente se vea todo un poco mal.

Aplicando un poco de CSS podemos hacer que se vea un poco menos rudimentario:

Gestión de eventos

Si has llegado hasta aquí te habrás dado cuenta de que el selector de colores no funciona.

Para que funcione necesitamos capturar el momento en que el puntero del ratón pasa por encima de los diferentes colores, para leer el atributo data-image-variant y usar el valor para mostrar la imagen de la variante y ocultar las demás.

Pero no podemos declarar esa captura de eventos antes de que se haya inicializado la capa, así que tenemos que esperar a que la capa esté lista. Para ello usaremos el callback loaded de la capa.

El código a continuación es un poco tedioso hacerlo en Javascript puro, así que me he tomado la licencia de escribirlo asumiendo que la página utiliza jQuery. Si no es el caso, ya sabes…

Básicamente el código detecta el evento mouseover del puntero del ratón en la capa y ejecuta una función si concretamente el puntero ha pasdo sobre elementos con la clase .color-selector que tengan además un atributo data-image-variant.

A esto se le llama delegación de eventos y la utilizamos porque permite que la captura de eventos se defina una vez y funcione para cualquier resultado que se pinte, de modo que no tenemos que preocuparnos de hacerlo cada vez que se reciban nuevos resultados.

Cuando se ha detectado el evento deseado en el selector de color, se extrae el color del atributo data-image-variant y se busca la imagen, dentro del mismo resultado, que tenga el mismo valor para el atributo. Entonces se muestra dicha imagen y se ocultan las demás.

Con estos últimos cambios deberías tener una capa que muestra variantes cuando están disponibles y la imagen por defecto cuando no.

¿Quieres más?

Si quieres mejorar todavía más la experiencia, te propongo un par de ejercicios:

  1. En productos con variaciones, haz que cuando el cursor del ratón abandone una variante, aparezca la imagen por defecto (la que viene en el campo image_link.
  2. En productos con variaciones, haz que cuando se pulse uno de los selectores, el usuario vaya a la página correspondiente a esa variación. Dependiendo del formato de los enlaces de tu página es posible que puedas utilizar el código de color para modificar la URL original del producto. Si no, a lo mejor tienes que añadir un nuevo campo al feed de datos.
  3. El campo color únicamente tiene sentido si pretendes utilizarlo para filtrar los resultados. Si lo deseas, puedes probar a programar este ejemplo solamente con el campo images.