En este artículo, quiero guiarte por los pasos más importantes del desarrollo de la segunda parte de "The Movie DB construido en Webflow y Wized". Si no estás familiarizado con ellos, Webflow es una de las herramientas sin código (no-code) más potentes del mundo para crear interfaces web y sitios web, mientras que Wized es la mejor aplicación de Webflow para añadir dinamismo a un sitio web de Webflow y convertirlo en un sitio web dinámico o una aplicación web.
Si no has leído la primera parte del proyecto, puedes encontrarla aquí. En esta segunda parte, añadiré dos características importantes: un filtro dinámico de géneros y la funcionalidad "Cargar más películas".
1. Crear un Filtro Dinámico de Géneros
En la sección de acciones, he creado una nueva carpeta llamada "filter". Dentro de esta carpeta, crearé todas las acciones necesarias para gestionar los filtros, y dentro de ella, una subcarpeta para cada filtro individual.
Estrategia al Crear Acciones
A medida que nuestro proyecto crece, es importante organizar bien las acciones, de lo contrario, será cada vez más difícil trabajar con ellas. No hay una regla; cada uno crea las carpetas según sus preferencias. Personalmente, prefiero crear carpetas para las funcionalidades, y si tengo más de una página, entonces las divido por página. Las que se usan en varias páginas se colocan dentro de la carpeta global, similar a la denominación de clases en Client-first.
Ahora, veamos algunas de las acciones más importantes para gestionar los filtros.
Acción de Envío del Formulario de Filtro
La acción más importante, para ejecutar la llamada con los nuevos filtros, utiliza la función Run (Ejecutar) como acción. Es la acción más potente y la que uso con mayor frecuencia porque ofrece más libertad y es más compacta si tengo muchos comandos. En su interior, podemos escribir JavaScript como si estuviéramos en un editor como VSCode. Esta acción está disponible a partir de Wized embed 2.0.
Wized Embed v 1.0 vs Wized Embed v 2.0
La mayor diferencia en comparación con Embed 1.0 es un enfoque más low-code. Podemos implementar varias acciones de forma no-code, pero para las funcionalidades más complejas, es mejor usar JS. Personalmente, estoy muy contento con este nuevo enfoque porque nos abre las puertas a JavaScript, dándonos acceso a todas sus funcionalidades de inmediato. Con el tiempo, puede que creen una interfaz visual para las funcionalidades más importantes, similar a lo que hace Webflow para HTML y CSS. Pero mientras tanto, ya podemos hacer prácticamente todo con JS.
Establecer Categorías y Acción de Clase Activa
// Obtener el elemento padre
var parentElement = t.node.closest('[wized="filterFormCategoryCheckboxBlock"]');
// Alternar la clase 'is-active'
if (t.node.checked) {
parentElement.classList.add("is-active");
} else {
parentElement.classList.remove("is-active");
}En cada checkbox (casilla de verificación), añado el atributo de valor con el ID de la película. De esta manera, cuando envíe el formulario, tendré un array dentro del objeto del formulario con todos los IDs de las categorías seleccionadas. Este array será utilizado por el fetch como un filtro para obtener solo las películas con esas categorías. Y cada vez que cambia el checkbox, he creado un evento para añadir y quitar la clase is-active en el contenedor del checkbox para cambiar el fondo a azul cuando el checkbox está activo.
Acción de Restablecer Checkbox de Categorías
let checkboxes = document.querySelectorAll(
'input[name="filter-category-checkbox"]:checked',
);
// Recorrer los checkboxes y establecer la propiedad 'checked' en false
checkboxes.forEach(function (checkbox) {
checkbox.checked = false;
// Crear y despachar un evento de cambio para activar el evento change en el input
var event = new Event("change");
checkbox.dispatchEvent(event);
});Cuando hago clic en el botón de restablecer categorías, se ejecuta esta función para desactivar todos los checkboxes activos. Usando la función dispatchEvent, activo el evento de cambio para eliminar la clase is-active.
2. Implementar la Funcionalidad "Cargar Más"
Acción del Botón Cargar Más
// Incrementar página
var v.movies_page_counter++
// Iniciar petición
await Wized.requests.execute('get_popular_movies')
// Actualizar variable movies con las nuevas películas
let currentMovies = v.movies
let newMovies = r.get_popular_movies.data.results
v.movies = [...currentMovies, ...newMovies]Al hacer clic en el botón, se ejecuta este código para incrementar el contador de páginas, ejecutar la petición get_popular_movies con el filtro de página actualizado y, finalmente, añadir las nuevas películas de la petición ejecutada a la variable movies.
Variables Actualizadas
Actualicé la variable movies; ahora solo tiene un array vacío como valor inicial y ya no es calculada (computed). De esta manera, necesito escribir explícitamente el nuevo valor. Luego, añadí las variables categories y categories_render_index para mostrar y gestionar la lista de categorías en los filtros.
Peticiones Actualizadas
Modifiqué la petición get_popular_movies; ahora utiliza discover/movie como el endpoint de la URL. De esta manera, puedo pasar todos los filtros que la API gestiona como parámetros de URL. Para el filtro with_genres, este es el código que utilicé:
let valuesString = f.filterFormBlock["filter-category-checkbox"].join(",");
return valuesString;Recupero el array de IDs de categorías del formulario de filtro, lo convierto en una cadena o string, separando cada ID con una coma. De esta manera, puedo pasarlo al parámetro.
Mejor Práctica para Reemplazar una Petición
Para reemplazar la petición get_popular_movies, primero creé una copia del original, lo renombré a get_popular_movies_old y luego modifiqué la petición. De esta manera, si hay algún error, puedo volver a la versión antigua. Para reemplazarlo dentro de la acción que ya he creado, solo necesito hacer clic en "Used in x action" para ver todas las acciones que lo utilizan.
Diseñador de Webflow Actualizado
En Webflow, creé los nuevos elementos, y para cada elemento que utilizo dentro de Wized, creé un nuevo atributo Wized y publiqué el proyecto.
Sitio en Vivo
Puedes ver y probar la versión en vivo del proyecto:
Probar la versión en vivo
Conclusión
En esta segunda parte del tutorial "The Movie DB No-code con Webflow y Wized", enriquecimos nuestra aplicación web con un filtro dinámico de géneros y la funcionalidad de Cargar Más.
En la próxima parte, añadiremos más filtros (locales y del lado del servidor) y la página de detalles de la película.
