Cart & Badges

[00:00:00]
>> What's next? It should do that we have here, the Button. We need to add this to the cart, I know at this point is sounds like too scary, okay, so where is the card? We have a CartManager remember, this is our CartManager right now. What if we create a function like add that receives the product and quantity.

[00:00:28]
And we are just going to, as a best practice to not allow from the outside to touch my array something like that, so we going to just append. It's append and we're going to create a pair. Remember this is actually a tuple of two elements. We create one with the arguments and we append that to the cart, does it make sense?

[00:00:58]
Also just because we are here, we have add, we can remove that receives product. So remove, there are many ways to remove that one that I would like to show you how to use is that, you can remove all with where, and what is where, what type is that?

[00:01:19]
>> It throws, it's yet to be, it's a type of Boolean, but you have to handle that.
>> What is that? A closure.
>> A closure.
>> So if I click there, actually I'm going to receive the pair, let's say the item in cart, I need to return true or false, if you need to delete that or not.

[00:01:37]
So I'm going to return If the item in cart.0.id, for example is equal to product.id, so if it's the same product, okay, delete it. And also just because I'm here, I may want to calculate the total, well we can do it later. So, now that's the CartManager, okay, so in my details page.

[00:02:09]
Now, how can I access that CartManager from here? What do you think? Does anyone know how can I access the CartManager from a view Environment option, sure that's correct. So I need to create an Environmentobject that is going to be a dependency, okay. There's going to be cart called CartManager = CartManager.

[00:02:30]
Remember that we have already injected this at the app level. And now probably my, let me do it again. We don't need to insert this, so we just need to create the variable and define the type that's all. And also probably my preview will crash now, why?
>> Because you're not injecting that.

[00:02:55]
>> Because we need to inject that here, as well. So there it's it, taking a while, but now [LAUGH] it's crushing, so I need to add the Environmentobject to CartManager. So you know that the value you're getting the idea of how this works, so now it's working. So now that I do have the CartManager, I just need to call out, what's the product?

[00:03:20]
The product was the quantity, the properties that I do have in my view, okay, makes sense? So how do we know if this is working? Well, we can see if the card has something, but let me show you something really quickly and nice. So it gives us some endorphins, so if you go to contribute remember that we have the tabs here.

[00:03:49]
So in other tabs, the tab item, we can also change a property, it's called the badge. The badge is a little number that appears with the top. So, and we can ask the CartManager how many items do we have in the cart, right? So how can I access a CartManager from here, from the content view the same Environmentobjects on every view.

[00:04:18]
That when I get data from that cart, we need to do the same thing, Environmentobject CartManager of type CartManager. So now we can connect this in the badge to the CartManager.cart.count. Will work, we'll see, while our preview will probably have the same problem, because I need to inject in the preview, okay, but let's run this.

[00:04:54]
Here, so I'm getting to Black Americano, cross your fingers Black Americano, I knew I don't have the description, I should add the description. So let's add to the cart or one wherever it's the same, add 1 to the cart, look at that got a little nice one badge that we have there.

[00:05:14]
So, let's try to remember what we have here, so we are the Button is talking to an injective Environmentobject that has a published array. And then, another view in the hierarchy that has nothing to do with the details is connected. They're automatically updated, so if I go back now and I select flat wider and more flat wider.

[00:05:45]
It's actually not taking the quantity, so three will actually say 2 here at the bottom, okay, but that's fine. We can change that if we want, okay it makes sense, so if I go to orders page now, hey, it doesn't look so bad, we have to Hello words.

[00:06:03]
Okay, that's because we didn't finish the item, the guard item, but it's kind of okay. We have 2, we have a forum, we still need to add the total, okay.
>> Okay, now this is great, I'm just saying I think items is still have probably issue if you went multiple times.

[00:06:22]
>> Yeah, we should solve, let's make that to do for home homework, but yeah the problem is that we are treating, now the product as a key also in the list. So actually, if you're adding twice then we have a problem.
>> Yeah.
>> But it's easy to change.

[00:06:41]
>> It's easy to change.
>> You need go to the add.
>> You just have to remove-
>> And first check if it's there, if it's there as you need to adjust sum the quantity, so add to the quantity. So it's not a big deal, but yeah, I think you got a idea of how to solve the problem.

[00:06:55]
But I mean, I think it looks like an app, right? So let's finish the missing pieces, first the details page is not showing the. Description, I don't think we have the text for the description for some reason, so let's add it. I can just clone the product name and add the description here.

[00:07:25]
So we can change the color, for example let's say the foreground color. How do you take a color library, colors and I will pick on the primary.
>> Something like that, so now Black Americano, we see in red the description, okay, so that works. So the next step is to actually see something better in the cart for the item, and we're kind of there for the cart and we have the info section pending.

[00:08:07]
So we just need to create something better here in order items, so it's actually not a big deal, before doing that, do you have any question? No. Okay, so we need to replace this text and before actually doing something else, we need some dependencies. Jack Charlie you render, I know that I am, what do we need?

[00:08:42]
>> Environmental, I forget-
>> We have karma share or we have menu-man share, which one?
>> [INAUDIBLE]
>> We will need that, but you're right, but for the wrong reason, let me show you why? Well, we need to actually render the data is actually the item and the item is of type, pair or tuple of product integer, that's actually what we need.

[00:09:17]
Okay, for rendering at least, but we will need for in just two minutes. Okay, so when we have the item of course, it's given me an error here because now I need to pass the item in the premium. Every time you have a dependency like this, you actually need to add this here, so I need a pair of product.

[00:09:39]
Okay, and again you can create your own dummy data framework or mock data framework, is not complicated but okay, this is Dummy with the price 125. Now image, I don't care about the image, what is that? The body, I don't know what's that, but I don't need that, so this is closing product, I need to close order item, okay.

[00:10:08]
So, now we need to render something here, okay, and if you remember the idea is to create, like in the same row different items, so it's going to be an edge stack, horizontal stack. So, I'm gonna try place for now, three text, one with the quantity, so I will take from the item.1, the second argument is a integer with an x.

[00:10:34]
You will see it in a minute, then we want the product name, so it's .0.name and the price or maybe the total. So it's going to be the \(item.1) multiply by item.0.price, okay. Remember this is a tuple, so we're using 0 and 1. If we want to make this better, we can put names in the top or we'd see that in the morning.

[00:11:12]
Also we are seeing an error because we need to convert the quantity to double, topping it up. So if we assume is to get an error here because, I'm missing the, yeah, you're right, the quantity it's a double. Let's see. We have item, let's do some parentheses, you can see it's complicated, that's why it's better to actually do this in a different file.

[00:11:52]
Below fail, okay. Resume, we are still getting an error but somewhere else, were probably in the orders page because the orders page, okay. When it's not empty it's actually rendering, let's scroll order item and now order item needs an item. Where is the item? Well, we were looping here over those items, there is a for each, okay, this is similar as what we did before with the menu.

[00:12:33]
Okay, so now order item, let's see if we can receive the preview, okay, looks like that. Something that I wanna show you is an element that we have used in different places, but we haven't explained that one. Also we can add a dollar sign to the price and specifier as we did before as always for the float.

[00:12:58]
On the other item it's called spacer, it's ABU, what's a spacer? And the flexible element that is actually pushing as much as possible by default, so it's just pushing elements. So as you can see here, it's pushing the elements. So it's doing that, so this reminds me, I'm not sure if you have been there, we're doing websites in the 90s.

[00:13:25]
Where we have a pixel.GIF file that was actually doing this, to push a div before CSS, before we could actually set divs with CSS. So yeah, maybe we can add some patterns, so we can add padding to the whole edge tag. And by the way, we are also missing the Delete Button, was the Delete Button, any image?

[00:13:56]
Image, can we use someone like trash? We do have a trash? Yeah, if you wanna change the size, like this, you can also do that as a font. If you want a big one, like so, we're gonna add some padding, and we can change the foreground color, which color?

[00:14:21]
No, any color, let's pick one, secondary or primary? Not sure if you see that, but that's actually in that color. Okay, it's not a Button, so how can I detect gestures on something that is not a Button it doesn't have a handler? Well, gestures are you would like that because it's really webby.

[00:14:47]
There are modifiers starting with on like events, and there is not unclick, sorry because this is a mobile device, now how the event is called the mobile device? OnTap, so we have onTapGesture with a code, and. What do you think that we need to do here?
>> Color.

[00:15:15]
>> It's to remove
>> Remove it from where?
>> CartManager.
>> From the CartManager, how can I add the CartManager? How can I use the CardManager here?
>> Put the environmental variable in there.
>> Environmentobject, you learn Swift UI, so we need a CartManager of type CartManager. And from here, we are going to talk with that manager, and we'll say remove which product, the one that we have item.0, sorry, that's the product.

[00:15:54]
If everything works, it will automatically update whatever UI you have that is pointing to that array of objects, okay.
>> If item.0 is that the first item-
>> Is the first item of the tuple, so .0 is product, remember you can have names here as well to the type if you want.

[00:16:14]
Well, now if I add to Americanos we see the order there, if Macchiato was one, we go to the order. Well it doesn't look so bad, maybe that padding that we added was not necessary because the list has a padding by default. And also there is list style modifier, we can change the list style, but you get the idea.

[00:16:39]
So I'm talking about these padding is probably not necessary, because there will be a padding there, how to solve the problem in the preview. Well, you can just add the paddy here, just for the preview, like saying, hey, your context there will be a padding later, okay, just to look at it better there.

[00:16:58]
So let's see, what do you think, what would happen if I click there? Will it work? Yeah, let's see, it worked, also it updated the number there. Okay, so it's actually working, it's actually working. And if I delete the last one my order is empty, so the whole page is being re-rendered.

[00:17:27]
And there was an If there in the orders page there is an If and when the count is zero automatically it's rendering a text. The only missing pieces that we don't have the total, but it's actually pretty simple, I mean the final the total of the whole order.

[00:17:51]
We can quickly create the CartManager function by the way, let me first commit this in case you want to get my code. So let's say the orders page kinda working. And push to remote us well, again later you have some homework you can move the site some more styling to that, but It actually works.

[00:18:18]
So I need a function here that will calculate the total, okay. By the way, it's already here, if you wanna take it from here, great in Data Manager. It's not a big deal, [LAUGH] because you know how to program I guess. This is just looping through all the items and I think it's called cart, so it's going through all the items and making the total.

[00:18:46]
So now we can just call this from the order page in fact, I did have that one but I commented that CartManager, the total with some spacers so it can look at this I have a spacer, a text, spacer, text, spacer. There are other ways to do this, but this is one way to do a flexible UI, in this case is like when you're using Flexbox, okay.

[00:19:16]
And in this case you have an empty item that is actually pushing, so they're fighting for the space all of them. So, let's see cross your fingers, I don't think you need to cross your fingers, I trust them. This site will allow this. One more and we have the total and it seems to be working, if I delete the Americano it's been updated everything works.