Adding Items to the Shopping Cart

[00:00 - 01:32] Before we get started with the functionality of this lesson, which is to add items to the shopping cuts, I would like also to take advantage and utilize with the defer able views when a user comes to the page for the first time, we'll get to utilize data prefetching by showing a spinner on the page while the data is being fetched from the backend. To do that, we'll switch to the product components file and then right at the top, we can make use of the add the fab block to utilize these. So we wrap around the entire code base with the add the fab block and then call the add loading block sets a minimum time in which the spin ash to go. I'm going to say this to one second and then I'm going to open bracket and then we 're going to create a div. I would need this div as well as a class of loading and then we can say loading, then make use of some special characters and then save every time we've done so far. The spinner is configured in our product components CSS file and the code base will be made available for you to download in this lesson. Now that that is done, if I add back to the page, you can see we get to see the spinner while the data is being prefished. If I load the page more small, you can see the beautiful spinner right there. We're able to make use of the deferable view to prefetch data for the user. Now we can go ahead to integrate the add to cut functionality to add in straight to the product components. And I'm going to add to the product component.cs file.

[01:33 - 02:04] We need to create a method or a function as my colleague that will create a comment that says add items to add and then now call the method itself add to cut and then is going to take in a product of type products. And within that, let's also log whatever products we get when the user clicks on any of the products. We need to import the product interface to get rid of that error. Adding straight to the product component HTML file. We need to create a click event handler.

[02:05 - 02:47] For any time the user clicks on this plus icon to write within this span tag, I 'm going to create a click event. And then we're going to upload the function we created in a TS file and then passing the product to be conceived every time we've done so far. A straight to the browser and then open up the console. And we did the console. We cannot test this out by clicking any of the product. So I want to click the first product here. And as you can see, we have all the details of that product displaying on the browser. As you can see, the title is so far for coffee coffee. And then the price is set as 50 USD. If I click on other products, probably the last products we have right there, you can see we have the same data, which is wooden table.

[02:48 - 05:14] And the price is also set as 50 USD. Now we need to create a method in our service file was to continue with this integration. So quickly, let's add to our product service file. And within the product service file, we need to create a signal that helps us to undo the initial value of our product. What do I mean by this? This particular variable is going to hold all the values of the cut items we select and now browser. So we can just say cut items. And then we're gonna call it, we 're gonna assign it to a signal and then set the initial value. If I will do that, let's import our signal in the angular or slash call to get rid of any form of error. Or we need to still create the initial variable because the signal was taking an initial variable. So this is where look out storage come into play. I'm just gonna update in these values. And as I can see, what we are trying to say is that if look out storage is equals to null, then it should return an mtr a else, it should get the value inside of lookout storage. So our initial value of our signal is either going to be an mtr or if they if it's on mtr a then we're going to get any items selected from the cuts. Next up, we need to create the methods to add item in our service file. So right below the get product console, I can just say add items to cuts. And then I'm gonna assign it to the product of type products. And then we can see is dot cards items. That is the items that are cut those updates, which is one of the methods available in signals. When you start to find a class with an like it's dots, you can see we have sets, which is also one of the methods available and updates previously in vice-class, it's thin of angular. We also add the meat meat method, what it was dropped. So we're gonna make use of the updates. And then it's gonna take in a cobab and we're going to assign it a variable called val. And then I'm gonna create a fast arrow and a square bracket to the level is to make use of the spread of pre-talk to return the latest value as the cuts of dates. Then finally, we can now pass in the product selected on the browser. This should be product to complete the implementation. We need to get back to our product components CS file and then call the product service dot add items to cut them passing the selected product.

[05:15 - 06:58] What do I mean by this? We need to type in these dot product service dot add items to cut and then passing the product. That is these products we are logging into the console. We are passing it down to a service method we have right here. So whatever value we have right here is going to be updated into a signal method, which is these dots cut items. To see this in action, we can just console log is dot cut items because the signal we need to add the parentheses at the end. I'm gonna save everything we've done so far. And then we can start adding items to cuts to see the reflection on the console. So quickly, I'm going to select this passagla product. And as you can see in our product service, it displays three items. That's because previously we already selected two items. So if I select one more item, probably this item is going to be updated for if I click this passagla product, which I've not clicked before, is going to be updated to five. How we this a signal now has access to the selected product. The final thing I also do is to set each selected product to the lookout story, like I say, local story dot set items, which is called products. Then we need to make use of this in those changeify and then passing these dot cuts items. When I save and the page reloads, what I'm going to do is to check our lookout storage by adding to application. And then inside of lookout storage, we currently have no items. In fact, I'm going to play the lookout story. Then I'm going to select the first item, as you can see, we now have an item in the lookout story. Then if I select another item, it gets obliterated into the lookout story. Now with this implementation, where would we set items into the lookout story.

[06:59 - 07:09] In the next lesson, we're going to integrate the counter functionality, which helps us to increase the number of quantity of items in our cuts, as well as how to remove items from cuts.