In questo articolo voglio guidarti attraverso i passaggi più importanti dello sviluppo della seconda parte di "The Movie DB sviluppato con Webflow e Wized". Se non li conosci: Webflow è uno dei tool no-code più potenti al mondo per creare interfacce web e siti web, mentre Wized è la migliore app per Webflow per aggiungere dinamismo a un sito Webflow e trasformarlo in un sito web dinamico o una web app.
Se non hai letto la prima parte del progetto, puoi trovarla qui. In questa seconda parte aggiungerò due funzionalità importanti: un filtro dinamico per i generi e la funzionalità "Load More Movies".
1. Creare un Filtro Dinamico per i Generi
Nella sezione delle azioni, ho creato una nuova cartella chiamata "filter". Al suo interno creerò tutte le azioni necessarie per gestire i filtri, con una sottocartella per ogni singolo filtro.
Strategia nella Creazione delle Azioni
Man mano che il progetto cresce, è importante organizzare bene le azioni, altrimenti diventerà sempre più difficile lavorarci. Non esiste una regola fissa: ognuno crea le cartelle in base alle proprie preferenze. Personalmente preferisco creare cartelle per funzionalità, e se ho più di una pagina le divido per pagina. Quelle utilizzate su più pagine vengono inserite nella cartella global, in modo simile alla denominazione delle classi in Client-first.
Vediamo ora alcune delle azioni più importanti per la gestione dei filtri.
Azione di Invio del Form dei Filtri
L'azione più importante, per eseguire la chiamata con i nuovi filtri, utilizza Run function come azione. È l'azione più potente e quella che uso più spesso perché offre maggiore libertà ed è più compatta quando ho molti comandi. Al suo interno possiamo scrivere JavaScript come se fossimo in un editor come VSCode. Questa azione è disponibile a partire da Wized embed 2.0.
Wized Embed v 1.0 vs Wized Embed v 2.0
La differenza più grande rispetto a Embed 1.0 è un approccio più low-code. Possiamo implementare varie azioni in no-code, ma per le funzionalità più complesse è meglio usare JS. Personalmente sono molto soddisfatto di questo nuovo approccio perché apre le porte a JavaScript, dandoci accesso a tutte le sue funzionalità da subito. Nel tempo potrebbero creare un'interfaccia visiva per le funzionalità più importanti, simile a quello che fa Webflow per HTML e CSS. Nel frattempo possiamo già fare praticamente tutto con JS.
Impostare le Categorie e l'Azione della Classe Attiva
// Ottenere l'elemento padre
var parentElement = t.node.closest('[wized="filterFormCategoryCheckboxBlock"]');
// Attivare/disattivare la classe 'is-active'
if (t.node.checked) {
parentElement.classList.add("is-active");
} else {
parentElement.classList.remove("is-active");
}Su ogni checkbox aggiungo l'attributo value con l'ID del film. In questo modo, quando invio il form, avrò un array nell'oggetto del form con tutti gli ID delle categorie selezionate. Questo array verrà usato dalla fetch come filtro per recuperare solo i film con quelle categorie. E ogni volta che il checkbox cambia, ho creato un evento per aggiungere e rimuovere la classe is-active nel wrapper del checkbox, così da cambiare lo sfondo in blu quando il checkbox è attivo.
Azione di Reset dei Checkbox delle Categorie
let checkboxes = document.querySelectorAll(
'input[name="filter-category-checkbox"]:checked',
);
// Scorrere i checkbox e impostare la proprietà 'checked' su false
checkboxes.forEach(function (checkbox) {
checkbox.checked = false;
// Creare e inviare un evento change per attivare l'evento change sull'input
var event = new Event("change");
checkbox.dispatchEvent(event);
});Quando clicco il pulsante di reset delle categorie, viene eseguita questa funzione per disattivare tutti i checkbox attivi. Usando la funzione dispatchEvent, attivo l'evento change per rimuovere la classe is-active.
2. Implementare la Funzionalità "Load More"
Azione del Pulsante Load More
// Incrementare la pagina
var v.movies_page_counter++
// Avviare la richiesta
await Wized.requests.execute('get_popular_movies')
// Aggiornare la variabile movies con i nuovi film
let currentMovies = v.movies
let newMovies = r.get_popular_movies.data.results
v.movies = [...currentMovies, ...newMovies]Quando si clicca il pulsante, viene eseguito questo codice per incrementare il contatore della pagina, eseguire la richiesta get_popular_movies con il filtro di pagina aggiornato e infine aggiungere i nuovi film ottenuti dalla richiesta alla variabile movies.
Variabili Aggiornate
Ho aggiornato la variabile movies; ora ha solo un array vuoto come valore iniziale e non è più calcolata (computed). In questo modo devo scrivere esplicitamente il nuovo valore. Ho poi aggiunto le variabili categories e categories_render_index per visualizzare e gestire la lista delle categorie nei filtri.
Richieste Aggiornate
Ho modificato la richiesta get_popular_movies; ora usa discover/movie come endpoint URL. In questo modo posso passare tutti i filtri gestiti dall'API come parametri URL. Per il filtro with_genres, questo è il codice che ho usato:
let valuesString = f.filterFormBlock["filter-category-checkbox"].join(",");
return valuesString;Recupero l'array di ID delle categorie dal form dei filtri, lo converto in una stringa separando ogni ID con una virgola. In questo modo posso passarlo al parametro.
Best Practice per Sostituire una Richiesta
Per sostituire la richiesta get_popular_movies, ho prima creato una copia dell'originale, l'ho rinominata get_popular_movies_old e poi ho modificato la richiesta. In questo modo, se ci sono errori, posso tornare alla versione precedente. Per sostituirla all'interno dell'azione già creata, basta cliccare su "Used in x action" per vedere tutte le azioni che la utilizzano.
Webflow Designer Aggiornato
Su Webflow ho creato i nuovi elementi, e per ogni elemento utilizzato in Wized ho creato un nuovo attributo Wized e pubblicato il progetto.
Sito Live
Puoi visualizzare e provare la versione live del progetto:
Prova la versione live
Conclusione
In questa seconda parte del tutorial "The Movie DB No-code con Webflow e Wized", abbiamo arricchito la nostra web app con un filtro dinamico per i generi e la funzionalità Load More.
Nella prossima parte aggiungeremo altri filtri (locali e lato server) e la pagina di dettaglio del film.
