Send Boarder Ordered with airSlate SignNow

Send boarder ordered

hello friends welcome back to this tutorial series in our previous video we finished the card component and we were able to display the items in the cart on our cart page here like this we can increase the quantity we increase quantity and decrease the quantity and also we can remove the product from the cart like this ok everything works in real time and the quantity here the cart count everything works in real time and we also see this toast notification ok but here we are missing couple of buttons want to go back to the shopping page and I want to go to the checkout page ok so let's quickly add those buttons and then in this part we will be working on the checkout form and a checkout functionality ok so I'll go back to my cart component on HTML and where we have this table so after this dev ok this is the call m2m d12 live i'll add another call md 12 development and i'll give a property of d flex for flex box and a bottom margin of 5 ok inside this I'll create a div ok and within the save alka and two anchor tags ok first one will not use hf will use router link this will be to check out route and this will have a button off ptn BTN danger with the end this illegal gives us a red button between small and order one to put it on the right hand side knee - check out the anchor tag will again have router link this will be to my home page the class will be bitten bTW and success within small order zero which to continue shopping yeah save this and see the changes okay so the these are stacked together I want this to go to the left and this to go to the right okay for this I need to make the container at the whole live element of flex flex box and container I'll put the Flex here and justify content between flex SM call up so for smaller devices I bound this to stack vertically so I am using the direction as column and these are helper classes given to your given to you by bootstrap and these are really helpful and for medium row medium screen and above it will be in row format like in line form and yeah also give a width of 100% so the this till this day will occupy the whole width okay so a whole that I mean if I say boarder primary you will see this div manatees wardrobes border or the primary yeah so see it is occupying the whole Duvall area of this call MD 12 okay and now as you can see that check out is placed on the right hand side of this def and the continuing this place on the left hand side this is because I'm using justify contribute field I use justify content around see the difference so it occupies equal space yeah from the corners I don't want that I want us to buy content but wean okay I'm gonna remove the border that will lead the borders save it there you have to click this button you go back to the home page you can go back to the cart and click this you go to the checkout page okay so it is empty right now so let's quickly go back to our checkout dot HTML let me close all these things I don't need these files as of now so in the downloaded folder you will have a checkout dot HTML file I opened it already with my notepad plus plus editor so if is open the file and scroll down but it says bread crumb bread crumb ends see a new section starts so this is your actual section of the form checkout form so you select everything from here till the section area copy this go back to the page and bring a strip there save it now if you reload the page you get this nice form here although we will not be controlling this form this checkout form ok we will simply be working with the product details the total and the order button here ok so you can definitely look into the angular forms section in the official Docs and see how can hook up this form to send data to your back-end so using the either the reactive forms module or the forms module which is the template driven approach ok so for this tutorial I'm not gonna use that so first of all I will go to the TS file here and I'll inject few services so first one is my card service as you all know then second one is my order service so I will be creating new orders here third one is my router of course next will be my spinner I will this Alice players penis service here sorry not in a service I'll display a spinner while I am placing the order okay so and if you remember we installed the NZXT spinner package and we also important that module in our app module fine so we have this ngx - service available to us we inject it like any other service ok I think that should be all and I need couple of variables here like god total be a number card data so we got model so okay so in my constructor I will do nothing so we have the ng on init method here in Incheon and it I'll subscribe to my card service start our data observable like we did earlier subscribe so give us data they start theta equal to cot theta sorry similarly you subscribe to totally ok so give you a total and this dot total will be equal to total now we go back to a template and you see we have total somewhere here so shipping order total right shipping order total class order total and I'm gonna remove this thing with total and pipe it with currency symbol and the code is US dollars to save the changes go back to the browser and I'll see if it has become 99 which is same as here if you if you in clip say I open page here okay then I go to my card I increase this refresh it so it address automatically okay perfect for this done I need to update the products here so the product section is this a belief order oops all the products so order products within that we I'm sorry we have the product details here okay so I'm gonna repeat this def if you remember we need to repeat the parent element I'm gonna place energy for here to look through all of my items cot theta dot theta it has a data element in it which is an array and you can all only you use an array to loop through using ng4 otherwise it will give you an error so here I'll display C dot now in cart multiplied by C dot product dot name or the name I have n number of products for the name ps4 on my playstation ok this is my Oracle soft Odle okay for that I can simply use a calculation product dot price multiplied by Z dot domain cut and we put this in parentheses and after this I'm gonna use a currency pipe u.s. dollars save it go back to the browser now you have three shoes this one Pegasus running shoe this and I can just verify this from here if you remove it from here okay so it goes away as you can see in real time okay now one more thing we need to do we need to make sure that whenever our card is empty we should display the same logic like our cut so say this car is empty okay copy this go back here after the section put it here okay so data totally I'm using the total condition here you can use the same condition like before that's up to you so once it is done go back to the car fresh they still have three shoes and if I remove the shoe from the cart like this see it's zero and I think I need to mmm display this whole thing the whole container here a whole section container here only when I have total okay greater than zero and if I can simply type it here total production zero save the changes go back to the browser there you go now if you go to the shop at certain items in it go to the car there we increase few items the checkout page still see the total and that the item details here and if you go to the cart remove the items one by one the card is empty go to shop when a checkout is working fine okay so now on the top here I'll simply paste the code for ngx spinner that I have in my notepad okay you will have you will get this code in my index or negative repo sorry or you can refer to the official Docs here and PM chairs go to ngx you know okay like that this is the NPM package this has a example here Jenkins a big coffee PhD from you once this is done I want to use a short display this spinner whenever the user clicks on this button there is a button here where is it where is payment methods see the payment methods here okay let me add something oops add something here and go to checkout okay I said payment methods I don't need these as of now remove it say so place order there's a anchor tag here yeah and for the anchor tag I'm gonna replace this with a button okay button ashraf will not be valid here class will be lets say BTN beauty and outlying danger city n1 and give it a margin of two place order is fine okay i will bind it to the click event and let's say on checkout you want to do something oops let's create the method in the component RTS file and in this method the only thing i want to do is disc of spinner this have a spinner function so we'll that we inject it use the show method okay so this is done so promise so i can you chain the 10 block here and give it any name use arrow function and once this one is showing i want to call the cart service and check out method from cart and this requires and user ID okay as you can see here okay so this is looking for user ID in our database i have couple of users okay how can you either choose one or two so let me choose two for this demo so i'm hard coding this for this purpose of this tutorial but you can definitely get it from the currently logged in user if you are using an authentication functionality okay so once this is done let me save the changes okay go back to my front end this place order let me put it make it block sexy that works alright in small little block there you go yeah so if I click this see this booking order booking order booking order booking order after some time this should take me to the page oops so it's there's a there's an error in my API as you can see I missed a slash there okay so let me quickly go to my if back and here we're a small packet and in my routes or the fruits open with notepad plus plus so not the product I'm sorry there should be the order outs so okay I think it's it's in the card service I'm so sorry I'm sorry other order service I am missing a slash here okay save the changes sorry for the confusion so go back here place an order there you go it says thank you works okay and the last time we got order 1:08 with an error 404 and now we have order one zero nine okay let's see what in the order orders sort with I t10 nine we have the order was placed by user ID to and if we could utter details sort the order ID column from top to bottom so I'll see I have one product added with one quantity product was Pegasus shoes if I go back to the front end I left I had an Xbox and a ps4 oops didn't click Xbox ps4 what happened fresh something broke yes No ok so my back end was stuck somehow to check out directly place the order wait for a minute there we go go back here go to order details I know it will be order 180 alright number 110 okay I have two products PlayStation 4 that is the Xbox ok perfect so the next video maybe not let's just complete the thank you component in this part all itself it's not a big one so let's could you do that in the next video we will be working on the single product page okay and that will be the last part of this tutorial series ok so in order to save some time I'm gonna copy/paste some code from my notepad this is the mock-up ok and we will get this information in my github repo the Thank You component dot TS file I'm gonna add a couple of variables a little string a message order ID will be your number any products and total number in the constructor I'm going to use router that's right and my order service okay and as you know in our cut service if you remember we are sending some navigation extras here okay so thank-you page so in the component we need to fetch those and I'm gonna fetch it in the constructor itself slave the navigation using the router convert it using the method get current navigation okay and this will give me the state object I'll use it as message string products will be product respond so I need to create an interface quickly in order to response model this will have ID type number interface should have an semicolon here tighten the string description string price will be number and I also have quantity quantity ordered number and image a straight the product will be my product response model array order idea visa type number and total is of type number okay now test out message of message equals 2 state or I can simply use this stuff now so let's do this like this state the my such test products state dot products this order IT just totally straight and so this order article so stated alrighty this dot total or cart order because to state total ok now save this change see if this changes and everything should be done now total oops Scott totally okay perfect so everything is properly done now now if you go back to the page front-end let's say add a couple of shoes here go to the cart you your cart increase the quantity checkout verify you have for Pegasus shoes and 180 - okay Sora there we go okay so something is missing it happens sometime because of some delay with your back-end and front-end this will be fixed probably if you close the browser and reopen it but if you go to the database refresh it you should have your shoes placed in the play the order play successfully as you can see we have two orders here one is to I wanted it three exciting this is all right 111 okay this matches here so go back here let's try it again and quickly close the browser reopen it be me with Firefox okay localhost 4200 and one shoe to shoe shoes and a ps4 check out this order let's see if that works okay something is not right here it's not able to fetch the title price is displayed properly let's see what's wrong quantity ordered it's not shown here P of products yeah any-any arrivals to navigation extra let's double-check your sending here okay you're sending the correct thing okay now vacation extra thank you component console dot log that extra state let's quickly come and everything for testing purposes save the changes browser open the console here right here check out this order you have message object ID name description user name price you have description I renamed price models what are you looking for this ID should be name bigger name and oops undefined ID name price and description description ID name prescription ID name price message order ID products okay state our products star products so this is our products I renamed price that's it I do name price and description ID in price description they don't have these things okay this is not a turd so call I thank your component let's be off products this will be of time image images not there the reason being in my back end they go to the back end order so ID name description yeah also need to send P dot image and what else what else we need here we need P dot quantity ordered so I guess we have made a field called quantity ordered in our products table so our order staying right has to be there somewhere e quantity such should be coming from my ot order details only dot quantity as quantity ordered save this every stop my server effect and I can go back here this image stripe string and one pretty order if number okay now save the changes and if you still have the console output here so let's put it here console' got log you store products okay save the changes come back here in the browser add some products let me clean do this save some time checkout place the order now you have it here okay so it was in the backend code so this is how you debug and troubleshoot your code and add the things which you require okay so now we are getting the quantity ordered we getting the images you can also check again go at the homepage and ps4 okay a - ooh maybe go to a car your car increase the quantity check out and see you if you see six PS force okay so it's not show anything this time it happens sometimes when it is a delay between your back and in front and that happens but mostly it works there you go okay and you see this information here so with this I'm gonna finish this part 14 of this tutorial series in the next part we should be working on the single product page that's this page and we'll display the product details here okay and that should conclude the tutorial series if you have any comments or suggestions or questions please feel free to post that in the comment section below and do not forget to subscribe like and share my channel with your friends and colleagues and I hope you are liking this tutorial so I'll see you in the next video till then keep learning and enjoying the world of programming have have a good day and take care bye bye