The Movie DB No-code with Webflow and Wized | Part 2

In this article, I want to walk you through the most important steps of developing the second part of "The Movie DB No-code" with Webflow and Wized. If you're not familiar with them, Webflow is one of the most powerful no-code tools in the world for creating web interfaces and websites, while Wized is the best Webflow app for adding dynamism to a Webflow website and turning it into a dynamic website or web app.

If you haven't read the first part of the project you can find it here. In this second part, I'll add two important features - a dynamic genre filter and the "Load More Movies" functionality, as you can see in the image below

1. Creating a Dynamic Genre Filter

As you can see from the image above, in the action section for action movies, I've created a new folder called "filter". Inside this folder, I'll create all the necessary actions to manage the filters, and within it, a sub-folder for each individual filter.

Strategy in Creating Actions

As our project grows, it's important to organize actions well, otherwise, it will become increasingly difficult to work with them. There's no rule; everyone creates folders based on their preferences. Personally, I prefer to create folders for functionalities, and if I have more than one page, then I divide them by page. Those used across multiple pages are placed within the global folder, similar to the naming of classes in Client-first.

Now, let's look at some of the most important actions for managing the filters.

Filter Form Submission Action

The most important action, to execute the call with the new filters, uses the Run function as an action. It's the most powerful action and the one I use most often because it offers more freedom and is more compact if I have many commands. Inside, we can write JavaScript as if we were in an editor like VScode. This action is available from Wized embed 2.0.

Wized Embed v 1.0 vs Wized Embed v 2.0

The biggest difference compared to Embed 1.0 is a more low-code approach. We can implement various actions in no-code, but for most complex functionalities, it's better to use JS. Personally, I'm very happy with this new approach because it opens the doors to JavaScript, giving us access to all its functionalities right away. Over time, they may create a visual interface for the most important functionalities, similar to what Webflow does for HTML and CSS. But in the meantime, we can already do practically everything with JS.

Set Categories and Active Class Action

// Get the parent element
var parentElement = t.node.closest('[wized="filterFormCategoryCheckboxBlock"]');

// Toggle the 'is-active' class
if (t.node.checked) {    
parentElement.classList.add('is-active');
} 
else {    
parentElement.classList.remove('is-active');
}

On each checkbox, I add the ^value attribute with the movie ID. This way, when I submit the form, I'll have an array within the form object with all the selected category IDs. This array will be used by the fetch (we'll see later) as a filter to retrieve only the movies with those categories. And every time the checkbox changes, I've created an event to add and remove the is-active class (it can have any name) in the checkbox wrapper to change the background to blue when the checkbox is active.

‍

Reset Categories Checkbox Action

let checkboxes = document.querySelectorAll('input[name="filter-category-checkbox"]:checked');

// Loop through checkboxes and set 'checked' property to false
checkboxes.forEach(function (checkbox) {    
checkbox.checked = false;

// Create and dispatch a change event to trigger the change event in the input    
var event = new Event("change");    
checkbox.dispatchEvent(event);});

When I click the reset categories button, this function is executed to deactivate all active checkboxes. Using the ^{dispatchEvent} function, I activate the change event to remove the is-active class.

‍

2. Implementing the "Load More" Functionality

Load More Button Action

// Increment page var
v.movies_page_counter++
// Start request
await Wized.requests.execute('get_popular_movies')

// Update movies var with the new movies
let currentMovies = v.movies
let newMovies = r.get_popular_movies.data.results
v.movies = [...currentMovies,...newMovies]

When the button is clicked, this code is executed to increment the page counter, execute the ^{get_popular_movies} request with the updated page filter, and finally, add the new movies from the executed request to the ^movies variable.

‍

‍

Updated variables

I updated the ^movies variable; now it only has an empty array as the initial value and is no longer computed. This way, I need to explicitly write the new value. Then, I added the ^categories and ^{categories_render_index} variables to display and manage the list of categories in the filters.

Updated requests

I modified the ^{get_popular_movies} request; now it uses discover/movie as the URL endpoint. This way, I can pass all the filters that the API manages as URL parameters. You can find the complete list here. For the ^with_genres filter, this is the code I used:

let valuesString = f.filterFormBlock["filter-category-checkbox"].join(',');
return valuesString

I retrieve the array of category IDs from the filter form, convert it into a string, separating each ID with a comma. This way, I can pass it to the parameter.

and this i the new ^{get_categories} request

Best Practice for Replacing a Request

As you can see in the image above, to replace the ^{get_popular_movies} request, I first created a copy of the original, renamed it to ^{get_popular_movies_old}, and then modified the request. This way, if there are any errors, I can revert to the old version. To replace it within the action I've already created, I just need to click on "Used in x action" to see all the actions that use it.

Updated Webflow Designer

On Webflow, I created the new elements, and for each element I use within Wized, I created a new Wized attribute and published the project.

Live Site

You can view and try the live version of the project here.

Conclusion

In this second part of the tutorial "The Movie DB No-code with Webflow and Wized", we enriched our web app with a dynamic genre filter and the Load More functionality.

In the next part, we'll add more filters (local and server-side) and the movie detail page.

If you don't want to miss the next updates, subscribe to the newsletter :)