Part-13 e-Commerce Grocery App using .Net MAUI | Cart & Product Countchange handlers by Abhay Prince

hey guys I'm back with the next part of our e-commerce grocery app using.net Maui so this is the app we are building right now in previous video we worked on our cart page so I have added five items of this first item then one item of this we go to click on this we are here on the cart page and we can see total amount the product amount we can increase or decrease so we can see this amount increasing here and here as well the footer and we can play around we can modify this so I removed the previous the second item and I modified the quantity of this first item to two now if we go back so on this back page these quantities were not updated right I removed this item and I modified quantity of this item 2 2 but we cannot see those items so these items are not getting modified and when I come back to this page I cannot see that uh small Floating Action box for the third count right so these things we are going to fix in this video and there is one more issue if you check on our popular section 2 4 6 8 and now these items are repeating actually why it is behaving like this because on our home page we are initializing our view model in on appearing and when we say on appearing when we say viewmodel dot initialize racing if we go to its code we are simply fetching the offers and popular products and we are directly filling the data so this is not what we want we already have data for categories offers and popular products right so there is no point of fetching this data again so first we'll fix this how can we fix this we can simply have a flag here so private pool will say is initialized initialized with default value false and in this when we are initializing first we'll check if or let's say directly inside if already initialized then we'll simply return from here we will not do anything if that's not the case we will populate all the data and after that we will set this is initialized to true so that this data gets loaded only once okay fine now uh the main problem now I can see it the main problem when we are coming back from this page this data the data on the first page this should also get updated that means uh all the card related actions we should be able to uh let's say send a message throughout the app Whenever there is any modification is happening in the cart so for that the we are handling the cart in the cart view model the total amount cart items increasing and decreasing quantities adding item to cart the main single source of Truth we have this card view model so we need to somehow have a mechanism by using which we can simply notify the complete app that something has changed in this cart view model so for that the approach we are going to use is we will use events basically so let's start and but before starting on this one uh I would recommend you guys to check out all the previous parts of this video we learned a lot we implemented so many things in this so please do check the previous parts now I'm going to drop the links of all the previous Parts in the description box and let's continue and if you have not subscribed my Channel Please Subscribe my channel I am posting uh some cool stuff on this uh complete full stack apps using.net Maui and Blazer and Blazer daughter mobile Blazer hybrid all these things I am making videos so please subscribe my channel if you haven't already and press the Bell icon okay let's get started so in this card view model we will have couple of properties okay so let's start adding the properties first uh the events basic learned properties first we will have a event handler event handler of type int this is for card count update card count updated that will copy this two more times second we'll say cart item and here what we are going to tell we will say cart item updated so we'll notify that this card item has been updated then one more and here we'll say cart item removed cart item removed we could have used this cart item updated only for this one but let's use this specific one so that we can have all these events separated fine now we need to raise these events whenever something is happening related to these things the first when we are increasing the card quantity from here we are just modifying the item quantity so after recalculating total amount what will say we'll say cart item count card item updated dot invoke and we'll add this at Center and this item item is cart item that this item has been updated if there is any subscriber to this item uh he can update the UI accordingly okay then we are in add to cart when we are adding to card we'll say this case item dot quantity plus plus this is the similar case we are actually increasing the quantity so we can say cart item updated then comes this one here we are adding the cart item so here also we'll say this card item updated but after this we are also modifying the count we have another one card count updated so we'll invoke this as well invoke this and then total count which is discount okay now if you see we have this line twice cart item updated item this one so we can simply take this out we can remove it from here when we got it here so it will be invoked from both the cases then we are here remove from cart in this case cart item remove we are modifying the quantity here so here we'll simply trigger the discard item updated this thing but here when we are removing the this item from the cart so we will invoke cart item removed dot invoke and this and the end this is that items ID so we'll say product ID like this and we are also modifying count here so we will simply trigger this as well we'll reach this event as well card count updated then we have this clear card we are not using this right okay for now we are not using it but maybe in future when we'll use it then we'll add the events accordingly fine so we have raised all these events now it's time to register event handlers for these events so right now we have worked only on home page and for home page we have our view model which is home page view model we are injecting cart view model already now we need to register for these events what we'll say cart view model Dot we have cart item updated so we'll add an event here let's say cart view model card count updated then we will have one more for card item updated cart item updated and then one more for the third one cart view model Dot card item removed card item removed card item removed like this I am using these three events you there is one more approach maybe you can simply create your own event arcs and then you can pass the type of event maybe some enum or some constant or some integer anything and you then you can handle these three things using the single line only within single method you will simply add a fail switch case and accordingly you can modify the things which we want to modify here fine now what we need to do in these cases that we'll see in a minute but before that whenever we register some events it's always a better idea to uh dispose these or to remove these event handlers right so for that what we can do we can simply add I disposable and then we'll simply copy these three lines we'll add a dispose method so we'll say public void dispose and then we'll simply do the opposite of these three with minus equals so we are saying we are simply removing these event handlers save stop okay dispose what is the issue okay let it be for now okay now whenever these operations are happening here we need to tell the UI when we say UI home page UI we need to update the home page view model because we are handling the home page UI from this home page view model only so we need to modify these categories accordingly so first let's see the card count updated so when we are updating this card count let's modify this name E2 account okay and we are using this card count underscore card count which is observable property that means we have a capital card count this card count property which we are handling to displace the card count on the UI so whenever card count is getting updated from somewhere from outside then we can simply modify this property and because this is a single line we can simply use the Expression body method like this so we have updated in this case what will happen if we are on the cart page we will modify the cart count we will remove some item from the card directly Complete product then this is going to be triggered and it will modify this card count and then the UI will be modified accordingly fine now let's see card item removed and updated first let's see updated so when we are updating any cart item first we'll get that item from the uh are popular products right because we are handling the products on the home page UI using this popular products so we'll simply fetch this item from here so today's popular products faster default we will say free goes to P Dot this time we will use product ID or we can say p dot ID equals discard item e right so we have product ID in this as well like this now we'll check if this product is not null product is not null if product is not null then we will simply say product Dot card quantity because we have actually modified the cart quantity we might have increased it or decreased it so we are modifying this products card quantity here and we'll do something similar in this cart item removed but this time this int e this is actually product ID so we can say product ID directly like this and then discard quantity we will set it to 0 because we removed this item from the card right so if you see these two methods these share the same logic except this 0 and this e dot quantity right so what we can do we can extract this logic out in a method we'll say private void and let's say modify product to entity something like this and here first we'll get product ID and the second item we will get two entity quantity like this and then we can simply get this add it here we'll say instead of product e dot product ID will use product ID instead of e dot quantity we'll use quantity and now we can use this method from here where we'll say product ID which is e dot product ID and the quantity which is e dot quantity like this and we can cut this and we can modify this to expression body we'll do same thing here in this first method with a difference which is going to be instead of e dot quantity we will use 0 and instead of e dot product ID values product ID and this thing is done okay so I think everything makes sense now when we are updating or removing items from here then also we are uh executing the commands on cart view model that will going to raise these events and from these events we are modifying this UI so now everything should work as expected let's see run I have API running already let's see it it's loading and we can see the data let's try I added four items to four six and eight quantities right two four six eight let's go to the cart page we can see two four six eight let's remove the four one and make six to seven eight to nine and let's remove this first one as well right now we have two items in the card with first item with seven quantities and the second item with nine quantities right so card count should be two and the item quantity should be seven and nine let's go back we can see seven and nine we can see everything is fine but we cannot see that uh the card count but the UI for this updated that is fine now let's see why that uh floating box did not come if we modify something then also it is not coming right if we add something then it came okay let's see what is the issue let's see in the card control card control [Music] we have this card count do we have some is visible it's been a long time when I recorded the previous part of this video so I am a bit lost right now let's see pin here what we have okay looks like the issue is on size allocated because this gets executed multiple times okay let's put a breakpoint here and let's return the app I'll show you what I'm saying and we are setting this container.scale 0 so this is this container which we just saw this complete card count this box this is the container so this is getting uh shrunk basically so we have this oh my God rebuild and apply changes I did not change anything would happen okay and then we are setting it back from this own count changed and that too only when we are running this animation type in that means we are modifying the when we are adding a new item new product to the card then only we are setting this that's the issue I guess let's see and again oh this might be from the API let's rerun the API first API debug start without debugging and then let me run this and break point is here let's continue again continue patch in data we have the data and this is fine we are resetting it we are setting the data now if you go to the cart page you see onsite is allocated it again gets executed and now we set counter dot scale to 0 container.scale to 0 continue now the container a is not visible on the screen now if we go back this time this did not get or maybe this gets executed or not maybe this gets executed and we again set it to G 0 but this time we already have count so this time we should not set this to zero so we should somehow check if we already uh did this thing or no right so if you remember we added this so that we can show that animation so we need to check if we already did this and for that we can simply have a private flag here private rule let's say uh already allocated something like this located with default value as false and then what we'll do in here we'll check if we if its value is false then only we'll set this scale to zero and we'll set this already allocated to true like this now it should work it should come to this uh this if condition only once so let's rerun the app and this time every thing should work fine okay app is coming patching data we have the data added items and okay four items with same let's say three five seven and nine four items with five three seven nine let's make six make it four remove this one and remove last one as well so now we have two items in the card two products in the cart one with six quantity the second one is with four quantity so when we go back we should see only two items on that box and we should see that that box basically so now we can see this two item four and six so things are working fine let's do this we go here we come back we can see one item let's modify this to nine come back we can see this nine let's make it twelve from here go here we can see the 12 so everything is working fine cool so everything looks great now okay so I think we are making a good progress fine so I guess that's all for this video in next video we will work on this categories page right so we'll display the category subcategories then categories products we are going to display those products here okay so this will work in the next video please like this video share this video subscribe my channel and I'll be back soon with the next part till then bye bye

Channel: Abhay Prince

Views: 754

Keywords:

Id: JYSkd-s9B6s

Length: 24min 28sec (1468 seconds)

Published: Tue Aug 15 2023