Live Coding a Shopping Cart using Vue

how's it going everyone we are going to be building a really simple shopping cart application in this live coding tutorial you see here with my horribly styled CSS and this beautiful pink header you have the ability to view some products on a website which you can you know see here we have the hair brush and some cookies displays the cost of them and when you click on Add to Cart for any of these products it's going to add these to your cart increment this number here and as a user you can go and you can view your cart it's kind of confusing that these are the same items as before but if I remove these notice that your cart will become empty this number will go down and we can go back and add a bunch of items whatever you want okay and when you refresh the page this just clears out because we're not doing any form of local stores to persist this but yeah that is what we're gonna be building this application and if you don't mind the ugly styles and you're more focused on the functionality of how to implement this in view be sure to stick around you're gonna see me make a lot of mistakes bumble around reading through some viewed Docs but all in all I think it's a good tutorial so be sure to watch it so for this project I'm going to be using view I do have the docs loaded up over here because I haven't memorized everything and I'm sure I'm going to forget stuff along the way but for the most part I have a view CLI project created over here and I went ahead and just delete some stuff so it's really bare-bones and we recomm using view router or view view x4 state where doesn't mean you using view and that's it so hopefully this is a good tutorial if you are new to view and web development and be sure to watch this all the way through because you will learn some cool stuff hopefully but anyway what are we trying to build we are trying to build a shopping cart application so what does that mean we need to have a page that displays products so if you go to Amazon you know you can search the products and you could click on one to say like Add to Cart so we're going to try doing that so let's just on our main app we can here let's just pretend we have a an array or a list of products that we want to render out so first of all in our app component we can refactor this later on let's just add a data property and have that returned some products products and that's going to be an array and let's just define a product such as hairbrush or something I could cost I don't know how much hair pores just cost these days I never brush my hair alright so hair brush cost is $0.99 name is that what else do you think you need on a a product that's probably good enough actually you might want an image right so I'm just going to go and type in hair brush on Google Images and hopefully nothing bad pops up alright this one looks good yeah let's copy this image address and plagiarize so if I paste that in here that's actually a date I don't know if it'll work it probably will so what we want to do is just let's try to render out these lists of products so instead of printing out hi here I could just do an h1 and say products and then I couldn't make a div that has just pretty much all those products so in view if you want to iterate over a list of things like using a for loop you can say V for and then you can say product in products I believe alright and then typically you want to bind a key so this colon is like a shortcut way to do a data binding and I could say the key is going to be equal to the product name and all this is gonna do behind the scenes is basically loop over my products already down here and for each one render out some stuff so I could do product not name to render that out and it's failing because the template requires exactly one element all right so simple enough solution the root requires one element what that means is I need one element and now we have hairbrush printing out so it would be nice if we also had the image so inside of that div let me close this so you have more real estate okay is that look better y'all awesome inside our image we can point to I think source and I always forget how to do this because I'm so used to using view so I think I could say product dot image and the fact that this is you know what I'm mixing it my JSX here I think you could just do this so bind it to product on image and hopefully that works too no character Ashby tags I don't remember how to do this so see I don't need curly braces maybe I do actual tag here it's okay there we go so hmm you're gonna see me make a lot of mistakes in this video and I hope that is what you want because watch me struggle maybe you'll learn something so we want to make this into a nice little like card maybe you're a nice little like a component that you can easily click a button so I first of all we want to add a button call it like Add to Cart okay save that we have a button okay so now we have just to kind of demonstrate the looping thing I was talking about if we have multiple products like we have a hairbrush I don't know the cookies you can make those like $5.99 let's find a picture of cookies here that looks good yum yum alright let me grab this one copy image address I'll go ahead and paste this in here and if I go back we have cookies oh we're not printing out the cost probably nice to print out the cost somewhere right so I'll add another div and I'll say product cost but we guys will see how much these things cost okay so obviously this is a really bare-bones project I don't know how much time I'll invest in CSS just enough to make it so it's not like extremely hideous but I think it'd be nice if we had two columns here so what I could do is I'm gonna rearrange this a little bit and I'm going to add a wrapper I'll just say products so there's a wrapper div called products and that is going to basically wrap all of our little product divs okay and down here in our style components it's a scoped and I want to add a class called products and that's going to be a display of type grid in I'm gonna say give that to columns I'll do this so now they should hopefully be side by side if I save this page and of course they're not oh they are had to refresh the page sometimes if you say like doesn't seem like a refresher stuff maybe that's because I don't have my chrome tab opened down here I don't know but anyway I have two columns now and I got a button Add to Cart got some cookies a hairbrush awesome we'll come back and style this probably but I think at this point it would be nice to have products on its own page because you know a whole endless think what do we need to do now so basically when someone clicks on Add to Cart we are going to want to store that item that they clicked inside some type of array data structure okay so it would make sense to have another data attribute called cart which is equal to an empty array and when we click on add to cart we want to do something okay so in view you could say : on and we could do a binding to add item to cart and we'll pass it product alright so in order to call this method we have to define it in our data component or in the inside of our component down here so if we go down and we add another method I'm sorry if we add another property called methods and that is a object with different properties in it so I could say add item to Cart and that is going to be a function that we can call this is going to take in that product that we're passing in so when the user clicks on this button we're gonna pass in the product here and just to visualize that I could just go ahead and print out what product is so we have a good understanding of what's going on let me go to my console let me clear this I mean click add the cart and it didn't work because for some reason it didn't work so I don't know why they don't work okay so what would make this not work I think it's not on I think it's click there you go this is just examples of me wait what okay hold on is it on click might have to go and look at the dogs I don't remember how to do this this is embarrassing guys all right go to click Veon okay I guess you do have to do beyond for doing that I don't really know let's see maybe you have to say beyond anyway okay so every time I click it it is printing out an observer cool and that has cost image in name so maybe this was working because I did see observer down here hold on let's step back let's just go like this in refresh there the console click on the button v on [Music] I guess you need beyond I don't know I don't know what I'm doing so I don't know why you guys are even watching this tutorial video anyway let's so you click on add item the card we need to add that product to that array that we talked about in here okay so that's simple enough right maneet it's in your data component or what you return from your data component you should have access to so you should be able to say that this dot cart and then you should be able to push your product into that cart okay and again hopefully this works I'll just visualize this click this button and now we have an array that has one item in if I keep clicking on it we should get like an array of seven items okay so I'm assuming that's working it sounds like it's working what would be nice to do is up here on the top right maybe even had it add a header I'll say header and what we want to do is we just want to put out the like how many products there are so I could say Cart dot length in a cart oops double curly curly Bert brakes braces or whatever oh no go back alright so zero and cart okay let's go down here and style that just a little bit I'll say height is 100 pixels color background color faint I say gray who looks bad DDD there's margin on the page so it's not gonna look that great let's change that I think I can go to the what do I go to I think I could probably just say style here and say body margin:0 they fix it okay all right ee so what we want to do is inside the header we want to pretty much text align everything to the right this still looks pretty bad I'll just give it a box-shadow how about that and I'll make it color about that there there's our awesome header okay font size 30 pixels height is probably way too much and I'll say padding top 20 pixels okay there's our cute little header that kind of shows it how many are in your car so as you click on anyway won't run the show here is that you click on these items they're added to your card okay since Oh Lord what is all this are those the images yeah then you're gonna work hold on let's find some different images I need the actual like real Wikipedia okay please be URLs copy image address go back you know I could just minimize these how about that that's good enough I forgot you can minimize using your visa code editor so what I am trying to do now is I want to be able to view my cart okay so it probably makes sense to have a button here in the header called like view cart I love Auto formatting so if you click on View cart what is that going to do well it's going to basically show a different view down here of all of your cart items so obviously if your application is gonna be large you're probably gonna want to use real routes like do router but we're just playing around you know learning some stuff doing this doing that so what you could do is you could kind of have an internal state to represent what page you're on and show different pages internally here based on if you're on your cart or not so what we could do is just add another thing called page and we will save products and we want to just basically show that so V I can make a div and wrap all those wrap our products and we could later split this out in the subcomponents if you want to but basically if page is equal to products and then we want to show the stuff down here and just to show that this will break if I change this page to like cart it goes away okay and again what we're trying to achieve is when you click on view cart we want to basically change the page to cart and show something else so I could just do this your cart delete all these things while I add back something similar just a second but so now we have two pages we have a cart page and a products page actually just that's just a cart so when you click on this button here we want to change our page to cart so I could say on click and then call a function called navigate to a cart I guess and again this is like you can grill me on this this is just I'm just having fun right here but you definitely want to use view router probably to implement what I'm trying to do and maybe I'll make another tutorial to explain that but basically I just want to be able to set the page with the method here navigate to and if you click on that button it'll take you to the cart so let's change this back to products and save it and it should have gone to the products not going to products is equal to cart if the page is equal to products mm-hmm [Music] this is one thing I feel like do I need to restart my view CLI what's going on here could have a bug maybe have a bug well this is kind of strange okay so we have page and it must be stuck to cart still products what's going on artery load empty cache and hard reload I didn't like that okay so what is going on here is anyone uh and does anyone know I don't know let's see because I added this stuff if Paige is equal to Cart show this I don't know what's going on so let's just print out what pages it's in cultic art for some reason but if I go down here data returns products hold on this might be invoking directly my gosh I did it again I did it again y'all there's some things about view I just don't like it's just it there's like little nuances that you have to make sure you do so I had to make sure I do beyond click otherwise they just kind of called this function right away if anyone knows why that was happening or if there's a different alternative to this let me know but anyway let's move on okay we made progress here so you click view cart it takes you to your cart and you probably want another button here that says view products and we could say that that navigates to you to the products view okay so view products view card and obviously you probably only want to show view products and I will just keep those who cares so now in our cart very similar what we want to do is we want to loop over all of the products and print them out okay so if I go here I could just basically write that exact same code but instead of looping over your products array you're gonna loop over your cart and this could you could probably still use products that's gonna look very similar but the only main difference is we don't have a button that says add to cart instead it will have an item that says remove item from cart and let us you cart as of add a cookie I go back to my cart I have a cookie in my cart and I need to say it removed from cart on this button here and I need to also add a function that will allow us to remove it so down here I can say remove item from card that's gonna take in a product and we could just say this cart not splice this cart index of product assuming that these are the same like object references this should work fine so if I add two cookies and two brushes I go back and I see an error down here oh okay well you so a couple of things I typed splice incorrectly so that would help if I did not type that incorrectly let me add a brush in a cookie I'll go back and I'll remove the cookie and then I'll remove the cart okay so a second thing was we saw this error saying that like duplicate keys that's because we were indexing on name which the issue with that is name is duplicated like if you add 15 hairbrushes they're going to be the same hairbrush every time so we instead want to do is in index and I don't remember how to do that honestly so let us Google view loop use index Oh shame if you don't know what you're doing think you just okay so this is what you do you basically go over here and you say index okay so it's you're looping over getting the product and you're also getting some internal value from view so instead of setting our key to that and we're gonna set our key to index is this good practice I don't know you tell me you guys are the pros right I'm not a pro at view I'm not a pro anything all right so if I click on the cookie and click on it a hundred times and I go to view Cart we get a bunch of cookies awesome yes beautiful so one thing I really don't like about this code is that it's getting kind of big kind of complex so it would be nice if we split this up into smaller pages or components so I'm gonna go here I'm gonna make a products view and I'm going to scaffold out a view product file there and what we want to do is basically take all of this code this code is the cart so not all of that code all of this code so take all of that and put it in our products template and we're gonna run into issues because of that whole root component thing that I complained about earlier so make sure that is wrapped in in one root component and then we could just go ahead and say products and import that so in order to import that you can import products from components / products view and we should get an error because programming is hard mm-hm what does this complaining about products is define but never use okay well in order to resolve that little error that you might see when working with view and ESL and you need to add a components array I believe I don't know if it's an array I think it's it might be an object actually I think it's an object is you want to map the key names to your things but hmm I already have a declare it okay awesome so let's go down here and just add products to that components list and now when we go to products nothing works why is that err down here all right so this is complaining saying that products was not defined so now that we have products like ear we have a hard-coded list of products here we could either pull these out and put them in the products component we should probably make more sense so I'm gonna do that I'm gonna go here we're going to define some data make sure it's inside your curly brace and we are going to return that so this is going to return products and now we can seed them all second issue is we were doing this whole grid thing and if I just actually pull this out here that should be global now and that's gonna work on our cart and our products page so if I click on add the cart it don't work because add-to-cart the function that is declared in our app view file um but what honestly what we want to do is we probably want to emit an event so here we minimize all the stuff and when we click on add item to cart that's going to emit something so let's go methods we have a method called add item to cart and that is going to emit and I'm too cart product about that is that how you do it now in our app component whenever this whenever a product is clicked on the products page we could just bind to an internal function here I think this is how you do it and basically push it into the cart remember like if you're using view X or some type of state management this could probably be shared state and then you could just fire off events and update the cart but since we're not and we're using like drilling and stuff you need to either pass up like an emit an event when someone clicks on this so that you can add it to your cart if I think we're getting a bug what's going on here if I click add the cart what happens nothing it should do something so let's kind of debug this I'm pretty sure this thought Amit should fire off so do we emit the product when we click on these buttons we do the docks how do you omit events come on like I mean I need to go to custom events that's not a man you passed the the event you say be on is that what you really need to do again maybe this hisses by you Mina but so many times like I have to say beyond I thought this was a shortcut to bind to it though so I don't know I just don't know like that fixed it I don't think I've used view three I've been using like the older version of you but I guess you have to use V Devon now kind of confusing this is kind of a bath to toriel but I hope you enjoy watching me struggle with view and refresh my memory but Anna had a bunch of stuff to the cart we all see it that it's in a cart okay so the second thing I want to do is similar to how we did the products I want to make a new component called cart and we could take all of this stuff and put it in here and we could just instead of doing all this stuff we could just say cart make sure you import it I keep reading too close my navigation it's probably hard to see the code when I keep that open but make sure you add that to your components list or else it'll crash and you'll be confused for 30 minutes trying to debug what's going on so now if I add it it's adding it to this carts a right here but question is do you want your car to race toward inside your actual cart component or should it live in a top-level app component and that is a good question and I don't know the answer the choice is really yours in our case let's just keep at the top level because I'm lazy and that's easier but in order for this cart to work okay if I go to my cart notice nothing renders is that that is because we don't have that cart data passed in so we could pass in that cart prop so I could say pass and cart think I need to bind it though okay so pass in cart and inside of here we could define think it's like this props cart and wallah look at that now whenever you add something to your cart it's being kind of added to your top level view app component and pass down into your cart components and then you can kind of do stuff like this now the last issue is we can't remove anything from the carts because we need to add another method here so method removed from cart is a function that is going to emit the exact same thing or removed from card product let's see and now a charm I'm gonna remember the type V - on remove item item from cart it's going to call a function called remove item from cart that's going to splice it from the cart okay so clear the console click on remove in watch it crash why did it crash let's refresh no if I need to refresh I like doing that because sometimes stuff doesn't work alright let's read the error that helps to reading the error really helps because sometimes I don't read the errors when I probably should remove item from cart is not a function so and that is coming from what to which component coming from the cart component do you have this beautiful beautiful air tells you exactly where to look not really doesn't really tell you you have to kind of dive into it so cart dot view if I go to cart top view it's saying remove item from cart is not a method and that is because I forgot to put the S on the method I hate programming I click on remove the item a removed both of them which is also not what we want so what are we going to do maybe we should remove the index the index so splice out the index this is probably such a bad code but I hope you're enjoying watching me struggle alright so I added two cookies I go back I remove a cookie and it only removed the one that I wanted to remove so is there more bugs with this probably let's just add a bunch of stuff and trying to remove stuff I'm gonna try to remove oh the hairbrush is it removed every single one for some reason you know what I think that is because I must be pushing identical references to my view component so if I go to products I sense to make a new reference there what happened what it at a curly brace I don't really know so I'm gonna add a bunch of stuff here and now if I remove a brush it removed every single one why why is this happening to me item from cart should be removing the index and that's it now let's just go back to product you should all be different products so I'm gonna go back to product remember value from cart this that cart oops index of product oh I know why so this is why you need to be good at JavaScript because if you just do splice it's gonna return or delete everything from your array what we want to do is splice one thing out not everything out [Music] so let me take a step back let me go back I don't need to do this I do not think I need to do this okay this is complaining about index as I deleted it there for some reason add a bunch of cookies add a brush nice um I need some margin on the bottom of this page all right you guys ready I'm kind of scared to click this button let's click it oh it crashed awesome cannot Reaper t index of undefined this dot card dude if I had a dollar for every time I mistyped something in this tutorial I'd have I think two dollars minimum two dollars minimum alright so I'm gonna ask them brushes and some cookies and mother stuff removed okay it worked did it work oh dude okay so let me just add a bunch of crap a bunch of cookies and Alisa and at least some cool so at this point we have successfully created a really basic shopping cart obviously when you refresh the page you lose all of your cart items to achieve that to solve that you probably want to store your cart information inside your local storage or inside of a brow like a cookie so that when your user logs in their cart is persisted but that's a more advanced topic and I'm not going to cover that in this one so let us maybe just wrap this up by styling this up a little bit so when I take a screenshot or YouTube thumbnail people might actually be interested in Washington this tutorial so let us let's just tell the products a little bit more so we have [Music] here so I could say the h3 we could just dial that some this whole thing is like duplicate code honestly we could probably make this into a component but it's really similar but it's okay to copy code sometimes there's no shame in copying code the button okay I'm going to put the the cost up one the right they cost and if I go back to app view I should be able to say products dot cost lote right as I can do it all that work it doesn't work well I could do the CSS grid again I could probably use flexbox or I could just say screw it and I'm not going to style it that much so we have the title we have the cost and we have an image and in the button we could probably make a little bit nicer I'm going to just go ahead and say products button ten patting give it a background color of like cyan oh yeah that looks real good maybe we should give it black outline:none border:none does that look fresh y'all I hate how the cursor I don't know why the button so cursor:pointer like II think buttons were defaulted by having like a cursor all right so this looks a little bit better and the buttons in the top I'm going to style as well because those look pretty bad and in fact the header this background color needs to be something else I don't know let's just do like pink let's make this really vibrant y'all looks good looks good to me let's make this crazy this blue yes now we're cooking all right view products so in the header we want to style the buttons and again Paddington border:none cursor:pointer colors should these be I don't know background color Green so many click throughs on YouTube all right so I think read the text accessibility is important anyway the whole point of this wasn't the styling that's why I saved her for last I'm just kind of messing around with it but we have successfully built or hacked at a really simple view application for keeping tracks and products adding them to a cart and viewing your cart removing them from your cart again this was I haven't used view in a long time it's been like a couple of months or go back on my tutorial videos the last time I made a view video is probably three four months ago so I don't remember what if like how they do certain stuff I think things have changed like really this is required now I don't know I need to read through these docs because I think view 3 is come out recently but yeah if you like this video be sure to LIKE and subscribe there'll be more crazy videos like this in the future where I just kind of LiveCode stuff and fumble around with doing things so if you find these helpful be sure to will subscribe it leave me a comment leave me a thumbs up and give me any feedback ideas for other products or applications you'd like to see built via a live coding session

Channel: Web Dev Junkie

Views: 7,295

Keywords: vue, vuejs, learn to code, coding tutorial, programming tutorial, javascript, es6, vue tutorial, live coding, live code, live code vue, vue live code, live coding vue, live coding in vue, vuejs live code, live coding vuejs, beginners, tutorial, class, lesson, course

Id: fB6smjNEFtU

Length: 37min 47sec (2267 seconds)

Published: Sun Jun 28 2020