Integrar la capa de Doofinder con el carrito de tu tienda

Gracias a que las capas Javascript de Doofinder son altamente personalizables, integrar el botón para añadir un producto al carrito de la compra en el diseño de tu capa es muy sencillo, aunque requiere algunos conocimientos de desarrollo web (si lees este artículo y no te enteras de nada, habla con el programador de tu página).
Para poder añadir contenido adicional a los resultados de la capa necesitamos:

1. Añadir un botón a la plantilla de resultados. El botón contendrá una referencia al identificador interno de nuestro producto, que corresponde al campo id del feed de datos.
2. Configurar un manejador de eventos que escuche la pulsación de cualquier botón de añadir al carrito que se pinte en los resultados de la capa. Al capturar el evento obtendremos el identificador correspondiente al producto pulsado y ejecutaremos código Javascript que haga algo productivo con él.
3. Opcionalmente podemos añadir estilos visuales a nuestro botón (recomendable).
4. Si vamos a reutilizar nuestra plantilla en varios idiomas, podemos utilizar adecuadamente las funciones de traducción de la capa.

Añadir el botón del carrito a la plantilla

Para no liar nuestro código fuente, crearemos la plantilla dentro de una etiqueta script y la incluiremos en nuestra página, donde la capa la pueda encontrar.

La plantilla no es más que la plantilla por defecto con un poco de código HTML adicional:

Como puedes ver, el atributo data-addtocart contiene el identificador del producto.
Para utilizar esta plantilla, hay que configurarla en las opciones de la capa:

Detectar cuándo se añade un producto al carrito

Para ello vamos a utilizar los callbacks de la capa, concretamente el callback loaded, que indica que la capa se ha configurado y nos permite hacer ajustes al vuelo.
Al ejecutarse, el callback loaded recibe la instancia de configuración de la capa. Solamente tenemos que usar las herramientas incluidas para escuchar el evento click en el botón del carrito mediante delegación de eventos:

En este caso lo único que estamos haciendo es mostrar una alerta Javascript, que no es precisamente útil.
Como cada software es un mundo, es aquí donde debes desplegar toda tu creatividad y modificar el callback para que tu producto termine añadido al carrito de la compra partiendo de su identificador único.

Utilizar traducciones

Si planeas utilizar la misma plantilla para diferentes buscadores en distintos idiomas, debes saber que puedes hacerlo sin necesidad de duplicar la plantilla.
Por defecto el idioma base de la capa es el inglés, así que simplemente modifica la plantilla para que se parezca a esto:

Y si tu capa no está en inglés, añade la traducción a las opciones:

Añadir estilos

Aunque esto para ti no será problema, recuerda que mediante CSS puedes modificar el estilo del botón.
En nuestro ejemplo hemos utilizado la clase my-df-addtocart-btn, que podría tener el siguiente estilo asociado:

The End

Como puedes ver, incluir un botón de carrito de la compra en tu capa es cosa de unos minutos. Esperamos que este ejemplo os sea útil.
Cualquier duda que te surja puedes preguntársela a nuestro magnífico equipo de soporte (support@doofinder.com).