E-commerce with
In this episode I’m going to show you how to create a filter for our products using Directus and Next.js.
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.
Code used in this tutorial
bit.ly/3f61EwV
You can support my work on Patreon
/ watchlearn
Follow me on Social Media
Github: github.com/ivandoric
Twitter: / ivan_doric
Instagram: / watchlearntuts
Facebook: / watchlearntutorials
Пікірлер: 24
Thanks for the amazing tutorial. For anyone using Directus Version 9.22.3 (latest version as of 01/30/2023), you have to use "$categories: [GraphQLStringOrFloat]" instead of "$categories: [Float]" in the HomepageFilteredProductsQuery
@WatchandLearnTutorials
Жыл бұрын
I'm gonna pin this comment. Thanks.
Ahh, peace of mind at last. This is very useful content, being able to filter in this way. Thank you very much indeed! 🙌
@WatchandLearnTutorials
Жыл бұрын
No problem, glad I could help 👍 😀
I think the filtering should happen client side and not calling the API every time, for that you can use useState(products) to create a filteredProducts and then change it based on the selectedCategories. This way the API is called once, making the filtering faster ... AND I WANTED TO THANK YOU, GREAT TUTORIALS
@mrozyyev2853
Жыл бұрын
That's exactly what I was thinking!
can't wait for the next one 🙂 btw... the next.js with-tailwindcss example is now using Typescript per default... started your course yesterday and had to deal with some modifications to run your code with TS.
@alsherifkhalaf7385
2 жыл бұрын
I found this also I simply changed the ts to js and removed types and it works fine
@WatchandLearnTutorials
2 жыл бұрын
@@alsherifkhalaf7385 Nice 😀
@WatchandLearnTutorials
2 жыл бұрын
Thanks. Hope you figured out how to disable TypeScript as per ALSherif Khalaf advice. 😀
@alsherifkhalaf7385
2 жыл бұрын
@@WatchandLearnTutorials i have a question please 😊😊 Can I change SQLite to MySQL after the phase of local development ?
@WatchandLearnTutorials
2 жыл бұрын
@@alsherifkhalaf7385 Hmmm, not sure. Maybe better do that right away.
It would be very helpful if u show how to add custom api endpoint and custom api hook completely...
when did you change the graphql schema "product_categories" to "category"?
Díky!
how can i filter tag, type data = array
Could you make videos on custom API endpoints
@WatchandLearnTutorials
2 жыл бұрын
I think there will be something like that, yes.
Hello. Can you explain why you put the "handleProductFiltering" function out of the Home function ? is it forbidden to keep it in the Home function ? THANKS.
@WatchandLearnTutorials
2 жыл бұрын
I think you can put it in Home function if you really want to. Shouldn't be a problem.
@mediacreatif
2 жыл бұрын
@@WatchandLearnTutorials ok so there is no convention about where to place this kind of function.
@WatchandLearnTutorials
2 жыл бұрын
@@mediacreatif It's just a function, you can put it anywhere.
awesome video! not really like the font tho haha
@WatchandLearnTutorials
2 жыл бұрын
Ahhh, what can you do. Can't please everyone. 😀