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.
Vamos a ver como añadir la funcionalidad de favoritos en simplemente 5 pasos.
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.
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.
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.
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!
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.
Ahora, hay 3 "superpoderes" que puedes añadir a esta funcionalidad:
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.
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!
Descubre el mundo del no-code en 1 hora
Conoce proyectos creados en No-code y descubre las mejores herramientas.
Aprende Gratis
Crea 5 proyectos reales en 6 semanas
Descubre cómo utilizar las mejores herramientas No-code en esta formación práctica.
Empieza a aprender
Academia de herramientas no-code y low–code
.svg){kind=icon}
