Una de las cosas que menos me gusta del CMS de Webflow es que - a día de hoy - no se pueden hacer cosas complejas con él como filtros por dos parámetros o crear un sistema de likes y favoritos.

Sin embargo, eso abre oportunidades a que otros actores del ecosistema puedan nacer, crecer y existir.

Y este es el caso de Jetboost.io, que nace (o aparece) a principios de 2020 con el objetivo de dar superpoderes a Webflow sin requerir extensivos conocimientos técnicos.

A las funcionalidades de filtrado y búsqueda en el sitio que ofrecían hasta ahora, se añade una nueva funcionalidad: añadir como favoritos. Vamos a verlo en profundidad.

Creando un sistema de favoritos

Vamos a ver como añadir la funcionalidad de favoritos en simplemente 5 pasos.

  • Crear una cuenta de Jetboost.io
  • Configura la funcionalidad
  • Añade el script a tu página
  • Crea el botón de favorito
  • ¡Dale superpoderes!

Para poder empezar debes tener una Collection List creada en tu web

Para el primer paso, de momento se encuentra en fase beta, por lo que deberás solicitar un acceso personalizado a esta funcionalidad beta. Puedes escribirles por redes sociales https://twitter.com/Jetboostio para solicitar este acceso.

Añadiendo el Boost

Las diferentes funcionalidades en Jetboost, se llaman "boosts" y debes añadir un sitio, dándole acceso a tu cuenta de Webflow. El proceso de autorización es muy sencillo, simplemente accede con tus credenciales de Webflow y estará listo.

Después, dale a Add Booster, selecciona Favorite CMS items y dale a Create.

Te pedirá ahora que selecciones una Collection List de las que tienes creadas en tu sitio web - debes crearla antes de empezar.

Después, deberás crear en tu Collection List, en Webflow un campo de tipo Number en el que se almacenarán los valores de veces que se ha marcado como favorito cada elemento.

Ahora, si utilizas un sistema de gestión de usuarios, como Memberstack o Memberspace podrás configurar ahora la conexión para que sólo vean los favoritos de cada usuario.

Configura estos parámetros y estará lista tu configuración.

Añadiendo el script

Este paso, es realmente sencillo.

Simplemente pasa al segundo paso, Jetboost Script, copia y pega este código en la sección de código personalizado de tu web.

Solamente sigue las instrucciones, haciendo click en el primer botón, copiando y pegando en el Head.

Configurando el botón de Favoritos

Esto es quizás lo más complicado. (Pero no tanto).

Simplemente deberemos hacer lo siguiente:

Añadir la clase que te indica Jetboost ****al Collection List Wrapper del elemento en el que queramos la funcionalidad.

Después, crea un elemento HTML embed y copia y pega el código que te aparece en la pantalla dentro del mismo. ¡Y listo!

Creando el botón de favorito

Ahora, para que podamos tener un botón de favorito, tenemos que hacer una estructura particular de Divs que ya nos vienen predefinida.

Lo primero, es crear un Div que le pongamos la clase jetboost-toggle-favorite-** (la que os indique)**

Dentro de ese div, deberemos añadir otros tres Divs para los tres posibles estados que tenga el botón: Cuando está como favorito, cuando no está como favorito y el estado intermedio de guardando.

Sólo es necesario el estado de cuando no está como favorito, los demás son opcionales

Podemos configurar ahora como queramos el elemento que activará la función de favoritos, el único requisito es que sea un Button, un Link o un Link Block.

Este elemento puede estar en cualquier lugar de tu web, sin ningún tipo de problema.

En mi caso, he creado un Div de 30x30 con un corazón sin relleno en el caso de que no esté favorito, y con relleno rojo en caso de que si lo esté.

(Puedes ocultar y mostrar uno y otro para que se pueda editar mejor).

¡Y listo!

Ahora publica y comprueba que tu sitio (en la versión .webflow.io) tiene la funcionalidad incluída. Si no pagas, no tendrás la posibilidad de poner esta función en tu dominio propio. Si hay algún fallo, aquí te lo mostrará y te dirá que tienes que hacer para corregirlo.

Añadiendo superpoderes.

Ahora, hay 3 "superpoderes" que puedes añadir a esta funcionalidad:

  • Crear una lista de favoritos que muestre los elementos favoritos de un usuario.
  • Mostrar el número total de favoritos que ha marcado un usuario
  • Actualizar en tiempo real el número de veces que se ha marcado como favorito.

Los tres casos son realmente útiles y están muy bien explicados, por lo que no entraré en detalles de cada caso, pero el procedimiento habitual es añadir una clase específica a un Div y seguir los pasos correspondientes.

En conclusión: Una gran herramienta si la necesitas

Puede que a mucha gente estas funcionalidades no le parezcan muy relevantes a alguien que no lo necesite. Pero para aquella persona que necesite este tipo de funciones, esta es la mejor manera de implementarlas.

No es necesario jugar con código, ni tocar funcionalidades avanzadas, ni nada complejo.

Simplemente seguir las instrucciones que te da Jetboost.io y listo.

En mi opinión, por 9€/mes puede que sea algo caro para algunos, pero realmente si necesitas esta función, es una decisión realmente sencilla, ya que puedes utilizarlo en todas las webs que necesites.

¡Espero que os haya gustado esta review!