Durante mucho tiempo, quise añadir este tipo de funcionalidad a mi sitio en Webflow. Revisé foros y busqué por toda la red en busca de soluciones. Finalmente, el año pasado decidí que iba a implementar esta función en un nuevo sitio en el que estaba trabajando. Punto. Iba a encontrar la manera.
Lo admito. Tengo mis vicios. ¿Té dulce? Presente. ¿Videos de perritos haciendo monerías en Instagram? Presente. ¿El amor? Bueno, ya sabes cómo dice la canción. Pero uno de mis vicios desde hace mucho tiempo ha sido Product Hunt.
Me encanta ese sitio y no pasa un día sin que le eche un vistazo. Si lo piensas bien, muchas de las cosas que hacen que ese sitio sea especial, desde un punto de vista técnico, son bastante sencillas. Haces clic en un botón y sumas un voto. Claro, tiene funciones de inicio de sesión y comentarios, pero en esencia, el sitio trata sobre votar cosas.
Pasé largas horas consumiendo azúcar, leyendo documentación de API y enviando pruebas a Zapier. Casi tiro la toalla, hasta que contacté a Waldo del equipo de atención al cliente. Waldo sabía que necesitaba ayuda con la API y me puso en contacto con el fantástico Bartosz Kustra. Bart es parte del equipo de control de calidad de Webflow y me ayudó a descifrar cómo lograrlo. Requirió bastante código personalizado tanto en Webflow como en Zapier, pero al final, gané la batalla.
Luego, cuando se añadió soporte para Webflow Ecommerce en Zapier, el equipo también incluyó algo que pasó casi desapercibido: la actualización de elementos en vivo.
Esta es la funcionalidad que necesitas para actualizar tus colecciones usando Zaps de Zapier. Esto hace que sea aún más fácil crear tu propio sistema de votos.
Entonces, ¿cómo se hace? ¡Manos a la obra!
Cómo crear tu propio sistema de votos en Webflow
Lo primero que debes hacer es crear un proyecto en Webflow, añadir una colección CMS y algunos elementos.
Lo que contenga esa colección depende de ti, pero necesitarás un par de campos para que tu sistema de votos funcione:
- Un campo numérico para registrar cuántos votos tiene tu elemento
- Un campo de texto plano para guardar los ID de tus elementos (podrías usar otros tipos de campo, como el numérico, pero el texto plano es más flexible; después de todo, ¡los ID pueden incluir letras!)
Ahora que tienes eso configurado, dirígete a la configuración de tu proyecto y ve a la pestaña de integraciones. Desplázate hacia abajo hasta llegar a la sección titulada "Acceso a la API".
Ahora, genera un token de API y cópialo. Te recomiendo guardar ese token en un lugar seguro, ya que es básicamente una contraseña para leer y escribir en la base de datos de tu sitio (es decir, en sus colecciones).
A continuación, tendrás que usar una aplicación llamada Postman.
Cómo usar Postman para obtener los ID de elementos de Webflow para Zapier
Mientras obtienes los ID de tus elementos, también querrás capturar el ID de tu colección.
Ahora que tienes los ID de tus elementos, vuelve a tu colección y añádelos al campo de texto mencionado anteriormente. Este ID es lo que hace que la actualización en vivo de Zapier funcione con el CMS de Webflow.
Alternativamente, puedes usar un método como este del legendario Matthew Munger. En el video a continuación, él te muestra cómo usar Integromat para actualizar los ID de las colecciones de forma masiva.
Una vez que hayas añadido esos elementos, es hora de hablar sobre cómo estructurar tu sitio. El mío se ve más o menos así:
Esta es mi lista de colección de elementos por los que la gente está votando. La lista está ordenada según el campo que contiene el número de votos. He colocado mi lista en la página de inicio de mi sitio.
Para que esto funcione, necesitarás añadir un botón en el que los usuarios puedan hacer clic para votar. Pero ten en cuenta que utilizarás los envíos de formularios como activador (trigger) en Zapier. Así que, en lugar de añadir un botón, añade un formulario dentro del elemento de la colección.
El formulario predeterminado de Webflow contiene dos campos: nombre y correo electrónico. También hay una etiqueta para cada campo. Borrarás todo lo que hay dentro del bloque del formulario, excepto el botón de envío.
Ahora, coloca un elemento de código HTML (embed) dentro de ese contenedor de formulario (Form Wrapper) al mismo nivel que el botón de envío:
En este elemento de código, añade algo de código para las entradas (inputs). Aquí tienes una captura de pantalla de mi código. Fíjate en que estoy pasando los datos dinámicos de la colección a través del formulario como valores. Esto significa que, cuando se envía el formulario, los datos de la colección están disponibles para usarse en Zapier.
Puedes obtener este código para usarlo en tus propios proyectos aquí:
<input type="hidden" name="Item ID" value="TUINFORMACIONDECOLECCIONAQUI">
<input type="hidden" name="Item Name" value="TUINFORMACIONDECOLECCIONAQUI">
El formulario transmite dos valores que Zapier necesitará para que esto funcione. El primero es el ID del elemento que mencionamos antes. El segundo es el nombre del elemento de la colección.
Cuando empecé a construir esto, pensé que simplemente pasaría también el número de votos de la colección. Pero después de pensarlo y probarlo, descubrí que era un método defectuoso.
El problema con ese enfoque es que, si visito la página y el recuento actual es de 10 votos y se carga en el formulario, y luego dejo el navegador abierto el resto del día, otras personas habrán añadido votos mientras yo no estaba. Y cuando vuelva a mi equipo donde cargué la página ayer y vote, estaré restando votos a un producto.
Así que la respuesta a esta cuestión fue utilizar algunas funciones más avanzadas de Zapier para que esto funcionara. Pero, antes de ponernos manos a la obra en Zapier, tendremos que ponerle nombre a nuestro formulario, publicar nuestro proyecto y luego enviar el formulario en uno de los elementos de la colección una vez para que Zapier tenga los datos que necesitamos.
Ahora que has logrado eso, dirígete a Zapier para hacer que esto funcione.
¿Prefieres ver este tutorial?
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Conexión con Zapier
Crea un nuevo Zap y haz que su activador sea el envío de un formulario de Webflow.
Aquí seleccionarás tu sitio y el formulario que enviaste antes de entrar en Zapier. El siguiente paso es donde la cosa se pone un poco más avanzada, pero es la magia detrás de todo esto. Usa la herramienta Webhooks by Zapier. Y para la acción, elige GET.
Lo que quieres obtener es el número de votos que tiene el elemento cuando un usuario hace clic en el botón de votar. Para hacer eso, puedes usar algo de código del sitio para desarrolladores de Webflow. Específicamente, vas a usar la llamada para obtener un solo elemento.
Webflow tiene llamadas de ejemplo para la API a un lado de la documentación y puedes copiar la dirección para obtener un solo elemento.
A continuación, pega esta dirección en el cuadro de URL para la plantilla GET en Zapier. Tendrás que hacer un par de cambios. El primer conjunto de números que verás es el ID de tu colección. Sustitúyelo por el ID de colección que obtuvimos antes usando Postman.
El segundo conjunto de números es el ID del elemento, y puedes añadirlo de forma dinámica desde el activador de envío de formulario en el paso 1.
Puedes dejar el resto de esta pantalla de personalización de GET tal cual hasta llegar al final, a la sección etiquetada como "Headers". En esta sección, añade accept-version como encabezado y dale el valor 1.0.0. El segundo encabezado que debes añadir es Authorization, cuyo valor debe ser "Bearer" seguido de un espacio y tu clave API. Así es como tengo configurado el mío.
Prueba este paso y sigue adelante. Hasta ahora, has capturado el envío del formulario y, con ese GET, has obtenido el número de votos que tiene el elemento actualmente. Ahora, necesitas sumar 1 a ese número. Para ello, utiliza la herramienta Formatter de Zapier.
Para el evento, elige "Numbers". Usa la operación de suma (add) en el cuadro de selección. En el primer campo, añade el número de votos que tiene el elemento actualmente, obtenido de nuestra acción GET en el paso dos. Luego, añade otro campo y escribe el número 1.
Ahora, al continuar, ¡Zapier sumará el número actual de votos con el voto que el usuario acaba de añadir! ¡Hurra! ¿Mi profesor de matemáticas de primaria estaría orgulloso?
Bien, pasemos al cuarto y último paso. Ahora quieres usar ese importantísimo Zap de actualización de elemento en vivo (Update Live Item) de Webflow. Asegúrate de elegir "Update Live Item" aquí y no solo "Update Item".
La primera opción actualizará el elemento y lo publicará. La segunda solo actualizará el elemento y tendrás que iniciar sesión y publicar el sitio para que la gente pueda ver los cambios. Y eso no funcionará en este caso.
Selecciona el mismo sitio que estabas usando, así como la colección. Una vez hecho esto, rellena el formulario.
Asegúrate de que "archived" y "draft" estén configurados en "no", luego haz clic en continuar y envía una prueba a Webflow.
Una vez que la prueba sea exitosa, activa tu Zap y ¡listo! Ya tienes un sistema de votos positivos integrado en Webflow. Ahora, vuelve a Webflow y añade los toques finales.
Cuando la gente vote, querrás que sepan que algo está pasando. Para ello, diseña el estado de éxito (success state) de tu formulario para que tenga el mismo tamaño que tu botón. Luego, añade un GIF de carga para que, cuando el usuario envíe el formulario, sepa que se está procesando una acción.
Después, en la sección de código personalizado antes del cierre de la etiqueta body de la página o del sitio, añadirás un script más:
<script>
Webflow.push(function() {
$(document).on('submit', 'form', function() {
// Recargar página tras 3000 milisegundos
setTimeout(function() { location.reload(true); }, 2000);
});
});
</script>
Vuelve a publicar el sitio. Ahora, cuando alguien vota:
- Ve que el formulario se envía.
- Se le muestra un GIF para que sepa que algo está ocurriendo en segundo plano.
- En Zapier, su voto se está añadiendo.
- Y la página se recarga después de 3 segundos, mostrando que su voto ha sido añadido.
Una cosa que notarás en esta configuración es que un usuario podría votar una y otra vez por el mismo elemento, ya que no tenemos un sistema de inicio de sesión. No quería entrar en demasiados detalles en esta entrada del blog, pero en mi versión real de esto, añadí código personalizado a mi página de inicio para establecer un elemento en el almacenamiento local (local storage) cuando el usuario hacía clic en el botón de votar. Una vez añadido ese elemento, ocultaba el botón para ellos. Podrían visitar otros navegadores o dispositivos, o borrar su caché. Pero si quisiera un sistema a prueba de balas, probablemente no usaría Webflow como solución.
Puedes usar esto para un sistema de votos, o para muchas otras cosas. Podrías recrear esa función de aplausos que ves en los artículos de Medium, contar cuántas veces alguien compartió tu artículo en redes sociales o crear tu propia encuesta.
Si quieres ver cómo lo construí, puedes clonar el proyecto aquí.
¡Me muero de ganas por ver cómo aprovechas esta idea para crear cosas increíbles!
