Part 9 - Catalog Submission page & linking with catalog page
[Music] hey guys in the last video we saw that that how to create a catalog page and how we can connect that catalog page with our navigation menu now in this page uh what we are gonna do is we are gonna add a confirmation message or confirmation page after we have put up place any order okay so let's do that so for that what we're gonna do is we're gonna create a new page i'm gonna call it as a catalog success and let's put it name as underscore success no no no that's this is fine i mean let it be however it is uh yeah i don't need to add any kind of parameters in that so uh i would say let's add a parameter as well uh because uh yeah maybe in the following series we show it to you know we will show if the request is created right how it will show up in the confirmation so i would say just add couple of parameters okay like society number and table and stuff like that so can you click on edit optional parameters optional one okay yeah yeah so society yeah [Music] that happens that's autocorrect number safe okay so we have added the parameters now what i'm gonna do is i'm gonna add a component container and inside that what i am going to do is confirmation message so circle outline we can have in the header message let's see request submitted header level one is okay do you want to give any caption uh yeah let's give a caption and here you know we would like to add a snippet uh code snippet if you if you click on that code symbol there [Music] yeah yeah and you can what uh yeah so basically what we here we will do is uh once the catalog is submitted right from that catalog grout we will pass a piece parameter of whatever request is created and we are going to use it here so here uh you have this api which is destructured variable you can use or it's a so you can say just uh punch it with so basically with this api you can access your state objects you can use your context props and stuff like that so here uh right now we have not created yeah let's just have it so right now it will uh it will give us an undefined okay but uh we gonna have it in our state correct yes yes so we are gonna hook it up again uh apart from that what what else we can have in more information you can say like something like you know expect to hear from us soon and it it comes handy with two buttons if you want to use so here we just use it just just like that so for the primary button let's say we navigate them back to home and then other one is just to view requests and stuff i mean if we may create a detailed page for the requesting features yeah this looks better yeah okay so let's save it let's view it okay great so now our page is ready okay and let's let's bind this page okay yeah so to bind this page what we need to do is we need to have uh we need to have a client script here and in the client script i'm gonna add it so so basically what we are gonna do is uh from a catalog page once it is submitted we will come here so i guess you might want to go back to the catalog page and from there uh we'll handle the submission so okay absolutely i'm just creating the client script but again yes we can go into the catalog page yeah let's start it for now yeah oh wait wait wait hold on did you say okay you already saved it perfect yeah i i saved that one okay not gonna repeat that mistake already script include directly from here but right now we gonna have it so there is a very good concept which we want to cover it later but you brought a very good point so it is a client version of the script includes we used to we already you know we we've been using right for server-side scripting but here now they added a same concept for to your client-side scripting as well which we want to cover it later for sure yeah but yeah for now you just leave it blank yeah let's let's leave it blank and let's uh so this is done okay and yeah you might want to add the piece of code to navigate right okay so uh you can say like you know uh again to put payload uh yeah yeah i'm just use the cmd structuring method okay okay i'm distressed uh okay so why it has so i'm gonna add this script here you can use that formatter can you format it on the top yeah perfect okay so save it so now it's saved so we don't have any kind of separate save button so it's uh done via page save button only now what we need to do is we we need to put this event handler so this is one event okay once uh we click on order now one so for that what i need to do is i just need to click on this one go to events click on new event handler so so this component comes with this event sorry request generated client or the event handler and which we want to hook it up with the client script what we create yeah so as soon as you see uh see that i clicked on add a new event handler it showed me a lot of events and uh we have created our own script and it is showing this one so i just need to select this one add and see so now we have stitched everything so what i'm gonna do is i'm gonna refresh it click on external monitor let's order it now and it has submitted now this one so i can click on view request as well as return to home so that's it for this video and this one we quickly saw that that how we can stitch and create a new uh catalog client script and uh how do we have stretched the headlock successfully thank you
http://www.youtube.com/watch?v=tZCcOiN_ysY