Webflow es una de nuestras herramientas favoritas, debido al potencial de independencia que ofrece a los equipos, su sencillez y rapidez a la hora de construir páginas web.
Sin embargo, actualmente todavía encontramos algunas limitaciones en la herramienta, como el filtrado de elementos del CMS. Por eso queremos mostrar las diferentes opciones de filtrado de elementos de Webflow CMS, para que puedas elegir mejor la que se adapte a tu proyecto.
Ahora hay 4 opciones que consideramos para nuestros proyectos:
- Filtrado nativo con Webflow
- Filtrado Jetboost
- F'in Sweet CMS Library filtrando
- Filtración de Mixitup
En este post descubriremos el caso de uso de las 4 opciones y qué caso es mejor para tus necesidades.
Opción 1: Filtrado nativo de Webflow CMS
Aunque las opciones son limitadas en Webflow en ciertos casos de uso, las capacidades nativas de filtrado de Webflow pueden ser suficientes.
Se puede aplicar un filtro a cualquier colección desde su pestaña de configuración. Puede filtrar por cualquiera de los campos de su colección, utilizando la lógica para comprobar el valor de un campo.
¿Qué tipos de filtro puedo hacer?
En general, la lógica de filtrado con Webflow es bastante sencilla, pudiendo comprobar si un elemento coincide con sus criterios de búsqueda o no.
En el caso de archivos como imágenes, interruptores y similares también puedes utilizarlos como filtros para configurar la visibilidad en tu página. Puedes, por ejemplo, mostrar sólo aquellos elementos que tengan una imagen configurada.
Un punto positivo es que puedes combinar estos flujos, ya sea que cumpla con todos los filtros que le impongas o que sólo tenga que cumplir con algunos de ellos. Esto lo hace muy versátil a la hora de mostrar exactamente la información que quieres de tu colección.
Sin embargo, no es posible dejar que el usuario modifique estos filtros. Tendrá que darles el contenido prefiltrado.
¿Para qué sirve este filtro?
Este método puede ser muy útil para filtrar el contenido de Webflow CMS que no será modificado. Por ejemplo para una página de Categorías de un Blog.
Cualquier caso en el que el usuario no tenga que modificar los filtros será apropiado para este método, además de ser el más rápido ya que es nativo de Webflow, y no requiere código para su implementación - a diferencia del resto.
¿Para qué no sirve este sistema de filtrado?
En cualquier caso en el que necesite una lógica de filtrado que el usuario pueda modificar, no podrá utilizar este sistema y tendrá que recurrir a las alternativas propuestas.
Opción 2: Filtrar el Webflow CMS con Jetboost
Bajo el nombre de Jetboost se agrupan un conjunto de productos, llamados boosters, que nos permiten añadir funcionalidades a nuestra página y CMS en Webflow.
Además del filtrado del que hablaremos aquí, también hay potenciadores para buscar una colección en tiempo real, marcar como favoritos, añadir paginación o marcar automáticamente los artículos como archivados en nuestro CMS. Todos ellos son de pago, costando 9 dólares/mes cada uno o entre 19 y 29 dólares al mes si se prefiere comprar uno de los packs que ofrecen.
Para incluir el filtrado en nuestra página, el proceso es bastante sencillo, Jetboost nos guía a través de un configuradordividido en pasos, donde comenzaremos seleccionando sobre qué colección queremos filtrar y cómo queremos que sea el filtrado, posteriormente nos ofrecerá unos códigos y nombres de clases que deberemos poner a nuestros elementos en Webflow.
Todo esto se hace de forma guiada, con pequeños vídeos que nos pueden ayudar, además verificará automáticamente si los pasos se han realizado correctamente.
¿Qué tipos de filtro puedo hacer?
Tenemos las llamadas opciones básicas, filtrado con botones de radio, casillas de verificación, botones o enlaces. Pero también nos ofrece filtros multirreferencia, múltiples filtros combinados o incluso filtro + búsqueda.
Para ver todo lo que se puede conseguir con estos filtros Jetboost nos proporciona una página de ejemplo que también podemos clonar en nuestro Webflow.
¿Para qué sirve este sistema de filtrado?
Jetboost es útil cuando queremos filtrar nuestras colecciones de forma sencilla pero sin perder funcionalidad, ya que nos ofrece una gran variedad de filtros así como la posibilidad de combinarlo con un campo de búsqueda.
Por lo tanto, es una buena opción para los usuarios que no son muy técnicos pero que desean crear un filtro bastante complejo en su página.
¿Para qué no sirve este sistema de filtrado?
El mayor problema que puede tener Jetboost para algunos usuarios es su precio, que va desde los 9$ hasta los 29$ al mes si queremos utilizar varios de sus boosters. Este precio se paga cuando nuestro proyecto ya está en producción, es decir, en la web final ya terminada, mientras nosotros seguimos creándola, probar Jetboost es totalmente gratuito.
Si el presupuesto es un problema o queremos crear un filtro bastante sencillo, su coste puede no estar justificado para algunos usuarios.
Opción 3: Filtrar el Webflow CMS con la biblioteca F'inSweet CMS
F'in Sweet es una agencia de desarrollo de Webflow en Estados Unidos creada por Joe Krug que busca ampliar los límites de Webflow a través de la programación.
Una de las iniciativas que han creado es la CMS Library, una biblioteca de código que permite aumentar las posibilidades que ofrece Webflow de forma nativa, permitiendo cosas como combinar colecciones, ordenarlas, hacer scroll infinito y por supuesto, filtrar.
Para realizar el filtrado, es necesario preparar el sistema de filtrado siguiendo las instrucciones, muy bien explicadas tanto en la documentación técnica como en los videotutoriales, así como insertando un pequeño script de código.
Básicamente esta librería se encarga de buscar el texto presente en el código de los elementos del CMS . Así que es necesario que el contenido por el que se quiere filtrar un elemento esté presente - incluso si puede estar oculto.
Para facilitar aún más la generación de este código, han desarrollado un constructor visual para el mismo, que simplemente siguiendo los pasos de los tutoriales te permite introducir la funcionalidad en tu proyecto.
¿Qué tipos de filtro puedo hacer?
Tiene la posibilidad de filtrar por múltiples tipos de campo, como buscadores, desplegables, selectores, botones de radio, casillas de verificación... pudiendo combinarlos como desee.
Lo mejor de esta librería es que es completamente gratuita, sin límites de uso. Por eso se convierte en una de las soluciones más prácticas y personalizables.
¿Para qué sirve este sistema de filtrado?
Para todas aquellas situaciones en las que necesites que un usuario aplique determinados filtros a tu biblioteca de elementos.
Se pueden combinar varios tipos de filtros para conseguir funcionalidades de filtrado realmente complejas, de forma muy sencilla.
La configuración de este script es accesible incluso para personas sin conocimientos técnicos, gracias a la extensa documentación y los tutoriales que la acompañan, así como al constructor visual de scripts.
¿Para qué no sirve este sistema de filtrado?
Desde el punto de vista de la analítica, es complejo medir cuándo se utilizan los filtros, ya que requiere una implementación con código para medir los eventos.
Es necesario establecer las opciones de filtrado manualmente en los selectores, por ejemplo si quieres filtrar por 3 categorías (Web Builders, App Builders y API) tendrás que crear manualmente estas tres opciones. En caso de aumentar las categorías tendrá que hacer una actualización manual de estos filtros.
Opción 4: Filtrado mediante la biblioteca MixitUp
Esta opción es una de las más versátiles, ya que permite utilizar una librería de filtrado como Mixitup en el Webflow CMS. Sin embargo, hay que tener bastantes conocimientos técnicos para que funcione.
Puedes encontrar la biblioteca y toda su documentación desde este enlace.
Esta dificultad, sin embargo, se simplifica gracias al trabajo del equipo de Webflow, que ha preparado un tutorial sobre cómo implementarlo directamente en Webflow, cuya lectura es recomendable antes de decidirse por esta opción:
¿Para qué sirve este sistema de filtrado?
Para sistemas de filtrado complejos en los que se desea tener un mayor control sobre el sistema de filtrado.
Puede incluir ciertas opciones que no estarían disponibles en ninguna de las anteriores, como que se creen filtros automáticamente a partir de una colección o que se añadan atributos que permitan medir más fácilmente.
En cualquier caso, los límites son muy pocos si se tienen los recursos y los conocimientos adecuados para hacerlo. La biblioteca funciona increíblemente bien y ofrece mucha versatilidad.
¿Para qué no sirve este sistema de filtrado?
En los casos en los que no tengas un desarrollador en tu equipo, esta opción no es recomendable. Eso porque, aunque crear el sistema no es tan difícil, mantenerlo o hacer cambios en él es complejo y requiere dedicación de recursos técnicos.
¿Qué debo utilizar para filtrar mis proyectos Webflow?
Obviamente, no habrá una respuesta igual para todos los proyectos, ya que dependerá de los requisitos y los recursos de que se disponga. Sin embargo, podemos darle una pequeña guía para que pueda tomar una decisión más informada.
Si vas a implementar un filtrado básico de CMS, puedes utilizar perfectamente el sistema nativo de Webflow. Para cualquier filtro que no vaya a ser modificado es la mejor opción.
En caso de que el usuario pueda modificar los filtros, tendremos tres opciones, cada una de ellas adecuada a un caso:
- Jetboost es el más fácil de configurar y mantener actualizado, perfecto para equipos que no tienen muchos conocimientos técnicos o no pueden dedicar los recursos. Es nuestra opción favorita para trabajar para los clientes. El precio es de 9€/mes para el filtrado en producción.
- F'insweet: La opción por defecto a utilizar para filtrar webflow porque es completamente gratuita y no es demasiado compleja de instalar, además de permitir mucha flexibilidad.
- Mixitup: Para casos en los que quieras tener un control absoluto del filtrado, una mayor capacidad de análisis y tengas recursos técnicos que puedas dedicar a implementarlo.
Este ha sido nuestro análisis de los sistemas de filtrado en Webflow. Si has utilizado alguno de estos sistemas en tus proyectos nos encantaría saber cómo lo has hecho.
