Laravel E-Commerce - Categories & Pagination - Part 5

what's up guys welcome back and in this video I'd like to work on categories and pagination so as you can see here I've added a whole bunch of new product images for each of the categories here on the left and I've also updated the products table seeder for each of the categories for laptops I have 30 because I want to test out pagination later on and I've also receded the database so let's go ahead and get started so the first thing we want to do is make a new model for the category so PHP artisan make model category and we also want a migration okay let's go to the migration create category and let's add two new fields here one for the name of the category so string name and also one for the slug actually just make these unique all right now let's make a categories seeder so a PHP artisan make seed categories table seeder okay categories tables eater and I'm just gonna paste a code snippet in here and all this is doing is filling out all the categories we have on the left side so we just have the name and we have the corresponding slug let's just make sure we import these is carbon and category okay save that and let's make sure to add it to our database cedar so right here duplicate this and categories cedar now make sure you click the categories first because when we associate products and categories I'm actually going to do that in the products tables heater in a second so let's just make sure that worked is to a PHP artisan migrate refresh and then PHP artisan DB seed and that should have done it let's take a look at our database to make sure and to check our categories they're there so we don't worked okay so originally I was just gonna make it so that one product can only have one category associated with it but one of you guys made a suggestion to just make it multi category and I figured why not it's more robust that way so we'll just go ahead and do it that way so if we're doing it that way where multiple products can have multiple categories we're gonna need a it's a many-to-many relationship in the database so we're going to need a pivot table so let's go ahead and create that so PHP artisan make migration let's call it create category product that's the relationship between categories and products table and then we'll do create equals name of the table which we'll name category product okay let's go back to our code category product okay and all we have to do in here is define the relationship between categories and products so I'm gonna define the product first and gonna paste this code snippet and all this is doing is making a field for Product ID and it's referencing the products database products table I mean and gonna paste on our code snippet in here that's doing the same thing for category okay so let's see if that worked so we can migrate refresh again let's seed just check our database I'll check if yep there it is category product product ID category ID awesome so back to our code now we can define the relationships and our models so let's go to category first and we can do [Music] products and then all we have to do is return this belongs to many app product ok and we can do the same thing say that in our product model so we already have some stuff in here let's just put it up here and it's gonna be categories app categories category okay now for our sample data we have to make sure this relationship exists you can go ahead and make a seeder for our pivot table like we've been doing but let's just define the relationship in our products table seeder so let me show you how to do that so here where it's creating a certain amount of products we can just do categories we just define that relationship in our model and we can just attach the category there and one is for laptops and we can just do the same thing for all of them so this one would be too and so forth okay but since we're doing multiple like thoughtful categories for instance I want to have at least one product that has two categories so let's go ahead and do that right here so let's just do a for the first one let's just grab one and let's give it an additional category and we'll attach a desktop so this product with an ID of one which is a laptop will also make it a desktop and yeah it's just refresh it again reseed it and now if you take a look at the database and refresh them you'll see that the category our pivot table has 85 rows and if you do this correctly there should only be 84 products there we go and if we look at look for the Product ID one it should have two categories and it does awesome we'll take a look at this in the browser once we add everything in there which will be our next step if we go back to the browser we want to start making things dynamic years so the first thing I see is I'd like to make this list dynamic back in our code let's just close most of this we don't need most of this anymore and let's open up our shop controller and right here we want to pass in the categories so categories gets category all and it's make sure we import that and then let's just pass it in using it right now and let's make sure to fix this this has to be two colons and now in our shop in our view right here we just have to do it for each for each categories as category let's just grab one of these and for then we'll leave the link for now and this is a category name and let's see if that works okay we don't need all this stuff anymore cool and for the link I want to use a query string so I wanted to be slash shop query string the category slug so let's go ahead and do that so the route will still be shop Talk index what we're gonna pass in that query string and that Cree string is the category and we want it to be category slug okay say let's see if that worked just keep your eye in the on the link when I hover over it and yeah it looks good to me so let's think about what we want to do here looks like there's two cases one case is if there's no create string we just want to return the way it currently is but if there is a query string we want to make sure that we filter all the products based on the category of the query string that we're passing in so let's go ahead and do that okay so in our shop controller let's make a conditional where this is checking the query string so request category so the case with no curious query string we just want it to be the way it currently is so let's just put that in there but if there is a query string you want to filter based on the category of the query string so let's go ahead and do that so we want to eager load the categories and we want to do a where has all the categories and that takes in a function takes in a query and we just have to check if the slug so the query slug I mean the category slug matches whatever's coming in so request category and let's just grab this as well we'll clean this up in a second sorry that goes outside here all right let's check if this works so okay when there's no query string it still behaves the way he used to but when we click on a category it doesn't work why not because we have to do it get here so we can get the collection see if that works now and it does so there's all the laptops there's all the desktops and as you can see as we did earlier we set the laptop to be both a laptop and a desktop so we see that's working here and yeah it looks like it's working cool all right the next thing I want to look at is this heading over here as you can see it doesn't change it's always laptops so what I want to happen is if it's just shop with no category I wanted to show featured items so I want to text to be featured and if you click on a category I wanted to show that category so let's go ahead and do that so let's give it a category name variable so in the case where there's no query string we'll just name it featured and it's just past that in here category name a gory name and in the case where there is a query string the category name will be since we already have the categories let's just query that where slug is request category and it's a return to collection so let's grab the first one and that's gonna return a category and we want the name of that and that should work this just enough requests shouldn't be the method requests and laptops oh we have to change our view so back to our view where's laptops right here we want this to be category test that out okay so appliances digital cameras why is it always showing appliances sorry category name is the variable sorry about that check it out again there we go tablets appliances digital cameras TVs and let's just check it without the query string featured awesome all right let's handle the case when there's no items returned so let's go into our database and make a new category just make one called instruments instruments okay and if we refresh this page it should show here and that's fine I just want to show a message here let's go ahead and do that so right here we can do an if and check if there's products but the more efficient way to do that would be to use the for else directive so for else and it's the same thing as for each but it handles the case where it's empty so if it's empty there's just put a div in here and it's just say no items found and we don't need this anymore see if that works sorry I forgot to change this products as product I should do it and that's centered because of our CSS just cheat here new text not a class style text-align:left there you go looks good he just still works cool alright the next thing I want to work on is this buy price we don't really need this here this should be within each category so you can sort by price within the category I just put this here for aesthetics initially so let's get rid of that I don't need this and let's just add a little section in here that allows you to sort by high to low or low to high so desktops let's find where that is it's right up here ok so what I'm gonna do is just use flexbox and make a new container let's call it products header and which we use flexbox like I said and use justify content space between so there's a new section here name a price and we're gonna have a link one for low to high and another one for high to low and it's just going to assess I get to my shop that says products header so let's just make a new one here products header just play flex justify content space between okay just run npm run dev and we'll see how that looks there you go all right for our sorting we want to add another query string to the already existing query string so let's go ahead and do that so right here we want to go to shop that index till but we want a category to stay if it's there but we have to get it from the request since we're not within a dupe for anything so let's go and do that but now we also want a new query string I will name it sort and in this case this one is close this one is low to high so let's call it low underscore high and let's do the same for the other one but it's called high to low I know and the category is the same but the sorting will be high to low high underscore low see if that works okay and let's work on the controller so what do we want to have happen so we just want to do something similar to if we checked the category but this time we're checking the sort query string and let's check if it's low to high and the other case would be high to low high low and we just want to modify the products variable so in this case what's happening here we want to sort it so there's a method on the collections called sort by and by default it sorts of ascending so let's just pass and all we want to sort in this case it's the price and that should do it same thing for here but there's another method called sort by descending and with any luck that should work hopefully ok so we're under desktops and we want to sort it from low to high that work I think that worked high to low yep seems like it's working so low to high seventeen yeah looks like it's going to low to high I hired a little yeah that seemed to have worked let's check the other ones seventeen okay this one is no sorting fifteen yeah so that worked cool now let's take a look at pagination for laptops I purposely made a bit more so we can take a look at pagination here and leave just thirty basic pagination is really easy and laravel but there's a few things we have to worry about in our case which I will show you let's go into our code and to do the very basic pagination all we have to do is change our get to paginate so I'm just gonna do it for the case where there's no query string at first and it's take some number and how much you want to paginate and how many products you want to appear to nine and all we have to do in our view is add this products links as a method sorry and - do it there you go there you see the pagination I'm going go ahead and just steal some CSS from another team I have another project I'm gonna put in here where is my CSS resources assets sass components like a new one called pagination and that is the pagination CSS which I literally just stole from another theme and let's make sure we add this in here components pagination champion wonder okay let's check that out seems like I put it in a CSS grid area let's take a look where I put it yeah should be outside here all right looks good to me just put some space there I have a utility class called spacer oh yeah that looks good to me so I said I was working in the laptops category but you see me working in the overall shop and you can see that there's pagination here in the shop so initially I took only 12 but if you're paginating then this is gonna overtake whatever is in here you can remove it if you want but I'm gonna leave it there for now because I actually need it for the next thing which is the sorting of the price no longer works and I'll explain to you why so pagination only works on the query builder and as you recall here this was a collection before so just bear with me while we make some changes here I'm gonna make one more case where there's no sorting so products gets products and we'll just paginate that they're here this is going to change to the order by which is a method on the query builder does the same thing as whatever the collection did same here changes to order by and it's add the pagination here as well we'll clean this up in a second and let's just see if that works and let's see low to high so that doesn't seem to be working I think that's because this is screwing it up you don't need that and the reason I kept this take 12 was because this is still an instance of query builder if I did all this would be an instance of in a collection and we don't want that so let's just see if this works now and yeah it looks like it's working now so low to high yeah okay so let's check if the category works it doesn't because we have to fix this too to not use collections so if we just remove this get see if that works okay it does and there's no sorting here so I'll just random order see what happens when we try to sort it okay it looks like it works too did you see what happened there it took off our query string and now we're back to just the shop page with no category so that is because here we have to not use this and use something similar but this version just appends the links if there isn't already existing query string so let's try that again so laptops low to high and that looks like it works and if you go to page 2 that should continue awesome here's the work three four checks high to low goes back to the first page as we expect and ya beside low so yeah it looks like it works cool let's do some minor cleanup in our code there's some repetitive stuff here that I'd like to clean up so like a variable just call it 9 and replace all these nines here pagination and also this seems to be repeating so let's just do categories category all I should just copied and pasted that cool that still work sorry okay still works also I just want to take a look at the case where a category doesn't exist so laptops - for example you get an error that's just on this line here because it's know doesn't exist let's just use the optional helper which checks if it's no and see what happens there okay I'm good with that all right the next thing I want to do is actually have a column in the products table that indicates if it's featured or not so let's go ahead and do that so normally I'd make a migration for this PHP artisan make migration and I'd call it add featured column but since we're early in development I'm just gonna go to the products migration here I'm gonna add it in here just so our migration there isn't too many migrations and if it's still early in development we can go ahead and do that and we're just gonna make a boolean here we're gonna call it feature make it boolean and we'll give it a default of false and we can go ahead and refresh DB seed and now we have a featured column so now go into our app we can filter this out with just featured items let's go ahead and do that so that's easy enough all you have to do is now we can take off this take well thing and I used to wear featured is true oops true see if that works yep there's no items because we have to make that feature while we're here let's also make remember the main page here this is random as well so let's make this crab from featured to leave those called landing page controller and yeah it's right here yep do the same thing we're featured it's true see if it should be empty now okay cool now let's go into our database and just add some featured products I'll just randomly make a few of them featured okay cool actually I want to keep this at 8 so we'll take 8 see if it only takes 8 and it does I also want to in random order okay and in here yeah this seems to only show the featured images now awesome all right I think the last thing I want to do is just have an active state here on this menu for whatever category we click and let's go ahead and do that so in our blade here so right here I want to add the state to go on the list item so what's gonna happen here so all we have to do is check if the request the query string I was about a category if it's the category slug and that means we can append using a ternary here we can add the active state active class and if not then return nothing and let me just go to my CSS shop sass and let me just put the active State in here run npm run bev and let's see if that worked fresh that and it worked awesome it's probably a good idea to put this somewhere in our helpers file so if we just replace this with a method we'll call it set active category and we'll pass it in the category slug and go to our helpers and let's make a new method actually it can be public set active category and this is gonna be taking the category and the output is gonna I'll put this class name which we can override so it is return the request just check if the category is the one we passed in if it is return the output if it's not return nothing okay see if that works and it still works awesome so there you have it guys we managed to set up everything so a product can have multiple categories we've also worked on sorting and pagination and we are progressing nicely in our application here like comment and be sure to subscribe if you haven't already done so thanks for watching guys I'll see you guys in the next one kay thanks bye [Music]

Channel: Andre Madarang

Views: 27,657

Keywords: laravel ecommerce, laravel e-commerce, ecommerce laravel, e-commerce laravel, laravel shopping cart, shopping cart laravel, laravel cart, cart laravel, drehimself, andre madarang, laravel products, products laravel, laravel, commerce, laravel category, laravel categories, laravel pagination, pagination laravel, laravel paginate, paginate laravel, laravel sorting, sorting laravel

Id: 1lPuwnPTOJw

Length: 36min 42sec (2202 seconds)

Published: Thu Jan 11 2018