Laravel 12 Tutorial #64 | Product Filters (III) | Color Filter via Ajax

🔗Laravel 12 Multi-Vendor E-commerce Series Complete Playlist:
   • Laravel 12 Multi-Vendor E-commerce  

Welcome to Part 64 of our Laravel 12 Multi-Vendor E-commerce Tutorial Series, where we’re building a complete, professional Multi-Vendor E-commerce Website from scratch.

In this part of our Laravel 12 Multi-Vendor E-commerce Series, we will extend our product filters by adding a Color Filter with Ajax.

This feature will dynamically fetch and display available product colors for the selected category and filter products instantly — without refreshing the page.

Steps to Implement:

1) Create ProductsFilter Model
We will create a new model to handle product filters (colors, sizes, etc.):

php artisan make:model ProductsFilter

2) Add getColors() Function
In the newly created ProductsFilter model, add a function to fetch unique family colors of products for the selected category:

3) Update filters.blade.php to Show Dynamic Colors
Dynamically display available colors as checkboxes and bind them to Ajax filter with the filterAjax class.

We’ve added the filterAjax class to make these checkboxes interact with our filters.js file.

4) Update applyFilters function in ProductService
Extend the applyFilters method to filter products by selected colors

5) Update getCategoryListingData function in ProductService

6) Update filters.js file
We used an enhanced version of filters.js to handle Ajax-based filters (sorting + colors). This ensures:
• Live filtering without page reload.
• URL updates (pushState) to keep filters in the URL.
• Works for multiple filters (multi-color selection).

7) Ajax Handling in ProductController@index
Already updated to return JSON when ?json= is present:

Result:
• Users can now filter products by color dynamically.
• Multi-select colors supported.
• URL updates with filters for shareability & page refresh persistence.
Works seamlessly with sorting and pagination (via Ajax).

📢 Don’t forget to Like, Share & Subscribe for more Laravel tutorials! 🚀

🔗Bookmark & follow this Laravel 12 Multi-Vendor E-commerce Series:
   • Laravel 12 Multi-Vendor E-commerce  

►Click here to subscribe for Laravel & other updates -    / stackdevelopers  

Popular Stack Developers Series that can help you:-

►Laravel 12 Tutorial (with MySQL):    • Laravel 12 Tutorial  

►Laravel 11 Tutorial (with MongoDB):    • Laravel 11 Tutorial (with MongoDB)  

►Laravel 11 PostgreSQL Tutorial:    • Laravel PostgreSQL Tutorial  

►Laravel API Tutorial -    • Laravel API Tutorial | Create API from Scr...  

►jQuery Tutorial -    • jQuery Tutorial  

►Laravel Basic E-commerce Series -    • Make Admin Panel / E-commerce Website in L...  

►Laravel Dating Series -    • Make Dating / Social Networking Website in...  

►Join this channel to get the complete source code of all series:
   / @stackdevelopers  

Follow Stack Developers on Social Media to get updates and resolve your queries
►Like Facebook Page to get updates -   / stackdevelopers2  
►Join Facebook Group to resolve your queries -   / stackdevelopers  
►Follow on Instagram -   / stackdevelopers2  
►Follow on GitHub - https://github.com/stackdevelopers

#Laravel12 #LaravelEcommerce #MultiVendor #EcommerceDevelopment #WebDevelopment #LaravelTutorial