Build a Shopping Cart with Vue 3, Vue Router, & VueX

hello everyone i hope you're all having a great day uh in this video i wanted to make a video here just to showcase how to create a simple shopping cart on the front end uh using vue.js view three uh to be exact and also implementing view router and view x uh as our um store so uh this is a deviation from my typical videos where i'm showing you what's going on in the front end and the back end but this one has value in terms of showing you how to manage a cart and how to utilize persistent storage that they can use locally local storage in particular within the browser to persist data so that when you come back uh do things like that so this is a quick overview now when i built this out i built this out as a mobile first application so when we actually go to view this we're going to be viewing it more like this um i'm going to come down to application here because i have this here i'll delete this this is all test data anyways but and i'll delete that okay so as you can see it it starts to look better actually as it's in mobile mode and mobile mode kind of uh kind of finishes out here at 500 pixels so or that's when it goes up into its next media query breakpoint so but in here you can see we have a description of the product the price and the ability to view the product if you click on view product you'll see here that now we actually have a slide out that comes on chrome and chrome for windows you can see this bar on the side here i don't get rid of that but if we need to scroll down if there's more information about the product we can definitely do that here we're able to do things like add or remove and if you look over at my local storage here you can see how that's already been stored in there okay and if i do a complete refresh of the system you can see that our data actually persists um which is what which is uh what we want in this case uh because typically what i'm finding in a lot of the e-commerce builds that i do i don't uh until a person is ready with their cart i don't actually store many details server-side so and this is you know in the in the process of having built out e-commerce you know custom ecommerce sites say within the last five years uh my approach to it has has changed particularly now that i'm implementing more uh you know the vue.js is a front-end framework to manage that so things are much cleaner much easier to manage that way so now what else you can do is you come over to the cart here you can see what we have in our cart and you can see our cart total and everything's formatted nicely in such a way that it's very clear and if anything changes in here our cart total will change of course when we come back so for example if i want to add a couple there i want to go back to the cart you can see the prices change the item is added in there as well there's some other additional things that i left out of here like the ability to delete an item from the cart if you want to delete an item from the cart then you would just remove it until it's gone and then from there you go over to cart and you can see that it has been removed so this is the project we're going to build out in this it'll probably take us about an hour and a half to two hours but you'll know for sure obviously when this video is posted so a couple little housekeeping things here to get us started uh in order to do this project we are going to be using the vue cli to uh create everything so to find out how to install that you'll go to cli.wjs.org some of you probably already have this set up so it's not really a worry and then this will give us these tools to build here if you don't have node.js or you're more of a beginner maybe you're not used to working with the tooling provided then the first step you'll want to go to here is node.js to install node on your computer node will be included with our npm will be in included with node and this will give us the ability to basically download the view installer and the view tools like the linters things like that that way so once you've done that once you've installed it and everything is good to go then you'll open up a terminal and that's what we'll do here i'm gonna open up a terminal okay i'm gonna cd into uh okay and i'm going to go ahead i'm going to make a directory here oops so i actually have to make the directory and we'll just call this view three uh shopping cart okay well i'll just actually say make directory view three and then cd interview three and then i'm going to use the view cli just like you see here create a project after you've done npm install dash g add view cli cli once that's all installed then you can actually go and you can create a project using view create whatever you want to name your project so in this case i will say view create and we'll just say shopping cart and that's going to go ahead and install uh well it's going to take us to this screen here i'm going to use i'll say manually select features so we are going to be using view 3 for this and there are a couple things i want to add to this right off the bat you can add this after the fact i'm not going to show you how to do that in this video but you could uh so router so once you're over it you can you can cycle through with your arrow keys you're just going to hit the spacebar and you hit the spacebar again so we need the view router and ux and css preprocessors i'm going to use sas for this just to make writing our css actually a lot a lot easier um and we're going to do everything kind of based on the components so if you're coming from say react this idea should already be familiar with you react and their ecosystem they have a lot of different uh ways they can go about it okay so once you've selected those then you hit enter and we're gonna go three and use history mode for router i'm gonna say yes in this case and i'm gonna say sas scss with node sas okay and i'll say eslint with error prevention only okay and we'll say um yeah lint on save sure uh and dedicated json we'll just leave that in the regular package.json file save this preset for future projects i'm going to hit no in this case and it's going to go ahead and it's going to install that for us all right in the meantime uh once once that has finished installing for us uh then what we're gonna do is we're gonna cd into the directory and we're gonna then open up our uh web our editor so i use uh vs code a lot of the industry uses vs code it's versatile it's for doing obviously more than working with more than one type of language and since it's open source and community driven we get some nice little plugins that that help us along the way here so all right so as soon as this is installed we will continue all right perfect so we've done that if we run the ir you can see we have shopping cart in there so i'm gonna go ahead and i'm gonna cd into shopping cart all right and then from here i'm going to open up my code editor by going code dot you can find this file and folder depending on the editor that you're using you can of course just go open folder and then access it that way and then from here i'll hit enter that's going to open up a new window for me i'm going to close this out i don't need this anymore okay and on my other side here i'm just going to cancel the how it's actually serving it we'll go ahead we'll make this a little bit larger so that you can see a little easier um and close this initial one but you can see we're left here with our initial um our initial directory don't worry about any of these warning messages sometimes i have things configured for development and depending on what i'm working on i might throw little errors here and there but that's not important so all right so to start with what we can do is we can run npm serve and we'll see what we have here sorry npm run serve okay and starting our development server this initially we'll just take a moment and we'll come back here and basically it's going to serve up on localhost 8080. yours should be the same so when we're looking at this we can see basically what is scaffolded over for us right from the beginning or installed right from the beginning with um with that so from here we're going to go ahead we're going to start modifying some things about this i'll close this window we don't really need that window for now um and we'll leave it as is so to understand the direct the the structure of the directory we can see here we actually have two main view files we have one for about and one for home these are the individual components don't worry about that message there um and we're going to go ahead we're going to kind of rip everything out here but i just want to give you a quick view of everything in here so we have our store this is where our store is uh going to be stored uh where we can access our state um at any given moment of the application we can run various mutations actions whatever the case might be we need to do there and this is where our router is located so this might be familiar to you if you're used to working with vue and view router um and here i'm not going to work so much off of name and in in these i'm just going to do the path because it's really simple and i don't uh just for this simplicity of what's written on the line to avoid all clutter so we'll make this look good this way i'm going to rip this out entirely we'll probably end up throwing some kind of an error i would imagine okay maybe not but if we go back out to here and if i click on about you can see uh it returns nothing so not returning any kind of component or anything in here so all right and then here's where we can store our our individual components we're obviously not going to use the hello world component the hello world component you can see um is is what we have here so as is everything that's displaying here with the logo and everything okay all right all right uh let's start here in our app.view file here you can see we have our uh router links that are installed and this is what's actually producing the router view so basically if we come over here to router index.php this home component is is rendered right here so there's a few little things i definitely want to change in here as to how things look and feel uh for the site like i don't want it to look like uh what is what is uh and what is initially put up here when we install view when we install um yeah this particular view project so there's definitely some things that i want to remove from there now we are going to use lang css make sure this is on top of every uh style portion of the components that you that we end up creating this will cause some confusion when i was actually building this out i was wondering why things wouldn't work because they were nested and i realized it's because i had not specified that we're using the preprocessor of css in this one so sorry a sas in this one okay so to start with we're just going to do kind of some housekeeping things here um html and body we'll make some modifications here okay now i'm not using that now typically my projects i'll often use a framework and to be honest with you i'm looking to switch over to tailwind css but i'm just finding that like right now because i don't have a full grasp on the ecosystem and how that all goes down and the common utilities and and whatever um i'm not i haven't really made the switch yet and actually i'm kind of moving more towards just building up my own components uh using regular regular old css so um and you know with uh pre-compiler okay so these things not really important in terms of uh building order actually our actual project and seeing how everything functions together with store and the router and all that but again this is kind of a housekeeping thing so we'll say rgb and we'll say two four five two four five and two four five okay close that off and then down here we're going to work on our actual nav elements um and as they are nested now there's nothing we're going to have to change up here for now except for when we create the active class so that we know which page we're actually viewing um but for now we'll say hashtag nav because it is an id that we're targeting in here we're going to give this padding of 10 pixels all right a width of 100 percent a height of 30 pixels um background color [Music] uh of white okay and we'll give it a we'll make sure that we set the line height so we can center our actual line within that 230 pixels as well okay we'll start nesting some of the elements that sit in there so when i do an a actually what router link is is it is the anchor element uh that goes in here so essentially by putting a we are styling this particular element that way so we could also specify class but in this case we're not going to because we're building a thing with the css out as a component which depending on how you look at it has its advantages and its drawbacks but okay our font weight we want it to be bold um color we'll just do something available to us simply text decoration because these are links so they automatically have um the underline on them vocal none and margin zero five pixels zero five pixels in here font size uh 1.25 rim your device might vary i don't know um and we'll do and active so if this element has the class of active then we're going to change up a few things particularly the color of the anchor tag so in this case we'll do a hash 2 c 3 e 5 0 all right okay and we're just going to create a simple little utility class in here normally i would put my utility classes in some kind of a separate css file but we're going to do this here for just to make things easy okay text dash align equals center so this will be available to us i don't know if i need it in this file if i needed another one um okay so up here there's a there's a couple little changes i want to make and you'll see how that all goes down in a moment but here we want to bind a class to it and the class has to be it's going to be active and it's only going to show if route.name equals home actually you know what we need to go back we need to make sure that this does stay home okay all right so make sure that's done that you actually have the route name in there we could also just do path like we could say route dot path equals equals equals and then put the forward slash and it would be all the same in here we're not going to have car and we're not going to have about you can delete that file if you want to but i'm going to leave it for now just for the sake of building this and not having to do too much housekeeping uh initially okay and we'll we'll end up creating the cart component um at some point here but in the meantime if we go back to our page uh and i see that so you can see things have changed up here oh let's remove this this pipe okay yeah there you go so you'll see it's removed okay so i go to about it will show about oh you know what yeah cart and cart okay because i don't because the route isn't necessarily named uh for this yet so we can actually go ahead we can create a cart component it's just going to be a an empty component for now okay and we'll put this in the same directory oops i'm not going to save yet not until i create it otherwise it'll throw some errors and well that's not a big deal um it's something i'm thinking about okay uh i can use about that view and change the name and stuff i'm not going to do that here i'm just going to cart dot view and i'll say template now the way i have my stuff you know i'm still working on projects if you do that i haven't upgraded w3 yet you don't necessarily have to have this component in here now it could just be template but as you see it sitting right now this is the way it'll be so we'll say this is uh the cart page all right and in here let's add that now okay um if your short code for vs code i go shift alt down arrow that copies the line that the cursor is sitting on and it allows us to do things so okay cart and we'll say cart and let's go ahead and save that we can see we don't throw any errors if we come back here this is the cart page let's change that from where it says about to cart okay and now that active class you can see affects it in such a way that this becomes dark when that's done okay let's go to our home component let's get rid of hello world let's get rid of all this um let's get rid of this and let's take this out of our components here okay and probably from here there's a there's a few things we need to think of in terms of our setup i'm going to go ahead and add the additional items we need here the additional methods and whatnot that we need for this but we're going to need to return a list of items now just to break our application out typically what i would do because i'm going to be requesting the items from a server i'll probably interface with axios or fetch or something like that to make that ajax call and here however what we'll do is we'll just include uh the file as as a separate uh javascript file with an array of items that are in there okay so we'll start by going import items from and i'm going to go ahead and create this here data items dot js okay now we can go ahead you see that through an error we can go ahead and we first of all need to create um the data structures our data folder so we'll say data slash items.js okay and then in here all we really need to do is uh export those uh particular items in there so the way we do that is we'll go const items equals sorry it needs to be an array so square square brackets instead um i don't want to get i wonder how i can do this for you guys i could put this up my github profile but i suppose if this is on my github profile those that aren't used to working with git won't necessarily know how to navigate it but for now uh export default items and we'll just create our items in here you could play around with this yourself so what i'm going to do is i'll create an item that has an id of one name we'll give it a specific name you guys can add whatever you want in here in this case this one's called comfy slippers okay um and price all right and we'll say 12 dollars for that or 12 of whatever currency we'll go category footwear and give it a category this will give you the option in down the road to then start filtering your results uh it depends how far you want to go with this right and then in here we're just going to put some lorem ipsum okay uh let's see here this has to be wrapped in um quotes of course how does that look okay that looks much better so that's that's how this is all going to look you'll want to give yourself some some good lorem ipsum um my recommendation is like just go to the lorem ipsum generator [Music] um or you can do like i did and you can uh just type in lorem and that it's and then it's in there uh sorry push lorem and then push tab or enter and then just make sure you then wrap it in quotes uh that way so okay so from here on i'm just going to copy and paste the other items that i have um just to save me some time here on the actual video and i will give you the link uh in the notes as to the repository and specifically where you can find this particular file in order to just copy and paste it over okay so now we'll go back to home here we'll we'll go save again so because we have no unused vars set uh in our babel configuration um we it's not compiling properly so what we'll do here right now is we'll just return items and we'll use the file up here items and you can see once it's uh you know visible like this then it's it's very usable in there okay so that's how that's going to start out okay now probably what we want to do is then show a list of our items um so in order to show this list that we have created uh we're going to create a separate component called a product summary card we'll call it a product summary card component but for now what we're going to do is we're going to wrap this in a container um i'm going to call this product cards dash container okay and let's see here uh and then we'll give this stuff some classes so we'll go style we need to enter in lane equals scss okay and then um dot product dash cards dash container and here there's only about three different lines here so we do want this to be we do want to use flex and then flex we definitely do want it to wrap and we're going to give our elements some specific widths so that flex knows when to wrap and justify content uh center and we want that so that everything was in the center and looks well well organized so that's it we're not going to touch this component in regards to style any any further but what we do need to do is we do need to create a component um for that so what we'll do is we'll create a product summary card component uh i'm going to enter that in up here first even though we haven't created the file but we'll say product summary card and we'll import that from forward slash components uh products product summary card okay if i hit save obviously we're going to throw an error because that doesn't exist so let's go to components we'll say new file uh we'll say products slash uh product summary card.view okay perfect so that's how that looks uh there for us okay so now that we've created that let's go back to our home view we can now save this we're going to throw the no unused vars error in there and so what we need to do is in our components we need to register uh this product summary card and now we can actually use it uh in here now the way i like to build up my components is i like to think about the data that i'm gonna have to pass to it first and foremost so we're gonna need to pass the um we're going to need to pass a few bits of data to this so one is going to be the items and we'll have to loop through all the items in order to produce an instance of each of these cards um we'll want to bind it with a key which in this case we're just going to use we could use the id or we could use the index uh in this case to keep things simple i'll just use the id so because each one does have a unique id and we need to pass through the individual item which as we pass it through the product summary card we're going to actually call it product instead of item as a name and convention you could change all of this around to products products and then this down here to products products and then to put the bind the individual product and then once we want to actually view the product which we'll get into a little bit later then we'll have to create some kind of an event listener that goes in when we click on that particular product to show it like you saw in that one particular drawer that slides out at the beginning of this at the beginning of this tutorial so for now let's go through here we'll say v4 equals and we'll say let's say item let's say product in item in items and then we'll for the key we will say um product dot id because if you go back here to our items each item has a unique id so it's appropriate to use that we could also pass in the name or something but i don't know this is the point um in this particular instance so we will do it that way uh product we're going to bind so that our component can actually use this as a prop and we'll say product in here and we won't register our listener yet we'll do that down the road when we actually create the methods to handle what we're going to do all right so uh we'll go back to our product summary card now and we need to make sure that we're actually bringing in this particular um product you know at the very least we can show the product name uh probably add a few classes in here as well to manage all of that so so we'll say script we need to open up a script tag and we need to go export default okay and then we need to go props and we'll say product and then we're gonna need to run we're gonna need to have a computer property in here as well for now i'm not gonna worry about that so much um we'll create a class here we'll take a look at what it looks like before i actually start you know adding css to these classes um but to start with we'll say is we'll put an h3 in there we'll pass the product's name through that's going to be important and we'll do an h5 and i'm going to give this one a class of price just for the purpose of being able to style this we'll say price and i'm going to go ahead add a dollar sign there two curly braces and we'll say product dot price dot to fixed just to make sure that we're always showing double digits okay uh down from there we're going to need a place to show that show the description that we created all that lorem ipsum so in this case i'm going to say description that's what i'll call this class and we'll go description uh description okay so why am i doing it like this well we have to create a computed property for this so this is going to take uh our prop and we're going to call this one description okay and we're just going to return this referring to this current element product so referring to our prop hero product and we'll go description and we'll just do substring 0 and 150 okay now i could do this in line that would be an option better practice is to put this here and because of how long this actually looks that's another reason i do want to put this here sometimes if i'm dealing with data you know typed data so something that needs to remain an integer or something then often i'll pass it through as a computer property and then turn it into a string up in here that's a personal preference there's no real performance hit or anything doing it that way um it's it still evaluates just fine when that's created okay so p and here we'll again add another class and we'll make this one this is where we're going to put our um our product category so we'll have to create that classic text muted so we don't want it to be you know vibrant black we want it to be kind of grayed out to give us kind of an easier look and feel to it um and then we're going to need to put in a button in here to actually view the product so we'll give this button a class of view dash product uh dash button okay and we'll create those classes here at the bottom after we have a look at what we need to have a look at okay so view now let's go ahead and go back out to our project and here we'll hit refresh something is going on don't know what it is i don't see any errors being thrown there so um oh you know what you can see here it's not saving properly let's go home we'll do this let's see if that fixed there you go okay so now we see it uh in there now i don't think okay so every time i try to save this file it's not you can see it's not recompiling it here uh i'd have to go to home and then recompile from there so in this case what i do if that if you've run into that and you're wondering why isn't this updating what did i do so wrong which will run into particularly uh when you're getting started um then all you do ctrl c command see if you're on a mac terminate batch job shirt and then go npm run serve again it'll compile everything perfect now every time i hit save on here you can see that it actually saves as it should so we can see we have all of our data printing out this is great stuff um and here we have our button but it doesn't look as pretty as what was initially shown to you in there so let's go ahead let's actually just a little housekeeping thing okay let's go ahead we'll go back to our editor and let's add some classes here for us so style and it needs to be laying this to be equal to scss this is shorthand using ammit before you see that i added it manually i just wanted to make you aware of that if you're using vs code okay so we need to come up with a card class uh the card class is going to have a width of eighty percent and this is gonna we're gonna have some media queries in here as well for which so when we do go up to a larger screen then you know it's not gonna go 80 to kind of go in line and then we'll have a very fixed width uh in terms that way so margin we're going to put 10 all the way around uh padding is going to be 10 pixels um the border radius that is going to be we'll say 5 pixels okay let's go background color background color for our card will be white and we'll say box shadow we'll give it some box shadow here and we'll say zero zero this is kind of going to give us a little highlighted border um just to give it so it just pops a little bit the card all right within here we have an h5 with a class of price okay i mean i could target the h5 with like first trial or something but we'll do it this way color gray so that no matter what modifications we make to this uh we don't have to worry about really breaking anything down the way uh for the description we'll say font size will decrease that to 0.85 ram ram is just going to be based on what they have preset for their device and then how things are typically scaled up or down from there and then text muted and here we will have a color of gray okay perfect now we need to style our button so that would be this item right here and we could we could style that okay so do dot card i'll style the button from within here and we'll say button dot view dash uh product dash button okay and we need to add a little bit of padding in there of 10 pixels uh background color is going to be rgb um seven nine one six zero one eight seven all right uh border none color white uh that's our text color our font weight i want it to be bold so we'll do that oops fun way bold um font size i'll make this a little bit larger we'll say 1.15 ram of course when i built this out initially for the purpose of doing this you know i chose at that point how i want it to look if you guys think i'm doing this off the top of my head no no i i built this out i flushed it out so that i could give you guys a better experience i know a lot of projects i do and share on youtube here i often just kind of i don't want to say wing it like i have an idea because i built out a number of them before but i think this will give you kind of a better quality experience with everything so with the whole tutorial so let's create one media query in here um we'll say min dash width of 500 pixels sounds fair enough and we're going to target the card element and we're going to give it some fixed widths and some fixed margins okay so we'll say width of 350 pixels and we'll say margin of 10 pixels okay and if we go back here let's see what we have let's refresh okay great great okay so you can see we've styled our cards everything looks pretty decent in here um okay the typically like you know the last small phone i had for a smartphone was the iphone i think that goes down to the iphone 5 and i think that goes down to like 300 and 370 or something as a preset in pixels for width so that's really the smallest viewport size that you'd be viewing it from but let's come just before our break point in here okay and we'll leave it at that for now all right so that looks good to me in there okay so i want to handle something in here now now we've got our product summary card displaying that's great every time somebody clicks this button though i do want to um fire off a particular event so uh i don't have to do prevent i mean typically on projects i do put prevent just in case somebody hard coded a a form tag or something in there um so i'm just going to go out click in this case so this causes some problems we can easily uh we can easily trouble troubleshoot that okay product okay and then we need to pass through our actual product that we pass through initially so we know what we're dealing with okay all right okay so i'm i'm happy with that uh we have no real way to pick pick anything up um from our parent component so let's go ahead and add that in here now so we want to say v on uh what did we put down there be on view dash product dash product equals um let me just pull this up here uh we'll we'll create a method of view product we don't necessarily have to put in uh run the event through here we could just leave this blank as well but we are but we are essentially passing through the event that was fired off so we can access that event tag like so now what we need to do is we need to create a method to handle that um uh so we'll say method sorry methods okay and then we can create our method in here so we put view product as our method so we'll say view product we need to pass through the product in this case and we're going to add a particular item in here called product we will leave it null initially once it loads up and what we'll do is basically just assign this dot product equal to product which was passed through and this is how we're going to know that it's the current product that we clicked because we put it within that item so now what we need to think of doing is actually building out a drawer so every single time we click on this we want our little drawer to come out um hold on i want to go back to our product summary card here and i just want to put view product because it's just kind of weird to have just view written up there okay great that looks that looks fine it looks decent nothing fancy um told you that at the outset so all right so for now we'll leave that as such i don't think we actually need to even revisit that particular one but let's uh console.log um this dot product so that we can be sure that you know everything is working properly so we have console here click on this yeah perfect we can see everything comes through all of the details for that particular product we click this one that one comes through click that one that one comes through so on and so forth okay so now now we can actually pass data that we want to manipulate through to other components in here so this view product component what we actually want to do is we want to create that drawer that we saw uh earlier so let's go ahead and we'll create that particular drawer component we'll say import product description drawer from components products and we'll say product oops description drawer.view okay it doesn't exist so of course that's going to throw an error we can take this opportunity of course to register the component for use um now let's go to product so components products product description drawer w okay template so what we can now do is yeah we can go ahead and we can actually start building this uh particular thing out so we have our template in here um i'm gonna get rid of this kind of root component what would have been the root container from before oh let's go back to our home page here what's going on has been registered but not used product description drawer okay let's see if let me put this here on the page description drawer um do we need to pass anything into it uh i mean yeah we do we need to kind of pass through when we need to pass through two items one we need to pass through the product uh the product so product product so that's gonna pull from here so right now it's null unless we click on something and then it will actually be assigned that particular product that has been picked and we'll need to um within this component what else do we need to add to it oh yeah basically if the component is active or you know basically if the component should show at that particular moment so we can say we can actually pass this class through so when we actually go to create our css we will we will pass the particular state of this component of that particular class what class it is we'll bind the class from a prop that will pass through so that we can kind of control this on more of the the root of the parent element down here so this is going to be active and this will be equal to um active so down here we'll need to add active sorry not active it needs to be active dot um product underscore draw okay so this is typically the way i will set up whether things are active or not so i have active product drawer i'm going to come down here i'm going to create another object we'll call this the active object and product underscore drawer and for now that'll be set to false so every time the page loads up we're not going to see uh that drawer okay it says the template requires a child element okay that doesn't have a child element right now but you know what we can easily uh create one for ourselves in there um all right where am i at here okay so let's go ahead we'll we'll go back to the product drawer component um part product right here uh we'll say we'll make it a div we'll give it a class equal to drawer dash background so this is going to be basically like the gray background a background that you can also click on to show to to to hide the model as well but that has to be built as a sibling it cannot be built as uh the parent element that then holds the the slide out because uh then basically when you handle the on click event if you click anywhere within that container even if it's a child container then it's gonna disappear we don't want that and you'll see what i mean here momentarily um we'll call this class show and this will show if we have active dot uh product uh underscore drawer okay so i did this a little bit differently for now i'm going to leave it like active like this because that's what we passed through um in our component here so we're passing this prop through which is basically this data element here okay this data here okay so that's done there and then what we're going to want to do is handle an on click event so this one is going to close the modal or not sorry not the modal it's going to close the drawer once it's clicked all right hold on close product drawer we do it like this as well it doesn't really matter per se so and we'll do a forward slash there to close that off now okay good so everything compiles successfully now um we can initially what we'll do we won't necessarily add the product details in here yet but let's create another div and we'll give this a class of drawer okay and then we only want this one to show again if um if we're actually you know active right okay perfect now we need to create a a way to close uh our draw not just not only by clicking the the the drawer background but also we want to kind of give them an x to actually click as well so in this case we'll create another div with a class of drawer dash close in this case um i'm going to go ahead and just place the x in there okay and then from here every time we click this one we want again to call this we want to omit this event to our parent component okay um let's see here uh we'll say we'll then create a div i only want this div to appear if we actually have a product that is not null so only if we have the actual product do i want it to appear i'm going to give this a class of product details so we can style that down down the way and we'll create an h3 we'll give this h3 a class equal to text center okay and accepting the product that we pass through we want to display here the name of the product let's just for testing purposes well not just for testing purposes but just for the purposes of not throwing errors when we actually view the front of it let's go ahead and make sure that we have those props added in here so in here we could say we'll just say product okay so now let's pass through so we should be able to start seeing this i'm going to do a paragraph of the class of description in here and we'll say product dot description okay and then we'll go we'll create another h3 uh with a class of text center so you saw we already created that utility class on our main app component but in here we'll pass through this is where we're going to put in our actual price of the product okay so product dot price dot two fixed we'll do two in there all right and then um we'll create another div with uh we'll say cart dash total okay and we only want this cart total to appear if we have a product total um let's see here product underscore total because what we're yeah just because um we'll do an h3 and we'll say in cart and in here we'll put an h4 and we'll put a product we could say total probably what i should use here is like product count or item count or something i'll leave it as is okay and then we're going to need two buttons one to add and one to subtract so to start with we'll create a button container and if you're familiar with css you might know why i'm breaking things out the way i am already if you don't just bear with me and you'll see as we move along uh why that is okay so we have a class of remove and we're gonna have a class of uh add and we'll style those ones um independently i don't even know if we actually need to add the remove of the clasp one other thing here we do need to add we do need to bring make this prop accessible a product um active okay let's add our text in here so we'll say remove and then we'll say add okay and then um that should be about it there all right so from here we can start styling actually no hold on uh we're going to create a computer property here because we we are displaying a computer property here of product total so let's go ahead and we'll say product total and for now we're just going to we'll just return 56.00 okay we'll actually return something proper a little bit later a little bit later on okay so let's go ahead create another a style tag and again shorthand i'm going to set land equal to scss okay so first thing we need to style is our drawer background and we can style that we'll say a width of 100 so it needs to take up the whole screen right a height of 100 vh so viewport height and we need to give it a position of fixed so that we can then manipulate it with the top and the bottom right left whatever we need to manipulate it with in this case we're going to just align it to the left and make sure it's tight up to the top all right and then we'll go background dash color um could just do like light gray but i think i i'd actually found uh something i liked a little bit better and that was one two four one two four one two four with an opacity of zero point five five okay perfect you can see that's the color that we are aiming for with opacity because we kind of want to see hazy in the background um the rest of the items we'll give this a z index of 100 meaning as it goes down that's the priority will be given so it will always appear on top of everything except for the actual uh the in except for the actual drawer with the white background that we want to display initially we just want to set display equal to none uh what mistake do they make here okay a little syntactical error okay and then we do want to handle a transition [Music] of display i don't actually know if display has a transition anyways not a big deal we'll find out right um if an element has this class as well so if these classes are put together that's why i use the and signed then we want our display to be block all right okay so that works for the drawer background right now we'll go ahead and you're not really going to see i wonder actually you know what it might be better in this situation to well we can just set this to true for now as we go to test this out okay we're not going to notice the transitions in particular but you'll see here okay this is what it looks like um for the for for our background in here we have no data being shown in here after we click it like you saw in the initial example but now we basically have to draw the white drawer full page width and then it needs to come in and out and we'll see that in action afterwards but as i'm building up the styles here you'll kind of see what it is that we've actually gone ahead and affected so we'll do uh so we already created uh dot and show and let's go and say dot drawer okay so we'll start styling our actual drawer and we'll say it needs to have a width of we'll say 95 viewport width okay and i do i don't remember if i put any media queries on this yeah there's one media query so this is going to change after it you know reaches a certain size which will be 500 pixels it won't go past a fixed width all right so we want a border um no sorry we don't want a border not in this case we want a drawer so with the width of 95 you put width height 100 viewport height okay background color we want that to be white uh position again we need this one to be fixed so that we can control its actual position based on the page top of zero um left initially we want it to be negative 105 viewport width so basically it's going to hide off to the left of our screen okay um padding we'll say 15 pixels in here and uh transition we want to basically set our transition here for left and we'll say 0.5 seconds and a z index we want to give it as 101. so if you remember up here we put z index 100 we want this one to sit on top of our drawer background so that's why we have to put 101 it's one position above that right and then any overflow on the y-axis so going up and down we want them to be able to scroll in case the content is long or the phone is short or whatever the case combination of both okay we'll go and show so if draw and show at the same time are there then we'll say left of zero want the left hand side to be zero instead of negative 105. all right okay so far so good now what i want to do is let's see here actually let's see how things look right now on our actual page okay well that's not showing so i don't know what's up with that um because it is height top position control whatever okay let's let's continue down on the left so we'll go draw dash close uh font size we want it to be 1.5 rim okay padding uh five pixels uh border radius um five pixels so this is for the actual x that closes it out right uh right we want it to be 10 pixels oops it's not the right way to spell right border um i want to do two pixels solid uh gray uh and then the color of the text in there will be gray um as well and we'll give this a width of 15 pixels uh and then we want it to float right sorry float right in there okay great and then cursor will set his pointer so that when we're actually hovering over it we see a little hand pop up so that we so that it appears that it could be closed um when when you hover over this element we want the background color to change and that background color will be light gray all right fair enough good okay now let's go style some of our product details and i don't know why that's not showing let's uh i'm gonna go back to our home component here i'm just gonna set this to false and i'll see if there's any debugging i have to do or find out why it is it's not um not showing already but we'll say product details display is going to be flex justify content is going to be center flex direction is going to be column okay but um and then we need to add a description uh for the paragraph tag so padding on this one we're going to make it 20 pixels and the line height we will make 1.5 ram so we have some nice decent spacing in there right uh button container okay the button within the container each button will be a width of 150 pixels a border of none no border uh padding i want to do 10 pixels in there uh border radius i want to do 5 pixels and then the margin would do want to set the margin so we'll say zero five pixels 50 pixels five pixels okay um and then again cursor just to make a little more obvious that that's what we click when we're hovering over with our mouse all right and now what we need to do is just add a single media query and here so min dash width is going to be 500 pixels just like our other one and then on dot drawer we're going to want to give it a width a fixed width at that point of 450 pixels just so it doesn't go too too big okay let's go ahead and hook this up in our home controller so that we can actually toggle whether or not um this particular one is visible with our active dot product underscore drawer so right now shows us false uh let's go ahead and we'll say view product and then we need to set this dot active uh dot product drawer equal to true okay now let's go back out here nothing's happening here i don't know why that's not showing because it really should show you know um okay so if you're wondering why that wasn't working for me uh up here i put show instead of class okay simple mistake to make i suppose let's go ahead now and click that see what happens awesome deadly and if we open that up even further we can see that uh it doesn't open up past a certain point all right great okay so that's there this shows 56 in the card so that should actually be a whole number it shouldn't be like a decimal uh place in there so just for the sake of this let's just say we'll just put five for now once we actually start working with our view store with with ux then that's where we'll end up pulling in the product total for that particular product that particular item that we have in the cart that way and that's where a lot of our backend or data driven work is going to uh happen which would make sense because that's where data stored so um okay so we got that done um now i mean there's some some other things we could do here like we could start working on our data store uh to pull in um data like that for the product total so we we could do it that way um there's i'm just trying to think another way we could go about this too because it because the main place where we where we pull our data from and we interact with our data is going to be here actually where we interact with our data is going to be almost exclusively here in the product description drawer where we add or remove the product then over in the cart page that's where we're going to have uh that's where we're going to have the um you know the details right that's where we're gonna do all our math to tell them what everything totals up to create a list uh so on and so forth so let's let's move out to i'm just going to close every other one and we'll say well let's let's test out one more thing just so you can see this working in action does that close no that doesn't close so that's one thing we need to hook up here so we would have over on product descriptions where we would have emitted the event closed product drawer let's go to home and we'll say over here v on paste that in there and then what we want to do in there is just close the product drawer so we could call close product drawer that would be an option for us to do there okay so let's go ahead and create that particular method close product drawer and if you guessed it uh that's as simple as turning this to false so we'll say this dot active dot product drawer equals false okay so now that's closed it opens it closes it opens it closes if it's wider okay like this it opens we click here it closes okay we click here it does not close these buttons don't do anything for us either at the moment so all right let me go back to our mobile view 496. it's good enough for me i'm not that ocd so all right so let's go ahead and we'll start working on our uh actual store all right so let's go to our store and here index.js and this is where we'll start playing uh with things now i am i'm particularly i i don't like big files unless it's like an html page and but even then you know i break things out you know and the whole point of having viewers is to break things out in terms of your components so on and so forth so our store is going to have you know a couple different uh properties within the state um we're gonna have a few different mutations for a few different uh reasons and yeah so so and so forth so let's go ahead and we'll start playing uh with with the store here so first of all i want to create i want the ability for us to be able to when we add things to actually update uh the local storage so i could do this by i can create a function right in here uh called update local storage uh and all that i'm gonna pass through here is the actual cart so when i pass through the cart i'm just going to set the item from our store from the state in our store it's going to be called cart and we'll say json dot the cart data attribute that's brought through in our state we are going to have a cart which is going to be represented by an array an array of objects and we're going to have some getters and we're going to have some mutators so on and so forth so so first things first probably what we want to do is be able to add um for the getters we probably want to be able to see the product quantity in question so we'll we'll start by actually making that particular getter we'll pass through state and then we'll pass through our product this way and then in here basically item will be represented by state dot cart dot find because we're going to be basically going through so this is a higher order array function in javascript we're going to go through our cart and we're going to find an object that matches this so we'll say i equals i dot id if that equals product dot id which we passed through in here then we want to assign that to item so if we found item so we'll say if item if it doesn't return null then what we want to do is we want to return item.quantity now this quantity is going to come from a mutation that we create so that we can actually add that to our state um in there okay nope not that um and else we just want to return null in that case okay um update local storage that's fine we're going to do a few more things in here before we actually do anything and you know this is a getter so my apologies we need to create an additional uh getters here okay we'll just cut and paste that down there and then in mutations what we're going to do is we'll say add to cart and we'll say state and product that will end up passing through in order to add it we'll say let item equal state dot cart dot find um all right so as long as basically again we're searching through the through the array of um cart objects of items in the cart basically and we're looking for this particular product id so if that's the case then we should have an item so if item what we want to do is we'll say item dot quantity plus plus so basically what's happening here is we're either adding it to the array or if it's already in the array uh i'm talking about this array here for our state if it's already in here we want to add to the quantity that's in there if that makes sense so we add it by one and we decrement by one as well otherwise we want to create that and put it in to our um into our cart so we're going to go ahead and push on to that array we're going to push on a separate object now you can't just put product in here we actually have to make a copy of it and then put it in here otherwise product is simply referencing that particular product out of our first list so um and quantity will always be one i'm going to put i'm the reason i'm going to write it like this initially is just because um it's just because you know maybe we want to send through oh no sorry the reason i want to write it like this is because obviously when we add it we've only added a quantity of one to the cart okay so i hope that makes sense and then what we want to do is we want to say okay let's go ahead and let's update local storage with what we have there in the cart now why do we update local storage because when the application actually loads next time if we have things in our cart so if somebody's returning to the cart we want them to be able to pick up where they left off fair enough sounds fair enough to me okay now what we need to do is we need to go back to our product description drawer again here and we can do things like we can pull in uh the product total um in here so let's go ahead we'll take we'll take care of our computed property here first um and so all we need to do is we need to access this dot store um dot getters dot product quantity and we'll say this dot product is what we're passing through to be able to find that particular product right so it comes in here product quantity it goes up to here it searches through our card array uh using state here and then if we have it we're going to return the quantity otherwise we're going to return now okay and then up here yeah we have product total and basically if product total returns null then nobody's going to see this they're not going to see this they won't even see it as 0 it just won't show up unless they've actually added it so that's why we have that vf there all right now what we need to do is we need to think of adding a product to our cart so we'll create a not in computed we will create a method we'll create a couple methods here we'll need one method to add so this one will be called add to cart and in there we'll just say this dot store sorry dot dollar store dot commit so this is what we need to add we just commit the the commit method in order to access uh that method we created and to run it so add to cart and we need to do this dot product okay perfect i have to cut this.product good to go so let's let's go and see if that part works for us view product no let's refresh here just in case opponent renders okay let's go back and see what we're dealing with all right so that's kind of a silly mistake actually we have to actually bind it to the component so at click equals add to cart okay okay all right kind of a silly move there all right let's see what happens okay great so we can add it here i'm not going to worry about this too much uh right now we'll just leave that as is okay can't remove yet so let's go ahead and we'll hook up the mutation for us to actually um remove from the cart so we'll create a method in here which will be removed from cart and we'll kind of do things in reverse here we'll create the method here first and then we'll go to our store and create the method in our store um so we'll say this dot store dot commit and this is going to be remove from cart and we'll pass through this top product so that we know what product we need to remove from the cart now in our store under our mutations we are going to add something else here so this one is probably going to be a little bit longer than the other ones okay so remove from cart um pass through our state that's the person that will get passer and then the product in there and then from here what we need to do is we need to identify the item so we need to find the item in the cart so we'll state we'll say state dot cart dot find and basically if that particular as we're iterating through it if that particular item id equals the product id then that will have some kind of a value so if and this is kind of a precautionary measure like those buttons i don't know i mean the buttons will show up but basically if somebody clicks on this and the quantity we only want something to happen we only want them to be able to remove it if the quantity is greater than uh is greater than zero but really what we want to do is we want to check first of all and make sure okay does the item exist in the cart if it is this in the cart we're going to do something with it we also want to make sure that we have a quantity greater than 1. this is the first case scenario that we're going to deal with in which case we can actually then subtract because if it's not greater than one um you know so so it would be two or greater if it's only one then subtracting it removes it from the cart so what we actually want to do is remove that item from the cart period not have it show up with any kind of value okay and that's why we save it in local storage you know we don't have empty objects in an array or products with empty uh quantity go goes quantities of zero okay so i hope that makes sense so we'll subtract that there now else so basically if it's one or less we want to set the the value of the cart in the state by using another higher order function of state.cart dot filter so this is basically as long as it meets this particular case so if it's not equal to product now because we're removing it so if it's not that product then we want it to be in the cart otherwise we want to leave it um you know otherwise we want to move it from the cart so that's basically how we remove it from the cart in there now the last bit of housekeeping we want to take care of here is we do want to update local storage and we'll pass through state dot cart to make that happen okay okay so let's go back let's see what's going on here we have okay let's go back here okay we'll add oops add add add add and then uh yeah last thing same mistake i made last time i have to put the remove from remove from cart okay okay now you can see that actually works so we can add or we can remove from the cart and if we actually view our cart object here and see what's going on we have a quantity of seven if i add okay now we should have a quantity of eight we can see that our local storage is updating and if i reset my state in here you can see um you know we still have the card stored in here so now actually when we load up the application we can pull from local storage um that way if that makes sense and that should make sense all right and actually you know we can take care of that right now so basically every time we load up uh our page we want to check local storage to see if a cart is in there and if the cart is in there stored in local storage and that's what we want to load in so let's go ahead and do that uh where we're going to take care of that we're gonna take care of it two places one we're gonna go to our store and we're gonna use it as a mutation here okay and we'll call this one update cart from local storage all right i'll save state pass that through um so we'll say card equals local storage uh dot get item card then we want to check okay uh does card actually have a value if it does then what we want to do is assign that value to state.cart um we want to parse that json because we started as json and we'll pass cart through there now we don't want to handle anything else beyond this because you know if there is no cart in there then when we come up here we just want it to be an empty array so that we can then add objects to it now the next place that we will load this up in is in our app.view file and let's create a script and we'll say export default and in the mounted [Music] method we will go ahead and and add that so we do that as a commit we'll say this dot store dot commit and let's say update card from local storage okay so we'll save that now what we'll do is we'll go back to our screen here and we will right now you can see we have eight in the cart so let's go ahead and refresh and let's see if we still have eight yeah we do okay we do a hard refresh let's see if that has eight and yeah it still does okay close that we should have six and you can see perfect you know that uh that still works we could have multiple items in here so let's do a few more so we'll do four here a lot a little bit everything big spenders okay okay now let's reload okay again we'll view oh did we not add anything for hikers oh maybe we didn't add anything for hikers do we have a ski jacket yeah we did so that persists we added through to parker yes we did so i think it was just hikers i missed so we'll make sure we have a little bit of something and everything there okay all right deadly that's awesome so that works so there's really nothing else we need to do here we could test out and make sure that you know if we removed it we'll say trail runners that it actually stays deleted okay refresh trail runners yeah it stays deleted in this case all we're going to add to all right and then we can start uh viewing our cart page um in here so let's go ahead and we'll start building up the cart page we'll build the interface and then we'll work with the store pardon me to get all that working so um so cart dot view this is the cart page and we'll go ahead and this one's this one we're gonna have two child components in here so first of all we'll have each one and we'll just say your cart um and then below that we'll have a cart item card and we'll have some slightly different styles in there from from the other cards that we've done and we're also to have to put a let's start with the card item card first and foremost and then we do need to set up a computed property to actually pass those items through so we'll do that next here so we'll say script export default we'll say computed [Music] and we'll pass through items our items will be what's passed through and now we have to go to our uh store and and grab those so store dot getters dot cart items so we actually have to go back to our store to make sure that we can return these for now let's just uh just verify our data is coming through here we'll say for product and items really should call it products instead of uh items but that's okay we'll leave it for now you can change that if you want to it's just kind of a semantic thing so um key is going to be the product dot id and we'll just print out the product name see if we can't return a list of item after item uh that way but we need to go back to our store and we need to uh not there right there and we need to add that getter okay so cart items i'll try to take care of our state here and then we're going to need just that okay and really simply we'll just return our cart right state dot items state.card real estate.items okay now we can go back and we should receive this and if we go here you can see it's printing out already for us so now we have to do is create a card uh to then display that nicely so let's go index store here uh sorry not there let's go to our cart view in here and again we're gonna have to import a uh like a cart item card so we'll do that first we'll still have to create the file but we can sort of set it up so right now we know that uh you know we can say v4 products in products uh we can bind it with a key and we can say we'll call that product dot id and um what else we should probably say product in here is equal to product okay so now what we need to do is we need to import a card item card and we'll import that from components slash cart okay you don't actually have to add the view extension there i'm just used to doing that okay so cart item card and then in here we're going to [Music] have to declare that component and that will be part item card we'll throw an error here we expect that um now let's go up to we're gonna have to create a directory here so we'll create a file we'll say cart slash cart item card w all right okay perfect so this one's gonna be pretty simple uh we'll create a couple of classes to make this uh actually happen so we'll say we'll call this one cart dash item dash card and create another div and we'll call that class header okay now within the header we're going to have basically three items are going to be laid out like a row where we're going to have the name the quantity order the total cost and then below it we'll have a description of the particular item so in this case because we're passing through product we're going to say product.name and let's go ahead and declare that prop in here okay and we'll say props okay product perfect okay well put an h4 here uh we'll specify okay this is the amount of items in the cart and that will be product dot quantity well we'll do another one another h4 will say total cost um and we'll say we'll have to create a computed we'll create a computed property here so we'll say item cost got to fixed it's going to be two now there's two ways that we could do this like in terms of how we return this computed property one i can do the calculation right here within the component or i can make the calculation available to myself by creating a getter in the same way for the sake of not cluttering up our store at the moment because normally i would break that out into several different objects and then join all of the objects for for getters just to make my code clean and separated well but in this case what we'll do is we'll just take care of the calculation right here in the component so what we want to return is very simple uh this dot product dot price times this dot product dot quantity okay um all right that should be good one other thing we'll create while we're doing this is we'll create a description property and the description is basically just going to be a substring of the description we created because it's kind of just like we're not trying to explain in the cart view everything about the cardigan you know you have the drawer that we created in the on the last uh view so we don't need to do that right so here we're just going to return kind of a brief summary of it so we'll say this dot item sorry this dot product dot description dot sub string and we'll say from 0 to 120 and now um below this div we can actually get a p tag put our description okay so that page should show for us it's not going to look pretty uh let's go ahead and save this cart item card okay so why is that not properly bringing that in this dependency was not found oh yeah i just have to put a forward slash perfect okay and now when i say this one you can see it recompiles as well so now we can go back out here to our cart and i mean we should see apparently we don't um products was accessed during render but was not defined on the instance all right let's go back to our main view here okay that's because i labeled this as items label this is products and now you can see it works just fine okay your card covers slippers blah blah blah so now we just need to do some styling in here and the last component we need to create is basically the total of everything that's in the cart which isn't that difficult to do and we'll probably just do that one in the component as well but we could create a getter for it to do all that calculation as well in the actual store so let's go to our card item card in here just two classes and one is kind of a child class of another class anyways so we'll say style and our shorthand lane equals scss all right and we'll say dot cart dash item dash card and we'll say width is ninety percent margin we'll make five percent background color we want to make that white box dash shadow and we want to go zero 0 5 pixels and we'll say gray border radius we want to make that 5 pixels and padding i want to make that 10 pixels within the card and we want to align our text to the left all right great so now we're going to create the header class that we applied and this will be display equals flex and just to give it some even spacing over justify content equals space around in there and now it looks all pretty so that's that's good that's exactly what we want um in there now we need to create another card on the bottom to calculate everything else in there okay let's switch from here to here we can refresh this and again because we're storing everything in our local storage we can then retrieve it when the app reloads so very useful right um okay so let's go back to our cart card in here and we're going to create a component and we'll go ahead and we'll call this component cart summary payment card okay because we're pulling everything in from the store we don't need to pass it any props or anything like that but what we do need to do is pull in the component and then register it so cart summary payment card from opponents maybe this will throw an error we expect that so in here we'll say cart summary payment card okay create a template view as well is defined but not used okay that's because we haven't registered it all right perfect there we go and that reloads without uh us having to do anything in there okay this was going to be a really simple card in here we're going to borrow the class from the other component because that is registered globally not specific to that specific component so we'll say cart item card and in here we'll do an h3 and we'll say a cart total and we'll say cards underscore total two fixed two okay and we'll say view product button so that's another one from our first view that we created um that's where we're pulling in that particular class okay and we'll just say pay by credit card all right and we need to pass through this computed property and that one is going to be card total and we're going to return uh using the gutters we're going to pull in our card items okay just like we did on the previous page so if we go to its parent component that's what we did there right um [Music] so actually you know this is kind of some way we could actually rework this a little bit so instead of saying cart we'll still use cart total as a computed property we need we should pass products uh as a prop into this one so i know i said no props but it makes sense to actually have a prop yeah products equals products just like we have here okay now we'll go to our computed property we'll pull in our props all right and now what we're going to do is through these items we're going to and this is probably something you'd want to put in as a getter anyways so i'll let you do that because we've built a few getters together should be kind of straightforward that way so um no sorry i want to do this stop products originally when i when i built this i pulled it as a getter out of there but we don't actually have to so um we're going to go through this and actually you know what i'm sorry i'm gonna do it the original way i intended all right to be done so you can see how this implements um this implements creating a getter basically so we already have the getter so store.getters dot cart total is what we're going to call this one okay now do i have to do that no i don't okay cart total so let's go to our cart our store in here i'm going a little bit off of my script here but card total we just need to pass the state through and we simply need to return state.cart we need to reduce it so we're basically going to perform an operation on it to you know to basically add everything up together so that's how we do it using this higher order function and we'll say a plus b dot price times b dot quantity and then we need to initialize it with a value to begin with okay so i've done this now in here but so i don't know if it's obvious how this works but this number will initially represent a but any value that we create here gets pow gets gets passed on to a for the next time that it runs through as it loops through okay that's how the reduce higher order function actually works now we go to park car payment we'll say cart total two fixed we should see uh we should see that at the bottom and perfect uh we do so that's great and you can see we see pay by credit card um view product button that must that must be called something else somewhere else oh you know what i did just to get that working let's go to home come down here nope not home um product summary card yeah product summary card is what we want so let's go to products and we'll say product summary card here okay and i'm just going to take so button.view product button because this is nested within our other component i want to make this kind of available globally right okay now let's go back here and see what that looks like and you can see that looks pretty good um definitely no complaints on my end for that one so card total so that's basically a summary of a very basic just a very basic heart system that you can easily extend very extensible um and you can see i mean obviously i built this beforehand it probably took me about five six hours to flush it all out the way i wanted to to make this simple but you could extend it you know you could factor in adding coupons all sorts of things that you could add or add into this but this is how essentially what the takeaways from this router that's pretty basic very basic implementation that we put in there how we can use a preprocessor's uh sas to compile our css and then of course to make it available globally but build it in the components when we actually have to manage it uh we do it that way how to work with the store how to update local storage and then to pull from local storage so that you have a way of persisting the data before you actually pass this on to your uh onto your back end to process the cart to process the payment to record all the details so on and so forth so hope you enjoyed that video definitely uh if possible give me a if you liked it please give it a like thumbs up uh if you have any questions please comment let me know what your questions are if you didn't like it go ahead hit the unlike button and if you found it useful and you think somebody else will find it useful then please take this and share this with someone else alright thanks

Channel: Tyson London

Views: 19,360

Rating: 4.9556785 out of 5

Keywords:

Id: oWt4jYThJCo

Length: 106min 4sec (6364 seconds)

Published: Fri Feb 05 2021