Cómo añadir filtrado y ordenación dinámicos a tus sitios web en Webflow

Paso 2: Creación de atributos de filtrado y ordenación

El CMS de Webflow nos permite mostrar contenido y categorías de forma dinámica según el contenido de una base de datos. Sin embargo, en Webflow no podemos crear clases diferentes de forma nativa para cada elemento de la colección (que es lo que hicimos con el contenido estático).

Aquí es donde entra en juego JavaScript. En este paso, prepararemos la estructura correcta para asegurarnos de que el código personalizado funcione correctamente más adelante.

Todas las categorías que utilicemos para filtrar y ordenar deben presentarse dentro del elemento mix. Preferiblemente, mantendremos el mismo nivel de anidamiento para que el código personalizado sea más limpio.

Estas categorías no tienen por qué ser visibles. Si necesitas ocultarlas, puedes usar la opción de visualización none, solo asegúrate de que existan en la estructura HTML.

Filtraremos nuestras publicaciones por categoría y las ordenaremos por fecha, así que debemos asegurarnos de que ambos campos estén completos. Para que la ordenación por fecha funcione correctamente, la fecha de publicación debe estar en formato año-mes-día. Esto es importante porque el código analiza la fecha en ese orden.

Lo último que haremos en este paso es especificar los nombres de clase para los elementos que tienen categorías de filtrado y ordenación. En nuestra plantilla, algunos elementos ya tenían clases, así que añadimos las clases combinadas filter-category y sort-category.

Paso 3: Creación de controles de filtro y ordenación

En cualquier parte de la página donde quieras añadir controles de filtrado y ordenación, añadiremos un div de Controles de contenido que contenga dos divs secundarios: Bloque de filtro y Bloque de ordenación. Separar estos controles facilita mucho el diseño posterior.

Ahora aprovecharemos al máximo el CMS de Webflow y crearemos nuestros botones de filtro a partir de la colección de categorías.

Para ello, añadiremos una lista de colección dentro del bloque de filtros y la conectaremos a la colección de categorías.

Una vez conectada, añade un elemento de código incrustado dentro de cualquier elemento de la colección en la lista.

Dentro del elemento embed, añade el código HTML para el botón de filtro:

<a class="filter-button w-button" data-filter=".category-class" href="#">Nombre de la categoría</a>

Como habrás notado, usaremos el nombre de clase filter-button para darle estilo. También usaremos la clase w-button, que es el estilo predeterminado de Webflow y nos permite ver nuestros elementos de inmediato en el Diseñador.

Ahora, aprovechando el gran poder del CMS de Webflow, podemos aplicar dinámicamente los nombres de categoría y los atributos de filtro de datos:

Ahora necesitamos añadir un botón que permita a los visitantes del sitio restablecer sus filtros para mostrar todo el contenido. Vamos a añadir este botón dentro del bloque Content controls y le asignaremos el nombre de clase filter-button.

Establece el valor de este atributo data-filter en “all”.

Ahora, como usamos el mismo nombre de clase, al dar estilo a nuestros botones de filtro, esto afectará a todos los elementos incrustados.

También añadí otra clase combinada llamada reset al botón de restablecer y le di un estilo un poco diferente.

Lo último que queremos hacer en este paso es añadir nuestros botones de ordenación dentro del Sort block.

Necesitamos dos botones:

1. Uno que ordene las entradas del blog de la más antigua a la más reciente (ascendente)
2. Uno que ordene las entradas del blog de la más reciente a la más antigua (descendente)
   

Ambos botones necesitan atributos data-sort. Yo usé date:asc y date:desc.

Consejo profesional: MixitUp añade un nombre de clase adicional llamado mixitup-control-active a cualquier botón de control que haya sido clicado. Podemos usarlo para diseñar un estado activo para nuestros controles añadiendo esta clase combinada a nuestros botones existentes, dándole el estilo que queramos y luego simplemente eliminando la clase combinada.

Paso 4: Añadir el código JavaScript personalizado

De nuevo, al igual que en nuestro ejemplo anterior con el contenido estático, añadiremos el código al área de código personalizado a nivel de página, antes de la etiqueta de cierre del cuerpo ( </body>).

Para el filtrado de contenido dinámico, el código es un poco más complicado y requiere 6 pasos:

1. Conectar la biblioteca MixitUp a través del enlace CDN
2. Convertir cualquier texto a un formato compatible con CSS (elimina todos los caracteres especiales o espacios)
3. Crear atributos de filtrado dinámicos a partir de las clases filtering-categories
4. Crea atributos de ordenación a partir de las sorting-categories
5. Define el contenedor con el contenido filtrado
6. Crea la llamada para la función mixer
   

¡Manos a la obra! Vamos a añadir nuestro código personalizado paso a paso.

1. Conecta la biblioteca JavaScript MixItUp mediante el enlace CDN

<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js"></script>

La siguiente parte del código contendrá varios bloques (2-6), pero todos ellos irán dentro de una misma <script> etiqueta

2. Convierte cualquier texto a un formato compatible con CSS

var conv = function (str) {
    if (!str) {
        str = 'empty';
    }  return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '')
              .replace(/ /g, "-")
              .toLowerCase()
              .trim();
  };

3. Crea atributos de filtrado dinámicos a partir de las clases “filtering-categories”

Como nuestro elemento filter-category se encuentra a dos niveles de profundidad dentro del elemento mix, utilizaremos dos parámetros parentElement. Si tu diseño es diferente, ajusta este parámetro según corresponda.

var catArray = document.querySelectorAll('.w-dyn-item .filter-category');
  catArray.forEach( function(elem) {
    var text = elem.innerText || elem.innerContent;
    var className = conv(text);
    elem.parentElement.parentElement.classList.add(className);
  });

4. Crea atributos data-date personalizados a partir de las fechas de las publicaciones

Al igual que con las filter-categories, debemos tener en cuenta la profundidad de la información de ordenación dentro del elemento mix. En nuestro caso, son los mismos dos niveles, así que usaremos dos parámetros parentElement.

  var sortArray = document.querySelectorAll('.w-dyn-item .sort-category');
  sortArray.forEach( function(sortElem) {
    var sortText = sortElem.innerText || sortElem.innerContent;
    sortElem.parentElement.parentElement.setAttribute('data-date', sortText);
  });

5. Define el contenedor con el contenido filtrado

Usa el nombre de clase o el ID de tu lista de colección.

var containerEl = document.querySelector('.posts-collection-list');

6. Crea la llamada para la función mixer

mixitup(containerEl);

Ya tenemos todas las piezas, ¡qué bien! Ahora vamos a colocarlas dentro del área de código personalizado en la configuración de la página:

<!--- // 1) Conexión de la librería MixItUp JS mediante enlace CDN público --->

<script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.0/mixitup.min.js">
</script>

<script>

// 2) Función reutilizable para convertir cualquier cadena/texto a un formato compatible con CSS
  var conv = function (str) {
    if (!str) {
        str = 'empty';
    }  return str.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '')
              .replace(/ /g, "-")
              .toLowerCase()
              .trim();
  };

// 3) Creación de clases de elementos dinámicos a partir de sus categorías para el filtrado:
  var catArray = document.querySelectorAll('.w-dyn-item .filter-category');
  catArray.forEach( function(elem) {
    var text = elem.innerText || elem.innerContent;
    var className = conv(text);
    elem.parentElement.parentElement.classList.add(className);
  });

// 4) Creación de atributos data-date personalizados a partir de las fechas del blog:
  var sortArray = document.querySelectorAll('.w-dyn-item .sort-category');
  sortArray.forEach( function(sortElem) {
    var sortText = sortElem.innerText || sortElem.innerContent;
    sortElem.parentElement.parentElement.setAttribute('data-date', sortText);
  });

// 5) Establecer la referencia al contenedor. Usa el nombre de clase de tu lista de colección o el ID de la misma
  var containerEl = document.querySelector('.posts-collection-list');

// 6) Llamar al plugin MixitUp
  mixitup(containerEl);

</script>

¡Y listo! Ya tenemos configurados nuestros filtros dinámicos para el blog. Lo último que queda es publicar el sitio web y probar el resultado.

La plantilla Notable que adapté para filtrar y ordenar publicaciones dinámicas en un blog con CMS es gratuita para clonar y usar en Webflow Showcase.