At this point, we can add items to the cart. But, really the only place that it's visible is within the DevTools. In this lesson, let's make this little red bubble here accurately reflect how many items are in the cart. To accomplish that, we can use a new concept in Piña called Gitters.
Alright, to define a Gitter, we use the Gitters option in a Piña store. js. You see, a getter is synonymous with a computed prop in a component. Its purpose is to return a computed value based on the state of the store.
This is going to be perfect for getting the count of the items in the cart. Okay, let's now create a getter called count. Then, inside of the count getter, we can access the state via the this keyword. And that gives us access to items.
Lastly, we'll need to read the link of the items in order to know how many there are. Of course, like computed props, a getter will always have to return something. Otherwise, there's no way of knowing the value of the getter. View to populate the number in the little red bubble here on line 14 in the element with the class of CartCount.
Count. And, of course, that means we'll need to import Use Cart Store and use it. Nice. That should do it.
Now let's give it a try. I'll give the browser a refresh. And this time, when I add a couple of plain old pineapples and click Add to Cart, sure enough, the red bubble updates correctly. Awesome.
Let's also add some dried pineapples, just to make sure things are working as expected. Great. The cart count updates again, and things are just as we want them to be. Alright, let me give the page a refresh now to empty out the cart.
Now, when I open the cart, you can see a couple of items in there. Those are only there because they're hard-coded, and they're waiting for us to do something with them. Really, at this point, we should be seeing some kind of message telling us that the cart is empty. View, You can see on line 43 and 44 a message commented out that should show on the condition of an empty cart.
Now that we have the cart count in order to determine this, we can get this working. On the div above this comment that holds the hard-coded items in the cart, I'll add a vif. And we'll want to show the items when the count is greater than zero. And then on the message itself, we can use a v else.
Over on the right hand side, you can instantly see that our fix is working. The message is displaying because there's nothing in the card. But as soon as I add some items to the card, great, the message disappears. Now we've still got some items that are listed here that are inaccurate, but we'll get to that shortly.
Finally, we can make our VIF condition even clearer by using yet another getter. Let's change this VIF to an if cart store is not empty then inside of the store we can create the getter now how should we determine here if the cart is empty or not well we can actually reference our count getter here from within the is empty getter so that means we can use getters inside of other getters very cool all right before we end the lesson on getters Let me show you one more trick. Perhaps you're fond of using the arrow function to shorten up your function definitions. Well, if you wanted to do that on our count getter, this wouldn't work.
The reason this won't work is because of the way that the arrow function handles the reference to the this keyword. Okay, so Pinyin knows that a lot of us like to use arrow functions. So in order to make this work, it actually provides the state as the first argument here that way you can use that state in place of the this keyword and now we've got our getter all on one line pretty sweet right not only does that state argument give us direct access to the state but we can even use it to access other getters that means i can shorten up the is empty getter as well awesome lastly let's just make sure we didn't break anything I'll refresh the page for an empty cart, open up the cart, and yep, we still get the message. Now let's add a few items, open the cart again, and nice, the message is gone.
In the next lesson, I'll show you another trick with Gitters to help us get these items in the cart showing up correctly.