Of course we are going to filter those products by category since that is the only parameter that we have for the products at the moment.

So you are going to learn how to use Directus to filter your items, how to pass parameters to your GraphQL query and how to handle filtering with react-query.

In this episode I’m going to show you how to create a filter for our products using Directus and Next.js.

Filter Products By Category

In [previous episode](http://watch-learn.com/video-tutorials/creating-rentacar-app-with-vue-and-october-connecting-filtering-by-location) we filtered our vehicles by location - on the frontend of our October and Vue.js app. And in this episode I'm just quickly going to show you how to do the same thing but using your backend.

Now, I'm doing this just so that I can show you that this kind of thing is possible and that there are cases where this method would actually be preferred. For example, if instead of getting just few records from your API, like we do, we would get thousands of records form the API. In that case it would be much better if our API would handle the filtering.

In this episode we are again going to filter our vehicles by location, but this time using October CMS and some Laravel methods.

Filtering On API

Now that we have done [filtering](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-41-ajax-frontend-filters) and [sorting](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-42-ajax-frontend-sorting) with Octobers Ajax framework, we will add one more feature that will make our UI more approachable. This feature is pagination, because we are showing a lot of items and we don't want to show them all at once.

To do this we are going to use Ajax framework and it's `form update` option to refresh our pages list once the query has changed. As you will see this will be pretty simple once you know how to do it.

In this episode we are going to extend our Ajax filtering system with one more feature, and that is going to be Ajax Pagination, using the October CMS Ajax framework.

Ajax Pagination

In the [previous episode](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-34-backend-lists) we created backend lists for our October CMS website. And now we are going to be crating backend filters for those lists.

October has a really great and easy API for creating filters through `.yaml` files. So in this episode we are going to be creating filter for genres, date range filter and boolean on/off filter for our `Movie` model.

In this episode I'm going to show you how to create filters for your backend lists in October CMS.

Backend Filters

We are not going to do anything in this tutorial with WordPress REST API, but instead we are going to take a few minutes to make our filters look pretty.

Also we are going to use `v-if` statements to hide and show certain elements on the page. And we are going to learn how to do transitions with Vue.js, using `transition` function.

In this tutorial we are going to take a few minutes to make our filters look decent using Vue.js, HTML and CSS.

Making Filters Pretty

In the [previous episode](http://watch-learn.com/video-tutorials/theming-with-wp-rest-api-part-05-filter-posts-by-title/) we created a filter that filters our posts by name. In this episode we are continuing that trend and we are going to be creating a filter that will filter our posts by specific category.

As you will see this is just a bit more complicated than name filter because we have to connect to our WP REST API to get the categories and then display them with Vue.js on our page.

In this episode we are going to use WordPress REST API and Vue.js to create a list of categories and filter our posts by them.

Filter By Category

As you will see this is super easy to do with Vue.js framework because of Vue.js two way data binding. This is also one of the Vue.js's most powerful features.

In this WordPress REST API and Vue.js video we are going to learn how to create real time filter that will filter our post by title.

Tutorials tagged with: filter

Get in touch