Cómo filtrar una colección de CMS de Webflow

Webflow es una de nuestras herramientas favoritas, debido al potencial de independencia que brinda a los equipos, su simplicidad y velocidad a la hora de crear páginas web.

Sin embargo, actualmente todavía encontramos algunas limitaciones en la herramienta, como filtrado de elementos del CMS. Por eso queremos mostrarte las diferentes opciones para filtrar los elementos de Webflow CMS, para que puedas elegir mejor la que mejor se adapte a tu proyecto.

Ahora tenemos en cuenta 4 opciones para nuestros proyectos:

• Filtrado nativo con Webflow
• Filtrado Jetboost
• Filtrado de bibliotecas CMS de Fi'N Sweet
• Filtrado de mezclas

En esta publicación, descubriremos el caso de uso de las 4 opciones y cuál es el mejor para sus necesidades.

Opción 1: filtrado nativo de Webflow CMS

Si bien las opciones de Webflow son limitadas en ciertos casos de uso, las capacidades de filtrado nativas de Webflow pueden ser suficientes.

Se puede aplicar un filtro a cualquier colección desde su pestaña de configuración. Puedes filtrar por cualquiera de los campos de tu colección, utilizando la lógica para comprobar el valor de un campo.

¿Qué tipos de filtrado puedo hacer?

En general, la lógica de filtrado con Webflow es bastante simple, siendo capaz de comprobar si un elemento coincide o no con sus criterios de búsqueda.

En el caso de archivos como imágenes, interruptores y similares, también puedes usarlos como filtros para configurar la visibilidad de tu página. Puede, por ejemplo, mostrar solo los elementos que tengan una imagen configurada.

Un punto positivo es que puedes combinar estos flujos, ya sea que cumpla con todos los filtros que impongas o que solo algunos de ellos tengan que cumplir. Esto hace que sea muy versátil a la hora de mostrar exactamente la información que quieres de tu colección.

Sin embargo, no es posible permite al usuario modificar estos filtros. Tendrás 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 se modificará. Por ejemplo, para un Página de categorías de un blog.

Cualquier caso en el que el usuario no tenga que modificar los filtros será adecuado 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 un lógica de filtrado que el usuario puede modificar, no podrá utilizar este sistema y tendrá que recurrir a las alternativas propuestas.

Opción 2: Filtrar el CMS de Webflow con Jetboost

Bajo el nombre de Jetboost se agrupan a 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, marcarla como favorita, añadir paginación o marcar automáticamente los elementos como archivados en nuestro CMS. Todos ellos son pagados, con un coste de 9$ al mes cada uno o entre 19 y 29$ al mes si prefieres comprar uno de los paquetes que ofrecen.

Para incluir el filtrado en nuestra página, el proceso es bastante sencillo, Jetboost nos guía a través de un configuradorr dividido en pasos, donde comenzaremos por seleccionar en qué colección queremos filtrar y cómo queremos que sea el filtrado, luego nos ofrecerá algunos códigos y nombres de clases que tendremos que poner en 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 llevado a cabo correctamente.

¿Qué tipos de filtrado puedo hacer?

Disponemos de las denominadas opciones básicas, filtrando con botones de opción, 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 un 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 además de la posibilidad de combinarlo con un campo de búsqueda.

Por lo tanto es una buena opción para usuarios poco 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, a partir de 9$ a 29$ al mes si queremos utilizar varios de sus potenciadores. Este precio lo pagamos cuando nuestro proyecto ya está en producción, es decir, en la web final ya finalizada, mientras aún lo estamos creando, probar Jetboost es totalmente gratis.

Si el presupuesto es un problema o queremos crear un filtro bastante sencillo, es posible que su coste no esté justificado para algunos usuarios.

Opción 3: Filtrar el CMS de Webflow con la biblioteca CMS de F'inSweet

F'in Sweet es una agencia estadounidense de desarrollo de Webflow 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 Biblioteca CMS, una biblioteca de códigos que permite aumentar las posibilidades que ofrece Webflow de forma nativa, permitiendo cosas como combine colecciones, ordénelas, con desplazamiento infinito y, por supuesto, filtrando.

Para realizar el filtrado, es necesario preparar el sistema de filtrado siguiendo las instrucciones, muy bien explicadas tanto en el documentación técnica y en el tutoriales en vídeo además de insertar un pequeño script de código.

Básicamente, esta biblioteca se encarga de buscar el texto presente en el código de los elementos del CMS. Por lo tanto, es necesario que el contenido por el que desea filtrar un elemento esté presente, incluso si está oculto.

Para facilitar aún más la generación de este código, han desarrollado un constructor visual para él, que simplemente siguiendo los pasos de los tutoriales le permite introducir la funcionalidad en su proyecto.

¿Qué tipos de filtrado puedo hacer?

Tiene la posibilidad de filtrar por varios tipos de campo, como motores de búsqueda, menús desplegables, selectores, botones de opción, casillas de verificación... poder combinarlos como desees.

Lo mejor de esta biblioteca es que está completamente gratis, 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 ciertos filtros a tu biblioteca de elementos.

Se pueden combinar varios tipos de filtros para lograr funcionalidades de filtrado realmente complejas, de una manera muy sencilla.

La configuración de este script es accesible incluso para personas sin conocimientos técnicos, gracias a la extensa documentación y a los tutoriales que la acompañan y al generador visual de guiones.

¿Para qué no sirve este sistema de filtrado?

Es complejo desde el perspectiva analítica para medir cuándo se utilizan los filtros, ya que requiere una implementación con código para medir los eventos.

Es necesario configurar el filtrar las opciones 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 realice una actualización manual de estos filtros.

Opción 4: Filtrar con la biblioteca MixItUp

Esta opción es una de las más versátiles, ya que permite utilizar una biblioteca de filtrado como Mézclalo en el CMS de Webflow. Sin embargo, es necesario tener bastantes conocimientos técnicos para que funcione.

Puedes encontrar la biblioteca y toda su documentación en este enlace.

Sin embargo, esta dificultad se simplifica gracias al trabajo del equipo de Webflow, que ha preparado un tutorial sobre cómo implementarlo directamente en Webflow, que se recomienda leer antes de decidirse por esta opción:

¿Para qué sirve este sistema de filtrado?

Para sistemas de filtros complejos en los que desea tener más control sobre el sistema de filtros.

Puedes incluir ciertas opciones que no estarían disponibles en ninguna de las anteriores, como crear filtros automáticamente a partir de una colección o añadir atributos que te permitan para medir más fácilmente.

En cualquier caso, los límites son muy pocos si tienes 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, no se recomienda esta opción. Esto se debe a que, aunque crear el sistema no es tan difícil, mantenerlo o realizar cambios en él es complejo y requiere la dedicación de recursos técnicos.

¿Qué debo usar para filtrar mis proyectos de Webflow?

Evidentemente, no habrá una respuesta igual para todos los proyectos, ya que dependerá de los requisitos y recursos disponibles. Sin embargo, podemos darle una pequeña guía para que pueda tomar una decisión más informada.

Si vas a implementar filtrado CMS básico, puedes utilizar perfectamente el sistema Webflow nativo. Para cualquier filtro que no vaya a modificarse, es el mejor opción.

En caso de que el usuario pueda modificar los filtros, tendremos tres opciones, cada una 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 filtrar durante la producción.
• F'insweet: La opción predeterminada para filtrar el flujo web porque es completamente gratuita y no es demasiado compleja de instalar, además de ofrecer mucha flexibilidad.
• Mézclalo: Para los casos en los que desee tener un control absoluto del filtrado, una mayor capacidad analítica y disponga de recursos técnicos que puede dedicar a implementarlo.

Este ha sido nuestro análisis de los sistemas de filtrado de Webflow. Si ha utilizado alguno de estos sistemas en sus proyectos, nos encantaría saber cómo lo ha hecho.

‍