Shopping Cart Count Exercise and Q&A

[00:00:00]
>> Our exercise now is to finish the cart, add a counter to the cart in the menu. Remember when we were looking at that next food app, that I had before, we had this like, as we added things to the cart. If I have two and I add to cart, you can see that little two Bear, you're gonna make that little too.

[00:00:25]
There's a number of ways that you can make that little too. I want you to try to use a getter for that. So, we, went through this SVG logo. I also have a cookbook demo that shows in view cookbook. Now let's finish this thing off. We're gonna show the count of the cart in the menu and you're gonna use the class smallnum.

[00:00:48]
If you use the class smallnum, right above that layout and If we go into app menu, if right above here you use a div class of smallnum, then I'll take care of the styling for you. That's my promise to you. [LAUGH] If the card is empty, show an empty cart SVG, it's in resources.

[00:01:10]
So if we go over to our resources, we have this hungry man SVG. In that SVG, he's going like I'm hungry. And I think he has like forks and knives in there. I think we can see it if we go back to this next food app and go check out the cart.

[00:01:32]
There he is. He's like, Man, I don't have any tacos to eat. Your cart is empty. So what you're gonna do is, if the cart's empty, you're gonna show this, your cart is empty, fill it up with this hungry man, and try to make it accessible. Remember how I put a title and an aria labeled by and things like that.

[00:01:53]
So if the cart is empty show that, otherwise show the table and then show the count of the cart in the menu using the class smallnum and try to use a getter for that. So you can Look at the final result if you need some guidance for what that might be.

[00:02:07]
I got some questions in the chat. So one of them was will all of the, dynamic pages and getting all of that data from the food data thing happened at build time, and that that is what's happening. The reason why it's happening that way, is a couple of different reasons.

[00:02:25]
One was that we picked target static. So we're building it like a jam stack app. Basically, the premise of that is that we do everything ahead of time. We kind of bundle and we compile and we do tree shaking, and we pre build the entire application and then we disperse it to CDN nodes all over the world.

[00:02:45]
So the the kind of benefit of that is that you're not pinging a server for the information and then waiting for the server to then respond. Everything is available to you when you first hit a jam stack application and then that makes it go really quickly. Where you might see though is because of that we have some build times when we're creating all of those dynamic routes.

[00:03:07]
Now, there are multiple ways of working with next though, you can also use next on the server. There's different targets. They have server side rendering for servers, they have SPA, they have that target static. And the nice thing about Nexus, you can set all of that config with a string inside knucks.config.

[00:03:28]
And so they make it pretty simple to even switch compile targets, right? Like if you decided you wanted to try one thing versus the other. It wouldn't be hard for you to do so you are able to do so with ease. So the way that we had kind of built this in next config is we said target static, and then we also had this get food.server.

[00:03:53]
The dot server on the end tells next, execute this on the server instead of the client. So I could say get food.js in plugins, then it would execute on the client and the server. But if I specify dot server or dot client, then knucks knows whether or not to execute it on the client or the server.

[00:04:14]
Pretty cool. Great. Another question was does view x restart the state of the store, on a browser reload? Yes or no? The answer to that is if you're just storing the application state without storing it somewhere else, then yes. So in this case, what we've got is this API data.

[00:04:38]
And we're pulling the API data in from Amazon like we talked about in tha. And hose Amazon pieces are gonna stick around right? Even though they're in view x store, they're gonna stick around on another browser reload, because of all of the building things I just talked about, right?

[00:04:54]
We have the state that we have from somewhere else. So If your server or an API is giving you that data that will stay in view x store, but if you're just holding things inside of your store and you're not storing them somewhere else, in other words, there's a thing called crud, create, read, update, delete.

[00:05:14]
If you're not creating crud application things to add things to things and I will talk about that in just a minute about how we could do that. Then the extra will get rid of it. It will get rid of it on another browser reload if you haven't given it in a way that the application knows to process so those are the answers to those great questions from the chat.