Laravel + Vue.js Demo: Filter by Category/Price/Manufacturer

hello guys time for another demo project with laravel and UJS and the code as usual will be available on github at the end of the lesson you will get the link and the story goes from the comment on my previous video so if you are subscribed to this channel you'll probably remember multi-level categories with UJS showing the products and showing three levels of categories and then one of the comments was from this follower who asked for filtering so filtering product by brand shop price range category and subcategory and this is a typical scenario for a shop or catalogue and we decided to make a demo project from that showing the view jsy how to do that and also last week i've shot a video about the fact that it's okay to use jQuery instead of UJS for simple filtering but this video will be a counter example where it's beneficial to use UJS specifically to manipulate and watch the changes of the data so this is how it looks same catalog on the right list of products but then it is filtered on the left by price by categories and manufacturers so if you click more than 500 price not only that part is refreshed also categories and manufacturers so we click categories and as you can see this number turns into three and three products here so we can take that one take this one and as you can see three and five but there are eight products in total and there are eight products in total of the price another typical example of this is booking comm when you try to book some trip and then there are multiple features and multiple filters on the sidebar like price range whether there's beach weather there is the internet and a lot of other facilities to filter from and this is exactly what would try to mimic here so this is how it works in terms of front-end now let's take a look at the code if we go to phpstorm there's the main component actually only one of UGS components front view and here's the main table so for each of the products it loads the products and nothing really complicated here so that's the template part the HTML part and in the script part it's loading products with this just loading the products from the API with parameters we will get to that in a second and then assigns the response to products so this product becomes in the UJS this variable and now this is where it gets more complicated on top we have three filters price categories and manufacturers and there are three variables three arrays prices categories and manufacturers so all the possible checkbox values with the number so products count products count and products count for every one of them so the question then becomes how to load them up front on the first loading of the page and then how to reload each of them on change and this is where vue.js shines to compare with jQuery if you do that with jQuery you will have a lot of job manipulations on change of one input you need to refresh other inputs so you're basically working with HTML tags and attributes with UG as you are working with data so that's probably the main specific difference between jQuery and view jes so jQuery works with Dom with elements with visual stuff and beauteous works with data so variables and properties and then under the hood transforms that into visual result so in the view J's file structurally we have these variables so prices categories and manufacturers these are three arrays that will be transformed to those checkboxes and then separately there's selected which of those are selected and these become the parameter for the back end so let's try to trace step by step on the first loading of the page will all categories manufacturers prices and then products and then we watch whatever selected is changed then we reload everything again so load categories get the categories with all the parameters from selected except for categories then load products load the products with all the parameters load manufacturers omits the manufacturers parameter from selected array and prices amidst the prices and then unchanged event is happening because in every checkbox we have V model so we assign every check box to the value of selected manufacturer selected categories and selected prices so this is how it all ties to the other and this is the main benefit of UJS that is happening working with variables instead of visual components and attributes and on the backend if we go to slash categories for example this is category controller and we're doing two things here so loading all the categories so category get with Countess eloquent function which counts has many relationship amount of records off whatever relationship you specify so category products is has many so you can use with count and then the result will be transformed to products underscore count and then for every relationship you can add a callback function with filter and this is query with filters and with filters is a scope eloquent scope so if we load the product PHP model you have this scope with filters in the description of the video I will give the links to official laravel documentation on both of those topics scopes and with count so you can read about those later but essentially it's getting request input all the get parameters so if there are manufacturers then it adds that to the query wherein manufacturer where in category for prices it's a bit more complicated because there are ranges of prices so from five thousand to ten thousand for example but essentially scope adds more where statements to the query of getting the categories so if we try to load for example I will just demo it's loading everything and here are the API call so for example categories the result of that is category ID name and product count so products count is the result of that with count adding the scope of filters and almost identical is manufacturer controller and prices controller we're loading the model that we need with count of the products and then at the end we're loading the actual products same thing with filters so you forget back to the UJS component all of those API categories API products API manufacturers and prices so these one manufacturers and prices as you can see it's reusing the same programs of this selected to filter the amount of products for each category and the products themselves so I'm not sure if you get the main idea but the idea is to tie everything to select a variable of the UJS component so this one this is the centerpiece of all the filtering for all the data and again I'm probably repeating myself but that's the main idea of this video that few GS shines working with the variables instead of visual components especially if you have more complicated logic more complicated calculations filtering and stuff like that so that's it again the code will be on github in the repository the link is on the screen and it will be in the description of the video also I encourage you to sign up to youtube channel because I'm shooting videos almost daily now so you will get laravel tips and tricks including view j/s every day or if you want to get more information from laravel community more useful links and tips and tricks I have a newsletter which I send every Thursday with around 20 links from the community that I read myself every week so if you want to follow the trends of what's latest happening in laravel subscribe to the newsletter which currently has already 4,000 subscribers so thank you for subscribing and see you guys in other videos

Channel: Laravel Daily

Views: 24,807

Keywords:

Id: ZZkROqT83t8

Length: 7min 54sec (474 seconds)

Published: Tue Jun 09 2020