using MVVM CheckOut Page Part 1 for Ecommerce App in Xamarin/MAUI #xamarin #maui #ecommerce #viral

foreign [Music] authentication page then uh this is dashboard okay then product list page okay then you can select or deselect item so after a button click the list of product will open and after on clicking the this a product view will open okay so after add to cut the up item will add in the cart page so let's see the view of the UI design of the cart list uh I want to let you know that I have created a WhatsApp group in the uh for the xamarin developer so there are many developer uh or learned are there so uh this group will help you to learn a jump ring or you have any query then you can ask or share uh anything about a xamarin or mouth so please join this WhatsApp Group which will help you and me to uh learn more xamarin okay okay so uh I created this type of card top design and uh this is the three pages this is cart this is address and this is Spam so as as uh uh this is stepwise as one step completed this color will change okay so user will know that this Carter part is completed then it reached to address after address part is completed this color will change and it will reach to payment so it will uh it will be easy for the user to understand that at which page it is okay so uh after and and after seeing the card if you agree then click on the continue he will move to the address page okay then you have to select the address so today uh we will see how this UI design will be done actually it is in the screen this is not uh visible correctly but in the Mobile screen it is clearly uh Clear View so don't worry about that this is might be a screen sharing issue all this data are visible we are in the mobile so I I think that there is a something uh a transfer issue or from a caste issue from Mobile to laptop okay so uh let's begin for the uh card so uh for this this is uh uh this is the card page okay so this is label I simply keep the label and uh uh and I want to let you know that these all two pages are three mvbm so we are also going to learn how to uh how to use mvvm and how to implement mbvm and uh into and it will also uh you will also get learn how to use NVM okay so before starting the video please subscribe my channel if you are not subscribed so uh first I have user refresh View okay if uh if the if pages is not loaded correctly then if this machine refresh you will be used and in the refresh View we will see this binding uh uh after uh understanding the UI so in this is refresh you so I'm in the refresh View I have added grid great having one two three four five six six row this is one two three four five this is pi and this is sixth row okay star for the list view the left hour page will be taken by the list View and then this is a template check out step template okay this is the template I have created so so I I am using in three pages so uh so duplication not occur so I have created template okay so the template will be always in content View so this is checkout template I'm doing this because I am taking two to three days to update the block and you are not able to copy the code so you can copy from the video uh just uh stop the pause the video and copy the code okay so uh in the content view the first is grid okay and the main control is bit and it is having this is auto size then this is star this is auto then is uh then it is star then Auto because I want this this two space will be similar so I taken star so it will take a uh it will uh set up the space of common same space okay then stack layout in stack layout I have added card Circle this is circle okay and the card Circle uh I have added a solid uh Circle here in the previous video you can see the how font awesome I have added so uh you can go through the previous video and uh and and Implement that okay then uh font family uh actually what happened that uh this phone family name is written in the mouthprogram dot CS okay so uh sometimes uh uh we uh we think that we should rename this name so uh uh we we have to rename in all the page so uh to skip that part I have added this uh this property in the uh so at in the app.xaml text in that file in the string variable and keep as the class font awesome family okay so I don't have to remember this name I just have to use a dynamic source and the this uh intelligence uh the uh this name will come in the intelligence so there will be uh not a naming problem or spelling mistake okay so this is best practice to use this okay if this text is using over all the applications and use app.xamat start a resource dictionary okay so for line I have used the line and this is x150 okay I don't want to start from here I want to start from here so X1 15 y 0 to the H to 120 so this is H2 120 and the 0 okay uh I hope you understand I will explain it this is uh X and Y point of the start start and this is X by point for the end okay so as per you give the value the line will be drawn and this is stroke color for the line and the dash array so uh what will happen here if I give a 5 so you can see the uh Dash array of this size okay first it was three please you can see this small small but I have added here five so it become a big okay so this is the uh width of the one dash okay and this is the um uh another five minutes length and uh after that same uh uh same process you have to continue again at this one and line this one or you can also create template for this but uh I I prefer to copy and paste you have the option that you can create a one control of this and you don't have to write this long uh code every time you just have to use the template okay it's on you okay this template is completed now see back part backend part uh okay now I have created enum for knowing that which Pages uh which page is open okay which uh for which page for I have created in a cart address done payment then a bind is enum to this page okay so to bind this in um to bind this in a write this code okay uh bindable property then uh do some name of the property then a bindable property dot create enumn name and type of uh uh step in a name means name of enumn name and type of innom and that template template means the page of where you are creating where you have to bind the enum and by default value okay after that we have to set and get value for uh if any value changes and the property change if any value change the changes should occur so what is the changes if I move continue open the continue click on the continue page will open so I want that this this should be a this this should change the color so if the page is addressed then then change the color and the change the uh this uh icon okay if if this is moved to address space then this circle will be con uh will come to the uh check Circle for example like this okay and color will also change and else if it is not address Place page then it will move to the payment okay so these two will changes to the purple page and these two will be changes to the check Circle I need to go back then again uh it will revert all the all the changes this is the logic here okay so uh just pause the video and you can uh copy the code now uh you can see a magic on this the page on this card page now I have created in a you can see here okay you understand why the enorm is created by a binder in a property to that template to to get the list of enum at the checkout step property uh now we have added the template you are now moving to this part okay so for this I have uh added a grid okay in the grid I have added background color this one and the margin as minus 20 because I have already kept a padding as 20 so always start from here so this is also starting from here so to move to the right side and left side I have used minus 20 margin so I remove the padding and add some space top and down up and down okay then Paddington padding is for under the padding is for under this grid okay for this value so it will it will show padding here and here so this is label this is frame in the frame I have added uh in the frame I have added the label and the after that I have added the add more label okay and this is the list for at least you again I remove the padding okay and and Set uh separator visible default uh your line is not visible but here this small line and uh separator is visible in the mobile but here is not visible I don't know why but uh it is there so I said separator visible is equal to default and the card list item the cartilage template I have used uh to show this this uh this view okay so let's see the cart list template so this is the card list template in again I have added a grid view okay then uh then here is frame for Corners 20 to show the corner round and the image okay this is label and this is stack layout to show this value so this row okay so in the stack layout this is horizontal stack layout and the spacing 10 to show these spaces okay so I have used this space thing is formatted by adding a dollar for price and discount price and this is color okay and this is uh square pool to show the what color the you have selected in the uh for the product and this is the font awesome family so again I have uses a font as a family from the resource dictionary okay I use margin 2 because it getting up from it is starting from up here so I had margin two so it moved down okay and the this is the uh last one is to remove the stress okay in this video I have not added uh a logic for removing but in the next video we will see if how to remove this item by using the mavm okay uh you understand this uh I hope you understand this part list view part now move to next after that I have used grid to show this the value okay this is this is very simple use the label for all these this is uh first second third row and this is uh First Column and the second column and this is a last row and which is bold okay so it is very simple you can do it and you can easily understand by the code so this is the code available here after that I have added button okay so now we will look for the ingredient uh I have used uh first of all you have to create a base view model so it will uh this page view model purpose is to uh to a bind binding a project look at that the best view model is for uh for a further giving a notification to the property that the value has changes and after the changing the value uh we can assign uh we can use this uh classes or this function to uh to update the value and use some logic okay so this is the purpose of the uh best view model okay so uh just copy this code I will uh share a link I have already explained deeply mbvm in one of the video so I will explain that uh I will share that link in the description section so you can copy the code blog is also there for the best view model you can copy that okay this class should be compulsory in the Nvidia without this class you can't do anything or you have to write rewrite all the thing in every class you are creating so car model for binding the cart okay so this is the total price total decision delivery charges for this and this is the list view model for all this so in item list this is a title image price discount price and the color okay uh now uh now so I have inherited the base view model so all the Logics come here uh card view model I have created I've created commands to load item command so it will load this list view the another is Click command when you click on the continue button it will move to the address another is a card model means this class and set a getter and set a new set property from the base view model so it will get all the logic of the best best view model to this that if any changes occur then you can buses first of all initialize the command here okay for initializing command you have to use a new command and if it is Task then use async or directly add a function name okay so this is a click command click command I have used the uh uh I created method executor click command and I have uh navigate paste to the address okay so you can see that all the Logics are written in view model that no logic is written in the page and this is the execute load item command means this okay so I use the product uh in the previous video you see that you you have remember that we have created a product model in which we have added a 10 9 to 10 products from that I have taken a three products first three products okay and use the for Loop uh you can add your own bus just to skip a long code I have used the code now BM BM is a card model okay so this is the card mode that we are in item list is there so in item list I am adding the item value okay and assigning this value okay now this is the cart model which card model which is created in cart view model okay this is a uh variable we have created of this class okay and assign that value to this property okay that's it and this is busy for the refresh view if it is loading then uh when it it starts executing that it is busy is equal to 2 the refresh will will load here and after completed finally finally means if error occur or not this should be execute so after this is busy um is equal to false means refresh you will stop okay and this is on appearing is equal to BC is equal to 2 when we when the page will appear then this DC other Express you will start loading okay I hope this you understand this view model now we will check the binding I will uh shortly explain you uh first of all you have to do first you have to create a variable binding context initialize this variable and also add to this binding context okay that's all you have to do and also uh you have to call this on appearing so to load the page okay now in refresh view you have to do only two things use this one so you you will get all the intellisense uh uh Class Property name here so you don't have to uh there is no chance of spelling mistake okay and so in the refresh view data type added and this namespace is also added and command always use command in nbvm there is no click event there is no another event command is here used in mvpn so command load item model so it will load the detail because all the load item model Logics are written in this command and the two-way binding okay because if a user uh push down then it will start uh loading so it will uh this command will occur okay if it is not two-way binding then it will happen only once a time if the user again uh call this refresh you face the face down the refresh view then this will not fast so use mode two way from the if any action is occurred from the destination or Source then command will fire so two way be today use use okay next next is the only binding the property so you can see I have bind card model that item list that we have all the list of products we have added here and buying the property here okay card model dot total price discount price so you have to simple bind it and for the click event again user command so I already tell there is no event you have to use command to implement any event okay so uh this card page I hope you understand now we will move to the address page okay so when I click on the continue uh this page this will turn in this change the color okay so now this is address place you can see this is pop-up little uh so uh we will see how it is done okay again refresh View then this is the back navigation to show this address you can see in previous video how this back navigation is implemented okay then after checkout uh step uh template now you have you have just uh saw how to implement that then this is a grid first of all uh you have to uh read with the background this one again margin minus 20 and this is level to select your address and this is the frame okay so I have used hash Shadow is equal to true so it is showing the hash type showing the right the button is popping up or this little Shadow you're showing in the framework I have used stack layout which is horizontal Center this is you know it is font Isom icon guys this is labeled okay and then this is label for add address another is a list View list View for the uh we have used uh address template here okay let's see the address template it is so this is address template so this is the label for the for the uh this what type of address is this then this is a title okay then again it is font awesome to show the edit then label this it is simple template okay then this is again labeled to show the this area and then this is and this is phones Square to show this phone number and uh and the this is phone number okay so I want space between two this value I am use margin 10 okay so you can write the code from here it is a very simple it is only labels are there and this is a background color this one and it is Hash show as Shadow is equal to True okay now we will check a model model so uh for this I have created a ID this page is half implemented so uh half implemented means UI is completed but I want to show that when user click the borders color should be changed so I use a border color is selected or not it is selected then what will be the bottom color so these two properties taken ah font awesome icon for this if the address is for each address what will be the font awesome and the area font number okay then again the same logic is here inherit the base view command for the Lord load item and the address list okay so in execute I have added the value here and assign that this to the address model value and this this property is assigned to the here item source so in this way you can see all the address node I hope you understand this video if you have any question then ask me in the comment section and please do subscribe my channel and share this video so thank you foreign

Channel: Code Crafter

Views: 548

Keywords: #MobileAppDesign, #UIUXDesign, #AppDesign, #UIInspiration, #MobileUI, #UIPatterns, #MobileDesign, #AppDevelopment, #UIUXInspiration, #DesignProcess, #AppUIInspiration, #MobileAppUI, #MobileAppDevelopment, #AppInterface, #DesignTrends, #AppUIIdeas., #XamarinDesigns, #MAUIDesigns, #XamarinUI, #MAUIUI, #XamarinDevelopment, #MAUIDevelopment, #XamarinUIInspiration, #MAUIUIInspiration, #XamarinTips, #MAUITips, #XamarinUICommunity, #MAUIUICommunity, #XamarinMAUICommunity, #XamarinUIDesign, #MAUIUIDesign, #XamarinMAUIDesign

Id: zy3ViMtZ-XM

Length: 35min 55sec (2155 seconds)

Published: Fri Jun 30 2023