Integrate Counter Functionality and Remove Items from Cart

[00:00 - 00:32] So before we integrate the counter functionality as well as removing items from cuts, I would like us to update a cut icon that is the current number of cut icon is not reflecting anytime we select an item. I want this to be dynamic. So that anytime we select an item, it gets updated in a cut icon. So to do that, we are straight to the product service file. So quickly in the product service file, we need to make use of computed to achieve this particular functionality.

[00:33 - 01:05] So right below the cuts items variable, I can just create a variable code, total item, you can say this as public by saying public and then brutal items is opposed to computed. And then as we know , he's going to take in callback and if that's arrow and then we can see these dot cuts items dot length as well, no signals is a function. Do not forget to add your bracket at the end of the cuts items. I'm going to save copy the total items variable heads to the nav bar component.

[01:06 - 03:53] And we need to import the product service. Yes. So in the construct, I can just say probably product service product service in the HTML templates where we have the number zero, we need to make use of string interpolation to display the dynamically selected values to do that. All we need to do is just say product service dot total items. I'm going to save every time I've done so far, head to the browser and wait for the page to refresh. Before we select any item , I want to ensure that our local storage is currently empty. So in the browser, I open application, it's local storage, clear local storage, refresh the page once more and then let's test out. Now we have to select this item right here as you can see, we currently have one item because we elected one item. If I select another item is going to be updated here and if I select another item, it gets updated to three where select two more items. You should get updated to five and in our local storage, you also have five items. This is possible through the activity of signal call with the sample line of food. Now we can illustrate the cuts components to display all selected items dynamically on this page because currently, all we have right here is just static data. To do that, we need to illustrate to visual studio code. Instead of visual studio code, wait straight to our cut component. As you can see, every data here is static but would make it dynamic in a moment. So to do that, wait straight to the cut component dot CS file and inject the product service component inside our construct of back and just say public product service as I've done so many times in this course. I'm going to call the product service. Now that we have access product service, we need to look through using the our code block to display our dynamic data. This is going to be done within the TR tag. We have right here too. Let me see where this starts and where this ends. I'm just going to create some space show and then right on top of the TR tag, we have all the whole block and then say products or product service dot hot items. And then we can make use of that to track any changes in the area and pass product dot underscore ID to remember, this is where to be in a bracket. So we open a bracket screw to the closing tag over TR tag and then for the at empty block within the at empty block, we have the deep passes, no items in part. Probably we can make this single of I say no item in part 10. We need to pass in the dynamic value. First one is the product storm nail. So I'm going to get rid of this static image right here and then make use of string interpolation by saying product dot thumbnail 10 for the title.

[03:54 - 04:05] We can say product dot type two for the price can say product dot price. Finally for the values instead of this default value, we have here, you can see product dot one city.

[04:06 - 05:46] We show we are doing the writing and going to see everything we've done so far and as straight to the browser. As you can see, we get all selected products on the cut components. One more thing we need to do is to integrate this total right here where we have these 10,000 USD, we can just make use of thing interpolation to get the total. All we need to do is just to say product dot price, more applied by products dot quantity. I mean, this is pretty much straightforward. And with that we should get the total price. If I see one extra browser, you can see the current total price is one. The total the current quantity is one. So every item we select, because it's a single item, we multiply it, you get the same price. Another thing I want to do is to disable the proceeds to check out both in. If there are no items in cut to do that, we scroll to the proceeds to check out both in, create a disabled attribute and then pass a condition that says product service dot cut items dot length is equals to zero. So the disabled attributes kicks into play once the cut items are left is equals to zero. And the next thing we want to do is to integrate the counter for quantity, because right now it doesn't work. It's still static. So we need to create a method to achieve for both increasing the quantity are reducing the quantity to make the counter operation dynamic. We need to create two methods. The first method is must report decrement is going to take in a parameter code product of type product of this. So I just want to say product of type products, which we need to import. And then I'm going to duplicate this same thing for the increments.

[05:47 - 10:47] So this will be prevent and it's taking the same parameter as well. Then in our HTML page, we need to add straight to where we have the close and minus icon. So for the minus icon, we need to create a click event and for the decrement, we'll say decrement, and then it's going to take in the products parameter same thing for the plus icon, both in the three events the payment. And it's also going to take in a product parameter, which is coming from a at four loop with that's why I would success the particular item we are clicking to be sure this is working. Let's console log each of the products and then save everything we 've done so far. Open up the console and then let's click the plus icon. So if I click the plus icon, you can see it shows the possible products were clicking. And if I click the negative icon as well, it shows the specific item we are clicking for right now the quantity is still remaining the same, which is a number of one, or we can now make this dynamic by making is one of the signal methods, which is of the two Edinburgh's visual studio quotes. If product dot quantity is greater than one, if particular functionality once we have events is is dot product service, we 're going to call dot cart items, which is a signal, we're going to make use of the updates. We have only use of the set method yet in this course for so far, the updates method has been what has been needed to with the updates method. We know we are going to have a call back and I'm going to call it file and then I'm going to make use of the fat arrow and within the fat arrow block, we can make use of the map array method in JavaScript by seeing well dot math because it's returning an array and then it's going to take in another variable. We're going to call this zero and then we're going to say of type product because your response is going to be only from a product and then we're going to pass another fat arrow and within this fat arrow block, we're going to say zero, which is the variable we passed right here. We're going to say zero on the score zero dot underscore ID, which is the ID of a selected item. We're going to say if it's equals to the products dot underscore ID. So this will post confirm that was selecting the right product and it was selected right product. What we want to do is to return an object that manipulates only the quantity because when you look at the entire E, we have so many ESPO, what we are trying to manipulate is just this quantity we have right here . So we need to integrate it inside of this bracket and then the structure the response and then pass the quantity by saying zero dot quantity minus one because we are trying to document when this is it into minus one and then if the condition is not met, we want to return the array the way we met it though with that we should be able to integrate the decrement functionality. So I want to grab everything inside the decrement method and paste it inside the increments method because the functionality is similar. We just have a few differences point stars. We do not want to increase the item beyond the number of items in store. So to prevent of applying which I'm just here product dot top is if product dot top is greater than product dot quantity , then we can implement this particular specifications. Another thing most of one of the police is instead of negative because this is increments, we're going to change it to positive and with that, I think we're good to go and going to save everything we've done and edge rates to the browser. Let's see if our increments and decrement both in is now dynamic as can I see anytime I increase the quantity, the price changes as well because when you multiply 700 by 4, you get 2,800 USD same applies for the nest item and you can see we decrease as well. The item goes back to the previous price. We cannot decrease beyond one because you can't select zero items. Instead, you rather want to remove the item which is what we 're going to integrate nest. So to remove the items from cards, we need to get the ID. The ID of each item is going to be the fact that allows us to remove the right item from the card and to do that, we need to create a new method. Put down below create the method code remove from cards and then with passing ID, I'll set it to a type of number. The next thing we want to do is to consider loading ID to be sure we're getting the right ID. But before we can do that, we need to make use of the click events and la inside of HTML file. So I'm going to screw to the icon with the X later and inside of the ethad. I'm going to create the click events, follow the remove item from cards and then passing products.ondascoid. We're going to see the return we've done so far. S3 to the browser and then let's click on the remove icon and see we're able to log the IDs of each item into the console. As you can see , we log each ID into the console. With this, we'll be able to integrate our remove functionality for to proceed.

[10:48 - 12:59] We need to add streets to our product service file. We're going to screw to the bottle and below the add items to card and we're going to create a new one chart that was recorded as function remove items from the card and then it's going to be taking the ID which we are getting from our TS file. It's also going to have the type of number and then let's see is dot card items which is our signal. Remember, I have items in the signal we defined above and it has been what we've been using to set the states in all levels of our application. Each time it gets manipulated in any part of our components, it gets updated throughout the application without any additional libraries. So you can just say this dot card items dot update because this is the method we need supposed to be able to filter out any item we select post to remove and then as usual, our specific method is where to have the ball parameter and then we're going to pass it back arrow and this time around, we're going to make it so the filter method in JavaScript. I'm just going to say file dot filter and then we're going to pass in another parameter which is an item we can give it a type of any this time around and then another fat arrow. You can see if item dot underscore ID is not equals to the ID there we can see but before we proceed, we still need to pull this particular remove items from cut in our cut component CS file. Of course, we need to pass in the ID we selected. So what I'm going to do is I'm going to say this dot product service dot remove item cut and then I'm going to pass in the ID. So the ID is going to be passed down to our service which is what we are trying to filter out from our area as well which writes here. So I believe with this, any item we select to be removed from the cuts is going to get removed. There's this house. Let's quickly add to the browser and then select the first item. You can see the first item as we remove from cuts second item third item fourth item and the last item one thing you can notice is immediately the last item gets removed our proceeds to check out botting gets disabled because we set this condition that's why the cut items is cost zero.

[13:00 - 14:43] We want the proceeds to check out botting so we disable it. One thing is if I refresh the page, all items gets displayed back on the page to prevent this from happening. We need to make use of local storage to pass this data at which level of change we are implementing to in the remove items from cuts method to canvas here local storage dot sets item and we cut passing products and there's a just in just a give by these dot cuts items which is the latest of this of change that of course at every level of application. We can apply this into our increment and decrements method as well by adding to the cut component dot cspile and outside of the if statement or within the if statement we can just passing the cut items but we are getting this error because we need to make use of the product service injection. But to do that, what I'm going to say is this dot product service dot cuts items same thing is going to get applied to our decrements method as well. So within the if block and just p saying the set item as well, I want to see where we've done and we're going to test if the data is going to get past this date. So the first thing is I'm going to test the remove somewhere to remove just three items and let's refresh the page as can see we have two items left despite pressing the page. What's even want to increase the quantity and also refresh the page. Let's see if the data still gets past this date. I'm going to increase the quantity to five and increase this to seven probably and then refresh the page. Let's see as can see the quantity still gets past this date. With that we've been able to create the cutout functionality to increase quantity as well as to remove an item from part.

[14:44 - 14:49] In the next lesson we're going to create the final part of the shopping cart by integrating the checkout page.