Laravel E-Commerce - Customizing Views and Controllers in Voyager - Part 16

what's up guys welcome back and in this video I'd like to show you guys how to customize Voyager a few videos back when I started using Voyager we had to do an extra step when we were adding categories to products so we have this category product model over here and every time he wanted to add a category to a product we had to go in here get the product ID get the category ID and essentially just put it into this pivot table over here it works but it's not ideal what I would like to have happen is similar to WordPress where you have the categories in here however making a post and just add it from there so we'll go over how to do that and we'll learn about customizing views and controllers in Voyager to fit our needs it's actually not very difficult it's just overriding a bunch of voyagers files alright first let's talk about how to override views so there's actually documentation on that and it tells you to create a new file in this path in our application with the slug name of the bread that you want to override so let me show you what I mean so we want to override our products and each of these views has its own specific file which I'll show you in a sec this one is called browse and lead edit and the add are together and what we want to have happen is we want to have categories in here just like in WordPress like I said so yeah let me show you where these views live so into our code if we go into the vendor TCG voyager where's the resources we use right here bread so like I said there are three views here edit and add are the same that's why it's called edit add browse is for the one before and read is for the view file so let me just show you so this is the edit add this is the pager on now and if I just customize this to test there and I come back then you'll see it appear here there it is so to override this let me just take this out you don't want to edit this file because it's in the vendor folder so let's say here we want to make a new one so vendor Voyageur slug name and our slug name is products so under voyager products let's make that folder resources use new folder vendor new folder voyager new folder products stop today no product still and then within here we'll just grab this and we'll make a new file name it the same edit add blade PHP actually let me not paste that in for a sec but let me just show you that this is overriding the original view so right now when we go to that it's gonna be blank because I'm overriding it with a blank page so if i refresh it should be blank and it is cool now if I paste that in it should work the same way as before but now we have complete control over the view where is it right here so our view let's make sure that works cool all right now let's get a check box down here somewhere which represents the categories okay so let's undo this and then where am I gonna put it so after this for each so this for each just goes through all of these fields and outputs the appropriate form type so after that's done let's put it in here let's do tests to see if that's in the right spot should be right here right okay so let's put a checkbox in there let me just grab one of these form groups actually I just want to see the format of how they do their forms and it's going to copy it from here so it's just a label and then the actual field okay so let's just do label we don't need this its name it categories and then I'm just gonna copy WordPress from here see what they have I'm just gonna grab this whole thing over here yeah that looks good to me and we'll format it later on and as you can see there is a name on it and it's an array type so that's good just see if that works okay that looks pretty good to me so now let me show you how to override controllers from within Voyager so this controller is the edit controller edit method on one of the controllers let me just show you what I mean so again if we go into Voyager where is it now I think it's in the source directory HTTP controllers there is a controller here right here called Voyager bred controller and this is in charge of for every bread we make this is the controller that handles all the crud or bread on it so again let me show you what I mean so index if I just do a die and dump index then you'll see this page will stay the same but if we go to the index page there you go so for what we're interested in it is the edit where does it edit right here so I died and I died and dump edit that should this should work now but if I go into edit again its edit add or the same actually now for the controller it's different but this should be the correct one okay cool so what we want to do is the same thing we did for views and we want to make our own controller now if you go into the documentation it's kind of confusing as to what they're trying to say here I actually don't do it this way the way I do it is so from an employer if we go into our bread for products there's actually a place to add your custom controllers and if you do add one then this will take precedence over this file that I just showed you so let me show you what I mean let's make a new one called this as you can see I already have it in my autocomplete because I've done it before so we just want to make this new namespace in our app so we already have this namespace let's just add voyager and products controller so let's go ahead and do that actually let me save this first voyager products controller save and now if i go to products that's not gonna work because that controller doesn't exist there you go let's go ahead and create it up HTTP controller's what we called voyager products controller so voyager and you file products controller now let's grab all of this you don't need everything but we'll grab everything from now paste it in and we got to change some stuff in the namespace so this is no longer the namespace it's HTTP voyager controllers alright like that sorry like that Voyager and this is now called products controller and this doesn't extend controller it extends Voyager bread controller that's this one right here so we're just extending this one and make sure we import that okay save now let's see if this works and it does now again if we go to index and just make sure we're using our new file here and we are cool so in our case what are we trying to do we're trying to do changes edit and we want to pass in the categories so let's go ahead and do that so we are in the Edit function and down here we want to pass in all the categories so let's do something like this all categories gets category all and make sure we import this okay also we have to pass it in here as you can see it's using the compact function so let's just go ahead and pass in all categories now in our view we can pass in the categories let's go to our view let me actually this whole thing should be wrapped in a form group okay let me just use one like this we'll leave the hard coded for now but we'll also do a for each all categories so all the categories we just passed in as category let's just grab one of these and format it accordingly so we don't need this ID [Music] we don't need a clasp on the label sorry input okay so the value is going to be the category ID so go ahead and do that type checkbox' the names gonna be just named a category category array okay we don't need this ID [Music] we don't need well we'll work on the checked later to see if it's if it's selected or not this is gonna be the category name I believe category name okay and if I did that correctly that should show up here all the categories should show up there and they do look cool then we no longer need these ones we just remove those actually we have to wrap this in ul tags sorry okay and we know it already this cool let me just let me just fix the styling I'm gonna put it in line for now and behind the scenes I'll move it to my CSS this style type none I believe that's padding left you know what any of that our margin its padding cool and I need some I think on the checkbox I want some margin let's see and so on the input I mean yeah alright so let's just put it here style equals margin right 105 all right that looks good to me so now we have our categories and let's just make sure okay so yeah the values correspond to the categories ID which is what we want so now let me just make sure that this new form field that we have here for the categories is passed through when we hit save so we don't need this anymore and we don't need that but in our yeah so the method that gets called is the update function once we hit save let me prove that you if I just died and um I hit save there you go saving so let's just make sure sorry I should just do this to show you that that new request all the new checkboxes are coming through on the request so you just save this let me just check a few so laptops desktops mobile phones and they are cool so the ones that are being checked are the ones that are being passed through and if there are none checked then that shouldn't be passing through cool let's just make sure if it's just one checked see okay cool so that works so now let's think about what we actually want to have happen so I'm here I'm editing a product and for each one that's checked say we have two checked we want to add a new entry in our pivot table and you just open my my database so here's our pivot table right here and we want this product specifically 85 after we hit save we want this product to have two new entries with these categories so how do we do that let me just remove this so for update so here's where it gets inserted normally but we want to add something new so here's what we want to do so first thing we want to do is actually clear out any entries that are there from before and we can do that using this category product model that we already have remember we created that before and that's just let me show you it's just a model for the pivot table so the first thing we want to do is we actually want to delete so every product every instance that has this Product ID we want to delete it so where the ID is coming in from the request up here right there and that's just corresponding to this specific product that were on and we want to delete it delete oops sorry all right let me just import this okay now we want to re insert them so re insert if there's at least one category checked if there's no categories checked then we read delete all of them so that's that's what we want but if there's at least one checked we have to re add them so to do that you just check the request request category that means if at least one is checked let's do it for each so for each request quest category as category you don't need the value we can just do category product we can create new ones and we have the product ID the product IDs is going to be the current product that we're on and we're getting that in from the request so just do that and we want the category ID sorry this should be that and this is just the thing we're looping over and if I did that correctly that should work I'm actually expecting an error here let me just show you what I mean yeah so we're getting a mass assignment exception that's because in our model we have to do protected fillable equals we need the Sony show you we have to make these two masses I'm also product ID in category ID array product ID and category ID so if I tried it again that should have worked so it's just C so which one was that 85 and I believe I checked two of them it's not much so check here we'll work on that next but if I check my database this was checked for 85 product ID 85 okay there it is yeah I just checked one of them I believe that didn't work let's try again so laptops and desktops for product 85 save that okay now I should check my database refresh okay there you go 85 haves laptops and desktops as a category and if you want to double check what's 85 85 is this new product here so if we shop should be in here there's that new product tiny'mon new I did and it should also be under desktops and there it is cool okay now let's make sure if I go back into here we only did that logic for the Edit view here if we go to add this is gonna show because the the views are shared between edit and add but the controller methods are not see we didn't define this all categories it's showing in the view because it's playing from the review but we have to define this as well in the ad so in the what's called let me just show you so products controller so we just did edit and update we also have to do create and store sorry so they'll create create yes create so let's do the same thing we did in edit so right here let me just grab it down here where is it just the best and we'll pass it through so create just do this and I'll pass it in here all categories okay that should fix the error okay and it shows up there cool but now we also have to work on the logic so if it's going to update just grab that logic we no longer need to delete because the product was just added so it has no categories for the add case so let's just grab this it's repetitive and I'm gonna extract yourself to a helper method later on but let me just show you that it works for now okay so back to create sorry not create store so yeah right here just do that okay so there's no ID anymore but to get that ID we just have to grab it from here so it's gonna be data ID and yeah everything else does the same so that should work for the add case or the create so let me just make a new product and show you that works so another one another one another one details three nine nine and nine description and I am gonna add this to instruments and appliances I save oh oh yeah I never took off that validation rule from before let's do another a and ot or not save okay and so 86 should have two entries in the pivot table let me refresh eighty six seven and eight awesome okay now so I was fine but like I showed you earlier what I have edit and there's already categories we want these to be checked to indicate that the category is corresponding to the product so let's go ahead and do that so back to our code let's go back to the Edit function and down here where we grab the categories let's do one more thing here let's grab the product in question so it's just product find by the ID that's being passed in and let me import the product okay and I'm just gonna grab all the categories for this specific product so to do that product there's already relationship called categories and I'm just gonna get all of those so this just comes from our product model and there's relationship between categories that's belongs to a product belongs to a category to many categories and let me just I'll explain to you in a second why we need this oh we also have to pass it in here so categories for product sorry strength categories for product and now in our view right here where we defined if it's checked or not so if you just - checked every single one's gonna be checked it's just double check okay so what do we want to do here let's do a ternary here and all we're gonna do is so that thing we just passed in categories for product we're gonna check if it contains the current category so yeah I hope that I hope that makes sense and if it does contain it then what we're gonna do we're gonna check it but if not then it shouldn't be checked so it's passing empty string and if I did that correctly and it looks like I did then it only checks the ones that are already a category of this product and let's just add more let's add mobile phones and tablets save that and if we check down here sorry if you check go back into it and you can see they've been added there and so 85 should have four categories now eighty five one two three four cool but that probably screwed up our ad functionality so I just go back to products I had yeah because this variable does not exist so let's go ahead and just pass in an empty variable with that name so back to our controller where's that it's in create so right here when I name it category for product categories for product so categories for product we'll just do an empty collection I think an array would work too but we'll just do that for product double check okay and it's just adding the one new one again four nine nine nine nine okay let's just do one two just to make sure it works and it does not work duplicate entry new for oh I think I have yeah the name is has a unique constraint on it actually I shouldn't be doing that because some products can have the same name but like they have different details so yeah I should change that okay sleeve that worked okay and it did once we edited it worked now I'd like to show you how to further customize this form if you go into posts Voyager has its own model called posts if you're going to edit you'll see that it's much nicer than the one we have in products and just open this into tabs you see sorry so this this one we see here in products you saw me copy it from the view and this is a default one and obviously we just added the categories but you can further customize it however you like to make it look more nice like this where I has two columns you can put like the image here you put the categories here if you like and this really reminds me of how WordPress does it and I'm not going to do that here but take a look at how it posts does it so let me show you where it is so down here voyager resources views will be one called right here posts and this is the customized one here so if we were to do it in ours like I said I'm not gonna do it but we can like have two columns okay let me just show you brief outline of how would look so panel body where's that I think is this yeah okay okay so if I were to do like this row and then sorry this is cumbersome but let me show you what I mean and then dot call MD say nine okay now that should look like that with nine columns okay I messed it up but I think you're I think you understand I'm trying to do just format your markup so that it has two columns but make sure that when you do that the form encapsulate all your fields so this form right here should encapsulate all your fields if you look at the posts you'll see that where's the form here the form encapsulate everything including yeah I hope that makes sense I would definitely do this in a real application that's so just so it's a bit nicer when we're messing around with the with the model but I'm not gonna do here because it's a lot of work let me quickly refactor this code over here because it happens in two places one here which is the update method and one in the store method and it's doing pretty much the same thing so let's just cut this out it's called this update product categories categories and it's gonna take in the request and the ID yeah it is the one with the ID it is okay and we'll make this in a second actually it's right now I'm so down here just make a new one called update product categories and it's gonna take in requests and take in the ID and we can just paste that in and we can reinvent it cool let's make it protected and it's also where is the category product okay so we did it for this one but we also want to do it for here in the es store method but the only difference here is we're passing in data ID and that should still work let me just do a quick check just do this and add a few new categories and that worked cool just a quick note about overriding methods if you're not overriding the method then don't put it in your new controller let me show you what I mean so here's all the methods that we just copied from the original file and we are only overriding edit update create and store so for the other ones we don't want to over we don't want to put them in here because one we're not using them and if voyager receives updates in the future and we're overriding those methods that received updates then we're not gonna get them because we're overriding those methods so only override the ones that you want to make changes to so we don't need destroy we don't need cleanup I guess yeah we leaned all this stuff over here so yeah just delete the ones you don't need and I'm gonna do that behind the scenes so here are the methods that are remaining I didn't remove index because we're gonna be doing something with that in a second but the other ones I've erased and since we're extending this if they don't exist here that's okay because it will find it in the original controller alright this video is getting quite long but there's one more thing that I'd like to take care of and that's the price over here right now it's shown in cents but that's kind of awkward for the admitted it in cents and I'd like to make it in dollars so I'm gonna try this real quick okay so the first thing we want to do is when the admin enters the price in we want to make sure they add that in dollars so let's put some validation on this so from within the bread builder and at the bread let's just go to price and remember there's a bug so we have to change this to the lower case price as to match this but for the validation was gonna paste it in and this is just a requiring it and it's just having a rejects which I just took off the internet and all that rejects does is it just matches a price amount and it takes one or two decimal places at the end and just make sure that when you're using backslash just make sure to escape it and you have two slashes alright so let me submit that lets go back into our products now this should have a validation on it I mean this will still work because it's still a valid dollars value but if I really do something like three decimal places that's not gonna work there you go price format is invalid so yeah let's add for 99.99 so that should work save it and go back to it but as you can see it's still entering it as cents because we didn't change the logic to convert it from dollars to cents so that's gonna be our next step so let's go into our code just go into our store function sorry store yep so this is the one for adding we have to do it for update as well so right here so let me just do this make a new variable called request new and all that is doing is grabbing what we have in the request and now let's just change the price of this one and that should be request price and we're going to multiply it by a hundred because we want it in cents in our database and I spelled that wrong and all we have to do is pass in the new request everything else is the same except for the fact that we changed the price to have sense now so let's do the same thing in our methods this in update so let's go to update so down here same thing I should put this in a helper like we did before but I don't want to okay request new okay now if we did this correctly we do for 9999 may be saved let me go back to it now it's storing it as cents like we want to but the next problem is obviously we wanted to display as dollars so let's fix that so it's going to our edit add laid and I'm gonna do it with JavaScript instead of diving into the backend I found that it's so much easier just using javascript so all I'm gonna do is grab the price and we're just needs jQuery here since they're using it already as well and just makes it easier for me input so there's an input name equals price okay and let's just grab the value of that so that Val will be that and all we're gonna do is just change it and we're just gonna do price divided by a hundred and that should do it so it's still coming back like this from the back end but we're just gonna intercept it using javascript and divide it and then this should show for 99.99 when i refresh and it does cool so now let's make sure that works this changes to six 9999 save okay go back into it there we go 6 9999 but if you had a keen eye and you saw on the Browse page it's still showing sense here so we have to override that view as well so yeah let's go ahead and do that real quick where's that it is summer in here browse grab this copy it let's make a new one in ours so new file browse ableto PHP paste it in and writes where's it here is where it renders the price so I was doing here is it's checking what type let me just show you so here it's checking what type it is so I know how to render it accordingly because each one of these types renders differently and after looking at the code for a few minutes I found that price renders in here and it's just an in else block all of them have a specific ones like for example it renders here if it's coordinates it renders like this if it's multiple images but for the number field which is what we have our price herbs it's just rendering here let me show you if I do that it should show hax and then the price there you go so what I'm gonna do here is the following I'm just gonna do a conditional so if and you roll display name is equal to price and you can extend this and make it case insensitive if you want but I'm just gonna leave it and it's making the else clause in here as well so for the else call clause it's just going to be like it was before but if it's a price then all we want to do is divide by 100 so we just divide by 100 here and we can even put the dollar sign if we like and if I did that correctly this should now be in dollars and it is cool so there you have it guys we managed to customize Voyageur to our needs specifically the categories in our products as well as displaying the price in dollars we override 'add views and controllers and made voyager work the way we want it to work please like comment and subscribe if you haven't already done so thanks for watching guys see you in the next one thanks bye [Music]

Channel: Andre Madarang

Views: 35,733

Keywords: laravel ecommerce, laravel e-commerce, ecommerce laravel, e-commerce laravel, drehimself, andre madarang, laravel voyager, voyager laravel, laravel admin, admin laravel, laravel crud, crud laravel, laravel admin builder, laravel crud builder, laravel manager, laravel voyager install, laravel voyager tutorial, laravel management, laravel voyager customize, laravel voyager override views, laravel voyager override controllers, laravel voyager override controller

Id: BntEU1Q5ga8

Length: 49min 48sec (2988 seconds)

Published: Mon Feb 19 2018