Wire Up the WPF Shopping Cart - A TimCo Retail Manager Video

welcome to another video in the tIMCO retail manager course this course focuses on real-world application development right now we're working on building out our first section of work which is the basic register in this video we're gonna wire up our shopping cart so we can add items the cart and get a total now if you're a patreon supporter the $5 per month level or higher make sure you head over to get the latest source code either way make sure you subscribe to this channel so you can follow along also note that there's a playlist for this course on my channel that we can start from the beginning if you want and make sure you'll follow it in order finally as you're thinking of suggestions please leave them down the comments I want to hear your thoughts on this course a guy running list of suggestions for improvements and they'll definitely make this application better let's get started I have opened the timko retail manager project in solution let's open up the UI and go to our view and let's look for the sales view so this the view we're going to modify and let's actually start this up so we can see what it's doing but essentially what it's doing is it is let's take care of that what it's doing is its allowing us to see the products but not actually do anything with them so we have our ten skillet we can say a quantity of five we can't say 5j because it says it's an error of five and that's all it does what we're gonna do today is we're gonna allow us to select something put a quantity in make sure it's a valid quantity add that to the cart it's gonna move it over here and then give it a subtotal tax and total so we'll work through most day if not all of that the tax might be a little tricky you might start off with a basic tax and then work your way up from that because there has been some suggestions in the comments which I would really like the idea of item based tax and the potential for other taxing methods and that can get really tricky really quickly but that's good because this is the real world we want to address the real world not just kind of skip over it but for now let's stop this close this out and start addressing these one at a time now in order for us to know if it's a valid quantity or not we have to know which item is selected and from that we need to know if we can enable this Add to Cart button or not because right now it's disabled by default we want to enable it if a valid product with a valid quantity has been selected so the first step is identifying what the selected item is and that becomes really simple caliber and Micah has got an already set for us and this is something that people often get confused by they say well how do i how I send all this information over that button there how I it's simple you already have it your view model we're just going to expose it let's come down here let's go under products doesn't matter where we put it but okay makes sense here prop full and a type is going to be product model I'm gonna call this selected item so notice with my my private backing field again we have the underscore and the lowercase or they the camel case for our naming that indicates as a private backing field and we use the Pascal case the actual property this is what we will be using when we ask for it we've gotta get but then in our set we want to have our identifier property change so notify of property change and this is the selected item those it's singular not plural how do we use this well if we go over here to our items notice I can click it over here and highlight to overhear my zamel which is really helpful so here in the list box I can say selected item equals binding selected item now the naming worked out an interesting way normally wouldn't call the selected item except this is the items list I believe and looks like no it's me products let's go look real quick this is called products we should say selected product I toss items selected product which means over here we should rename this to be selected product control dot to rename that everywhere which is these two spots and now selected product control dot to rename that everywhere and that renames it down here now what'll happen is every time we select something in this list over here this items list it will put that item that that model into our selected product property and it does it by default every time I change me I'll put a breakpoint here and we'll run this this is what I say it's really easy and I hate saying the word eats because I get it can be confusing but there's not a lot of work to do that's what I'm talking about so if I select ten skillet it goes right to my breakpoint notice my mouse or actually go to value here 10-inch skillet the ID the quantity the retail price so it got all that based upon what is selected if I had continued and slightly fluffy bath towels instead now fluffy bath towels is the product that has been selected let's close all that out that's step one now what we need to do is we identify if we can add if the quantity is a valid quantity I think the way I do that is actually to go over here to the Add to Cart button and not really worry about the quantity itself because the selected I was always going to change if we're trying to add a range to the quantity box which is actually a text box not an integer box even though it's bound to an integer it's gonna be difficult but we have this Add to Cart button let's do this let's select Add to Cart and we have this it's called Add to Cart so over here I believe we have a can Add to Cart we do and right now let's just set the false and as says make sure something is selected and make sure there's an item quantity thank you passed us we've told us exactly what to do and we can do this in one if statement if let's do selected product question mark and here's what a question mark what's going to do is going to check to make sure that the product selected product is not null because when you first load this form selected product will be known until you select something so we don't want to check to try and use a property on a null item that would throw an exception we don't want that so when I say selected product question mark that's gonna say hey if this isn't null keep going but if it is no it's false therefore skip the if so I've selected product question mark dot quantity and stock is greater than or equal to and what's my my quantity well that's right over here we called it item quantity so item quantity so as long as the quantity in stock is greater than or equal to the item quantity then we can set output equal to true meaning yes you can enable the can Add to Cart button so now you see us in context as question mark hopefully it makes a little more sense this is a newer c-sharp feature but instead of saying ifs let the product is not equal to null and so the product quantity and stock is greater than equal to item quantity we can do it in one line because if we're looking for the quantity in stock if if this is null then we don't mean to check the quantity in stock we know this is not a true statement it can only be true if we can check the quantity in stock therefore this we false this whole thing is false if this is null and that's correct that's the right we want you want to do it so that makes our lives a little easier a little quicker we want to do double checks for no now this won't work quite yet because we don't have anything telling quanta can add two cards to to look it again or update or refresh that's what the notify property changes for and that's on well item quantity so we can say whenever I in quantity changes check out the can Add to Cart as well to see if that is has now changed and also on our selected product whenever you select a product check to make sure that or check to see if we change the value of can Add to Cart and the reason why both of these is because you can either you can update the quantity without having anything selected and you can select an item without updating the quantity oops so if I add to the quantity to five nothing happens it's still disabled but if I select fluffy bath towels I now have a button that says add a cart it's enabled I can select skillet same thing if I say 50 add to cart goes away well why is that true well tange skillets we only have ten them in stock so if I said 11 I can't add that to cart but if I said 10 I can add that to cart so it's intelligent about enabling or disabling this button based upon the quantity now I do have a little bug in here if I say zero it still says you can add it to cart if I say negative 15 I can add that to cart so let's fix that bug by coming down here to our check and saying selected product it client stock is greater than quantity before all this let's make sure that item quantity is greater than zero so we're under it check first to make sure the item quantity is greater than zero the reason I put it first is because this is an easy check therefore do the easy check first because if it fails then we don't have to even look at this it's a little less work for us to do we don't have to do a null check we don't have to access a property inside an object which grant it doesn't take a whole lot of time but it saves you a little bit so do the easy one first now we need to work on the actual Add to Cart method what this needs to do is it needs to take the selected item that's selected from the items list and the quantity that needs to add that item to the cart we don't want to take it away from this list but we may want to think about modifying a quantity and I think I do but that raises an issue and that is where do you put this quantity so the cart is just called cart we come over here to the cart let's find that in our list right here it's a binding list of product model let's f12 on product model and look we have quantity in stock retail price description product name and ID where we gonna put the ID the concept of quality in cart we'll have that in this object now there's a couple ways we can go about this it really just depends on your approach one thing we could do is we could add a few more properties here that don't make sense from a database perspective but that's okay we could add a integer that's quantity in cart and then we have both items right kind of in sync with each other but I'm wondering if that's the best approach because I'm thinking the next day I might need to add is a property for cart total which would be let's say you have 10 items in in your cart so you you're buying widgets and you're buying ten of them each would it cost five dollars well I could calculate every time five dollars times 10 items equals 50 dollars for this product or could have a property that just held it for me and I wouldn't have to do that calculation every single time I wanted to recalculate the cart total maybe especially talked about taxes that might be another thing and there's other things that might go into this this product model that kind of means we're gonna add more and more properties here but it is still of that way of going about it but there's another way we can do this let's open up our and pin a solution Explorer and let's look at our models which is actually in the UI library and this raises the next question is it really a library model or is it a UI model well I think that yes we're using it for the UI but it's really the data whereas send back to the API saying this is what we're buying therefore I think it makes sense to put it in the library but there's definite KC made for putting it in the UI as a UI model at the end of the day I don't think there's a wrong choice here it's more about your architecture and what you feel works best in your situation or what you're comfortable with or this is in this is the best one if you have a pattern at your office or your work follow the pattern and that's that's excellent it's going to add a new model here and I call this cart item model make it public and the first things going to have is going to be a product model called product and then I'll have my additional properties quantity in cart I think that's yeah I think that'll be good for now now to come back over here to our sales view model we had changed the cart from product model to the new cart item model which automated change the the full property not as the backing field and then we need to look for anything else that used that which I think that we're good however this is going to change our front end because the cart right now is going to be set up to display well actually it doesn't even have a this list box item template the cart therefore we need a changing let's pace it in but instead of product name since we're binding on the cart we need to actually look at the the item inside here which is actually product which should be product underscore product name I believe how that's gonna work we're a find out in just a minute I don't remember all the conventions so now we have our our cart items we can come back to our well let's find it here the Add to Cart method there it is this kit right over and now what they do is create a new model the car item model as well as times where actually I use the new keyword instead of using our dependency injection we could use dependency injection but I don't think it makes sense here therefore cards item model let's say item equals new car item model and in fact we just do our curly brace instead and say product equals selected product and the quantity in cart equals the item quantity I am quietiy and now we can add this to our cart so cart dot add item and that should add it to our list let's run this tange skillet let's put five of them in the cart and it says hey you can't do that so a selected product is valid I am quantity is valid but cart is null well the reason for that is we've never initialized our binding list so with our products we initialize our binding list right here we never do the same thing with cart let's come down here and say equals new binding list we can do that right in the private backing field let's run us again I'm gonna get tired of typing this password real quick I make sure you have trickin how to fix that Add to Cart and it added kind of but nothing's nothing being shown okay you can see it nothing's being shown here so it looks like our buy knee isn't quite right I think the issue has to do with this over here this product dot product name or product underscore product name I don't believe they enabled the dot syntax and binding but just in case they didn't try it there's not three different iterations of the way I'd do this in caliber and micro and since I've been up for so long I think it confuses which way is the correct way then just kill it five Add to Cart Hey look at that they did add the dot syntax that's cool it's now I can add now five hard pair kits which will probably to do something here with us display because it's it's not showing off the the quantity here that's actually way of doing that that makes our lives a little easier I don't need to use it the dot syntax that is if they go over to our our cart item model we can create a property here public string let's call this the display text I guess it spread that the best way of saying it I had like a getter and we return the value of string interpolation and let's say product dot product name like so and then in parens we'll put our product nope where I put our quality of quantity in cart like so and then we'll use display text instead of product dot product name which means that messing this up while informative help us figure out what's going on here we can actually undo that by just doing display text instead and now it should be that when we run this that it it says the correct value IBM typed that wrong okay so quantity of seven for tange skillet and there we go so now I can see noise we can't add seven large toaster ovens because I believe is only a couple in stock there's two there's three there's five not six okay let's just add one now you probably even omit the the one if it's just one but if we have more than one we can add the parens maybe kind of a cool feature not something to do right now but it might be at a nice visual addition alright let's stop this and now let's look at the next step which is we're just gonna start some simple calculations we're not going full-tilt with tax yet because we haven't addressed the idea of individual item taxation and that's that we need address but we can at least do subtotal so we have a pattern down let's go our sales view model and look for subtotal so net calculation here we have the the carts items so we can do a calculation right here that says let's just do a output this is a string let's create a double or a decimal first decimal and that's called this the sub total equals 0 to start with and then we'll do a for each for each we can save our item in cart for each item any credit mixing that makes sense I actually like it item dot product dot retail price times item dot why do I believe this answer you like me because I'm gonna do a sub total plus equals and the retail price is a decimal that's good times item dot quantity in cart and that gives us our we can put this parens it's not strictly necessary but I'll I prefer it that way so you can visually see that this work gets done first and then we add that to the subtotal so that's gonna loop through every item in the cart and once we're done we can print out the subtotal now to actually stop with this we can say sub total to string and then in the to string we have the option of passing in a format provider or a format I'm gonna pass in a capital C that's going to convert it to a currency now we do need to call the notify up property change on this whenever we add something to the cart so that is right down here add to cart so we call the notify of property change on the subtotal and I should do the same thing with the remove from cart which we're not doing calling yet but we still should put it in there for completion sake now if we run this it should be actually our subtotals to work so our tange skillet let's put four of those in the cart that's a subtotal of $75 flow a bath towels let's get Oh 15 of those that's five hundred and twenty four dollars and twenty-five cents and one large toaster oven and there we go now we're not updating these quantities when we when we add in the cart we're not so that quantity back to zero or one and notice that let's say I have I have one large toaster oven in the cart already if I say five and II cart and five I can add 11 total to the cart but yet if I say you know eleven here it says no no no you only have five in stock sort of ugly to fix so let's address that but the subtotal does work which is good so the bug is kind of two parter first of all we're not modifying the quantity available based upon what we've already added to the cart and I think that's the best approach is to actually modify those numbers so we hit add to cart let's go the add to cart here and we add this item to the cart what we should do is then say that the selected product dot quantity in stock - equals item quantity now here we can also set our item quantity equal to one that way it resets back to one instead of keeping that same number look inside to zero but I think one's more appropriate and right now we're defaulting which which we should probably change as well so let's do that let's find the the item quantity and set to 1 by default there we go since it didn't have a default value it defaulted to a default int which is zero so now we have the the add to cart' is then decrementing the quantity in stock by the amount we've added to our cart that's kind of step one but then the other part of it is that we're not you can add some of the cart and say I want had three of them and I might add two more and it creates two different lines instead of just update inequality to five that one's a little trickier but I think we can do it we do a little more work in this add to cart here so the first thing I do is we need to look at this this cart and say is there a item that has a matching product and we can actually just a direct comparison to the product because of the fact that it's the same object so let's do this let's just create a a cart item which is a car at a model so cart item model let's call it existing item equals cart dot where we can say dot first I believe yes first and then say our lambda expression X dot we're actually x equals nope X dot sorry product equals selected product this will do a comparison of the actual objects which normally you don't do because they have to the exact same object not the exact same values now they're the exact same object they'll have the same values but the two aren't the same if I have if I create a new object in in variable a and say the first name is Tim last name is Cory I created a variable in favor will be that same type of object the first name of Tim last name Cory those two are not equivalent if you just say does a equal B the answer's no but if I say in in variable a if I say first name is Tim last name with Cory and variable B I say put a then B and a will be the same thing so remember it helps remember that this is a memory address essentially so if you both have the same exact address then you're talking the same house if the two houses look the same but there are different addresses they're not the same so that that's the difference here so we're we're getting a first item which that returns and puts in our existing item model the first it finds matching now here is the deal it's going to return the first but it's gonna say a argument null exception I believe there's a first or default there is so the first default is a little better because what's gonna do is it's going to put the cart item model into existing item if it finds one the first one but if it doesn't find any it's gonna put the default value for an object which is null into this how does it help us we can do is we can have an if statement if existing item is not equal to null and we can do some work on it so that work would be to say existing item dot quantity in cart plus equals item quantity basically if you already have three in the cart now adding two more add those two to your existing three now I still need to do our selected product and subtract that value so he's it happen either way and maybe will pull us out of if statement entirely that might be a better option keep a little more dry well an else statement here and the else statement is going to do this I think it will keep that outside which means I don't need to have it here so now in theory what's going to happen is we're either going to update the quantity in cart of the existing item which don't forget that's a memory address that's just the address the object therefore if we make a modification it makes it in the list it's already in the cart now you will have to do a notify of property change so we'll need to take care of that I believe the only the binding list looks at properties with that being said I think everything else is correct so if we if there's an existing item then update the quantity if there's an if there's not an existing item create a new one and add to the cart either way modify selected items just like the products quantity in stock and set the item quantity to one notify our property change the subtotal and then we'll have to do the same thing for project cart I believe it should work and now if we run this we should see hopefully the fact we can add to our existing items so tange skillet let's add two and now let's add note apply method one let's add five more and it twitched and the number changed but it didn't actually modify this list item okay so let's let's find out why well I think the issue is that this notify property change the cart itself it's saying yeah all the same officer they're there for you we don't need to refresh but the same objects aren't there I mean yes they are still there but what has happened is we've modified an object but because it's a property not the actual object the notify have property change we get from the binding list doesn't really care it says I don't I don't care it's I still don't show you it a new value I'm thinking I might have a hack for this and there's probably a better way to do it as well and I think I'm not kind of a great way of doing it yet so I'm gonna do is I'm gonna put a hack in place and see if it works and if it does I'm gonna leave it and or I'll come back to it the one do it right but this way I think should work so cart dot remove existing item so removed from the cart then cart dot add existing item basically remove it and put it back in let's run that let's login yet again tange skillet let's add two that's thirty seven fifty let's add five that's seven that's 130 125 so that did work now I can add a home repair kit a fluffy bath towel and a large toaster oven but then say you know what fly bath towels we need a bunch of those let's get six more and then we have seven in the cart so it does work it's not the prettiest code in the world because we're removing and adding it back in in order to kind of trick the system into refreshing that list it's not ideal but it might be the solution we go with there's one that I want to try just in case and that's actually looking at notify of property change that's nested so let's temporarily comment these two lines outlets is our hack I might even want to say it's a hack so like so I put four slashes here because when I uncomment this now the hack is still commented and now I've I've commented all three so just so you know that's why I did that and the reason I did comment this twice then instead of saying we'll just sort these two is because this hack goes with these two lines that are now commented out therefore everything is commented out including the comment what I could do let's try this notify have property change and let's say we want to mot modify this to say can I do existing item dot and look for our display text would that even work I don't think so it's saying no that that's not right you're passing a variable that's not one of our our options here we could say cart dot I could probably find it but I don't think that's gonna trigger it properly oops there's many equals maybe Laura --then existing item dot display text it's not yelling at me doesn't mean it'll work but it's not yelling at me let's make it blow up this is part of programming is you try something try something else 10-inch skillet Add to Cart let's add five more it did not refresh but it did update the subtotal so that didn't work I think the reason why is because existing item is not a property and [Music] therefore it's not actually triggering the right thing it should trigger on the cart and refreshing that that's not correct so we're to come back to that Lilly the hack in place and it does work and it's not horrible I mean it's not like this is the end of the world or something we're just removing from the cart and adding it back in and while it does move it to the bottom of the list we could we could reorder that list and in reality you might see that anyways because the last item you modified is the one the bottom and it kind of makes sense so it's not horrible okay as I'm saying but at the end of day I am kind of tricking the system into working and that's not we want to do in the long run but I keep telling people this a lot the most important thing at the end of the day is does your application work that's the the mark of a good application now could it be horrible code that you should never do yeah it could be but it's working you've at least got the minimum bar for an application I have seen a lot of pretty programs and I've written a lot of pre programs that never actually get to launch stage because there was so much focus done on getting it right and getting it right in and focusing on that that you lost focus of the goal the goal is to get it working application which is what we have right now so that's we're going to stop we've got the quantity working the Add to Cart working we have the the cart being refreshed and have multiple items in here and even taking the quantities down on these items so that you can't add more than a total we've got combining working we've got subtotal working I think that's a good stopping point at this point now before you go any further this is something I I don't often do they I forget I forget until after I hit stop in the video and then I'm like oh I should have done that let's stage these and let's create a commit so if you might be something like gets Add to Cart working something like that commit the stage and let me good sync and in fact make sure there's nothing on the server there's not so we'll go ahead and hit push and that pushes our changes back up to github so that's it so now you committed our code this is a point in time commit we can kind of come back to this and look what we did and see just those changes and if we needed to rollback the changes so with that the next lesson I think it will do is we'll address this tax issue because that's gonna be a little more complicated if we do per item taxing we're going to modify the database where we're storing them when you modify the API that's passing the data through of course the models with that and then modify on this end capturing that data and then finally we can modify the actual calculations for tax once we get that though we can do total as well and then we can have this this full car experience we can also wire up them that removed from carton as well that's a minor thing and after that we can start with a checkout actually send data back to the API and say this person just purchased this amount I hope you enjoy it I hope that you got a lot out of it please let me know if you have any suggestions in the comments down below hey if you've got an idea for how to refresh that list and get that to work let me know I'm gonna kind of think about it one of the things that is beneficial I found beneficial is you'll walk away if you if you're banging your head against the wall walk away and trying to even think about it and then we come back it's often easier you might find it a fix them a lot faster maybe not but do come back to it the key to being a great developer is not having a ton of memorized code or knowing every in out of a coding system the key to being a great developer is first of all to be really detail-oriented because if you miss simple things I say simple I mean little things like casing or you know small stuff like that that can really throw you off I can make your life miserable so detail-oriented important although that can be learned trust me I know because in my normal life my day-to-day life I'm not detail-oriented but when it comes to writing code I've trained myself to be mostly I still forget stuff but the other thing is persistence if you have a problem you can't figure it out don't give up don't throw your hands the air and say I can't do this the key to a good programmer a good developer is they say I don't know how to do this I'm going to keep pushing and it doesn't just mean you know put a question on Stack Overflow you know that can be a solution the Internet is a large place look for solutions and don't just say you know tell everyone else fix my problem for me give it a shot try it and by that I mean spend hours on it be persistent because you won't always find a solution on the Internet even though it is a huge place alright hope you enjoy the video definitely come back for the next one when we address the next piece of it and we can wrap up this sales page and move on to even more fun pages thanks for watching as always I am Tim quarry you [Music]

Channel: IAmTimCorey

Views: 14,551

Rating: 4.9668508 out of 5

Keywords: .net, C#, Visual Studio, code, programming, tutorial, course, training, how to, tim corey, C# course, C# training, C# tutorial, C# app start to finish, timco, timco retail manager, wpf, asp.net, .net core, asp.net mvc, autofac, c# solid, c# solid principles, dependency injection, tdd, unit testing, xunit, moq, c# shopping cart, c# shopping cart example

Id: 6OyJit8y1BM

Length: 50min 38sec (3038 seconds)

Published: Mon May 13 2019