Laravel 8 E-Commerce - Checkout With Cash On Delivery

hi everyone welcome back to the laravel at commerce tutorial in this video we are going to learn about checkout with cash on delivery so let's see how can we check out with castle delivery option you can see here this is the checkout page and inside this page you can see here the billing address form and a check box for shipped to different address so inside this page let's add here a form for the link address after this check box okay and also add here a method method for calcium delivery and also remove this discount code form and remove this most good product carousel okay so let's do the project and let's open the uh check out component view file so just go inside the resources directory you'll use livewire and from here just open account dash component.php file okay and inside this file uh first of all uh let's add here the home link so simply right here forward slash and also change here the text and right here out all right and now uh let's remove this uh coupon code form discount form so just copy this text and let's find it so just search here control plus f and you can see here this is the coupon code form so from here just select this text and just remove this okay and also uh inside the shipping method uh just add here the fixed amount i'm just going to add a 0 0 for the shipping all right and now remove this carousel so you can see here this is the carousel mosfet product so just collapse steep and remove this all right and set the payment method uh here let's add here the castle delivery option okay so inside this direct bank transfer just remove this and add here our text as on delivery okay and also remove this description and just delete this and add here a description order now okay all right and also change here the value cod and in here [Music] type radio all right and also change here i'll just right here the card card okay and you can see here debit or credit card payment credit card okay and inside the value just write your card for the card payment all right now uh inside this billing address form now from this input input text file uh inside this first name input text will just remove the i this id okay and also remove id from the last name email from the phone number address country zip code and city okay no need for id all right and also remove this checkbox for create an account so just remove this all right now save this file and let's check this so just refresh the page okay now you can see here the castle delivery option uh flat rate zero carousel removed okay and now let's add the form after this checkbox for a shipping address so inside the checkout component view file uh let's copy this form so first of all uh let's remove this form and add here that class is equal to billing address this is for billing address okay and just remove this closing form tag and paste here all right and now before this step let's add here a row in column in d12 all right and inside this game let's cut this div okay cut this uh address form and paste inside this tape okay all right now uh now let's copy this uh this div just select this tip from here to here and copy and paste after testing okay and change here the title tipping address all right and from here just remove this checkbox all right now save this file and let's check this is refresh the page all right and you can see here this is the billing address form and after this checkbox you can see here the stepping address form all right okay now uh let's make this checkbox working okay if this checkbox is selected uh then uh so this uh shipping address form otherwise hide this form okay so for doing uh doing this just go to the checkout component class file and for that just go inside the app directory and http livewire and from here just open company check out component.php okay and inside this file uh let's create a property right here public dollar property name let's say property images ship windows 4 to underscore different all right now let's copy this property name and bind with checkbox so go to the component review file check out component view file and inside this check box this is the check box okay after here just write your wire column model is equal to just paste here the property name which is keep underscore to underscore different okay and inside the value just add here the value okay all right now uh before this step let's add here the if dollar this property name ship to different again if this is true then just uh so this shipping address form so after this closing div [Music] just close here the lift right click all right now select this and press tab all right now save this file also save the class file and let's check this sources to the browser and just refresh the page you can see here by default this uh save to different address checkbox is unchecked and you can see here the shipping address form is not showing here okay now let's check this checkbox so just click on this checkbox and now you can see here the shipping address firm all right okay now switch to the project and inside the checkout uh component class file uh let's create some properties okay so here let's create property for the first name last name email address phone number address country uh province post postal code zip code or rct okay so here just type public color first name public dollar last name all right public dollar email id public dollar line 1 complete download line 2 and also add here the mobile public installer mobile phone okay mobile line two and after this this is for city dollar city public dollar province public dollar country and one more for zip code all right and now let's bind this property with a billing form that this form so go to the component view file click on complete view file and inside this form uh said this first time input text field just write your wire wire colon model is equal to first name okay and now just copy this paste inside here last name input expense and also paste inside the email phone number and address inside right here line one now just copy this and paste here for line two all right um and for the country you just copy this paste here and now go to code city all right and one more text build for province so just copy this and paste here and change the text province okay and also change the name province inside the placeholder and here the text problem all right and now change the property so for the last name just copy this last name and paste here and here just type in mobile line 1 9 1 and here line two entry zip code and province and here city all right uh zip code just cut this liquid and paste after the secret all right all right now save this and now let's create property for the shipping address uh form input field okay so inside the checkout complete class file uh i'm just going to copy this and paste after this and inside the property now let's add here i'll just uh select multi-line and simply write here a center scope for shipping okay and now let's bind this property uh with this shipping address form so inside this right here wire all right and now just copy this and paste here also paste here okay address entry [Music] um line one okay and now copy this and paste here for line two okay and cut the zip code and stop to the city all right now change at the property uh last name just copy this underscore last name um look at this and here is underscore email senders for mobile it's underscore line one is underscore line two okay and here is underscore uh country um city and also create input text file for province so just copy this and paste here and change here the text province also change inside the placeholder and inside the name okay and here is address for proven all right okay now let's add here the form tag so before this row uh this is the summary checkout okay and where is submit button place an order okay this is the anchor diagram okay so i'm just going to add here a submit button so right here button okay this this this is the anchor tag line link okay and here i'm just going to add here submit button so just right here the button okay and inside this just copy this text place order now okay and now just remove this tag all right okay and now let's add here a form tag so after this add here a form tag and just cut this closing fork tag and paste after investing okay uh let's just just chapter the summary closing tip okay after this closing date all right okay now save this file now go to the checkout component class file and inside this file and let's create a function okay so right here public function and function name and let's say function name is place order okay and inside this function uh first of all let's validate this form okay uh this form willing address form so here just try dollar this arrow to validate and inside this validate method pass here the field first name so i'm just i'm just going to copy this property okay and inside this validation okay validate array and now just select this multi selection so alt shift and drag and add here single quote and press e key and add the closing single quote arrow sign single quote and validation required all right and also remove the semicolon and add a comma okay and for line two uh just remove this because this is not required and for email address add a type sign in here and for mobile number uh numeric all right okay and before this function uh let's add here a life cycle book method updated okay so right here public function and function name which is updated and inside this method just and first inside this updated method just pass here one argument which is filled fields okay and inside this validation only method just pass here and download fields and comma and inside this array just copy this if here all right okay now inside the place order uh place order method after this validation let's create a variable uh create a variable for order order is equal to new new order okay order model order and after this dollar order arrow user underscore id is equal to what and also add here uh use illuminate support facades auth okay earth colon colon colon user arrow and just get the id all right ready now order arrow subtotal sub total is equal to station and call the get and add here the key which is check out and access the sub button okay from there and now let's copy this and paste here for our discount so you can hear the text discount and also change that let's format all right and now x and here total all right and also change the other text into okay and now let's copy this property once again and after this let's paste here select this and press tab multiple selection and right here dollar order arrow okay and [Music] dollar this arrow okay first name last name again mobile line one line two city province status is equal to ordered ordered okay and dollar order shipping address clicking underscore address each slipping different okay different is equal to dollar this arrow uh this property name save to different and add here the question mark one column zero all right and in last is the smaller the same method order hello all right and now uh head here for each then cart colon colon instance and add here the instance name card and also import here the card simply right here use card okay um cut column column instance card and call here a method contained as dollar item okay switch all product from cart and insert inside the database [Music] inside the table order item table so inside this for it just right here order item is equal to new order item all right dollar order item arrow product underscore id is equal to dollar item arrow id all right and order item and after this dollar order item arrow order id order underscore id is equal to dollar order order arrow id and now dollar order item arrow price is equal to dollar item one dd is equal to dollar item arrow qty okay and now just call the save method save okay all right now here after this just check for shipping address so just to check here download this arrow to different this is true okay first of all [Music] okay this is the billing address and you can see here this is the seeking address form so if this is true then while i get the sipping address form so i'm just going to copy this okay and just paste here and inside this central screen first name and uh last name email mobile uh line one city centers for providence country and secret okay all right now open this validation right here dollar shipping okay and [Music] let's copy this and paste here okay and change here the outfit and just copy the cp and select multiple select this and remove this and paste here all right and also uh add here is interesting first name so select this and press ctrl sd multiple times in all with all property okay yes underscore first name is underscore last name for shipping okay and so it's called email mobile line 1 this also okay and after this uh let's call here and also pass here the order id so setting arrow order under support id all right and after this let's call here the same method so right here download shipping arrow save all right and now let's copy this and inside the updated method after this let's add here a condition if donald this arrow ship to dip it is true then okay and paste here this and here the method validate only all right this is for shipping address form and this is for billing address form okay and after this this if condition let's write here if for transaction okay casual delivery debit card and payment okay so inside this class first of all let's create a property public utility okay and now let's copy this property name and go to the complete review file and inside the payment method uh this is the payment method and you can see here the radio button okay so inside this custom delivery radio button just right here wire column model is equal to property name which is payment mode okay and now let's copy this binding and paste inside the debit and credit card payment method inside this radio button and inside this paper okay all right okay now [Music] inside this place order method after this if condition uh just let's add one more condition for transaction so dollar test arrow payment mode if payment mode is equal to cod means cash on delivery then i'll just create an object for transaction transaction is equal to new transaction all right and after this download transaction arrow user interest for id is equal to or column column user arrow id all right then conjunction arrow order id order underscore id is equal to dollar order arrow cod and transactional status pending transaction arrow status is equal to all right and after this uh let's just wire the card so right here card column column intense card and call here the method destroyer destroy okay and also uh forget the key checkout key from the session so write your session and forget and add here the key all right okay and inside this validation also add the validation for payment code so just copy this property name and inside this after this zip code you just add here payment mode and add a required validation okay it also required all right now just copy this and just inside this validate only inside this method okay now inside the form uh let's show the validation error so first inside the billing address form after this input text file um just right here at the rate header here and inside this is right here the property name which is first okay and add here span tag expand class okay and inside this just print here the message call the message okay validation message and after this is spam tag just close here the directive so right here and hit in okay and now let's copy this line and start this text and enter the property name last name and for the email paste here to mobile and for line one all right and now inside the country country inside the zip code okay all right now inside the shipping address form um after this just paste here once you paste inside this last name email mobile number line one not required in line two so inside this country province city and zip code okay and now let's copy property name zip code okay just copy this and paste here ct province country line two line one last name last which is called first name okay now it's all done okay and now let's copy this and inside the payment method okay uh after this dave inside this tip after this label paste here and enjoy the property name which is this one mint mode okay all right now inside the total uh grand total inside this let's let's display here the total amount so here let's add a directive if station column column edge checkout key and from here just remove this and your double curly bracket then station column column hit and you have the key click out and check out and also idea that [Music] okay [Music] all right now save this file now let's create a new live wire component for thank you page okay so switch to the command prompt and let's create a new livewire complaint so type here php first clear the screen php all right thank you component now press enter compliment created now run the application php server all right now access to the project and first of all let's create the route for thank you page thank you component so uh go inside the routes directory and open web.php file and inside this file after this let's create a new route route it add here the uri thank you okay which is thank you complaint column column class also give you the route name thank you all right okay now save this file uh now go to the thank you component class file so directory http livewire and from here just open thank you component.php and first of all inside this file let's add here the layout and directory name which is layout hot layout name which is base okay all right now save this file and now let's open that thank you component view file so from the resources directory views livewire and let's open this into component.php and from this file let's move this comment and now go to the template directory and you can see here the template for the thank you page just open thank you dot html file inside the text editor okay and from this file uh let's copy this main area so just select this main area and copy and um inside this youtube component view file just paste here okay remove this comment and now uh here just add the link for the home page so right here forward slash and here uh at the soft links right here forward slash so okay and now save this file and now go to the checkout company uh first of all just close this we've got php file also close this and close this thank you computer viewfinder okay and now inside the component checkout component class file let's create one more property which is public toilet thank you all right and now inside the place order method before this simply write here dollar this arrow in q is equal to 1 okay now inside this component class file let's create one more function so after this let's add here a function public function and function name verify verify for checkout okay and inside this just add here the condition if user is not authenticated you write here exclamation sign what colon colon cake okay then uh just redirect to login page okay so simply right here return and uh redirect method redirect redirect now and add here the route name which is login okay and now add here the another condition if user is authenticated then add here check another condition which is hence if dollar is arrow thank you it means uh this property has number uh has value one then it's redirect on zero page okay to redirect on route and inside this simply right here thank you okay one more condition and if if [Music] session has station if not session check out okay route product dot com if jason has not a checkout key then redirect to cart page okay and if you user is not authenticated then redirect on login page okay and thank you has value one redirect on thank you page all right now inside the render method uh just before this call here this uh verify for check record function okay so right here dollar this arrow verify check out all right okay now save this file and now let's uh call this function less order from the checkout form so inside this form uh let's add here wire column submit event submit action submit dot prevent is equal to and function name let's copy this function in this order all right wire column submit dot prevent is equal to place order i think all done okay now save this file uh one more thing uh just go to the card component class file and uh component class file okay inside this file and inside this file just go inside the [Music] same set amount for checkout okay inside this method and before this if condition let's add one more if condition here if cart is not cut column column instance and add here the instance part and call here the count method is greater than 0 inside the card total quantity is not greater than zero then you just call the session and remove a checkout key from the session okay so just call here the forget method forget and pass here the key checkout okay and now return otherwise execute this line all right now save this file all done so let's check this now switch to the browser and just replace the page okay you can see here it's redirect me on login page okay because uh because i am not logged in okay so first click on login link and now just click on uh one more time i'm just going to check here so just click on checkout or without login it will redirect it on me login page okay so let's click i just enter the other credentials right here user and create user.com and enter the password and click on login okay now let's click on checkout and you can see here inside cart there is no any item okay and it redirected me it's reductive redirected mean on cart page okay because card is empty okay so let's add some product inside card so click on stop now and let's add some product so click on add to cart okay add one more product this one okay and you can see here the total value is four one nine point eight seven dollar okay now let's click on checkout okay and inside the checkout update you can see here the total value in this one okay uh before filling the form let's open the database so go to the phpmyadmin and let's open the database laravel 8 e-commerce db and from the database uh let's let's browse the orders table so click on browse also browse the order items dipping table and transaction table okay this time all tables are blank okay this is the order items this is the order table and you can see here the saving tipping tables and this is the transaction table okay all right now let's add here the billing address so simply write here name this one phone number india province zip code one two one zero zero one okay uh if you want to add shipping different address so just like select this check box and okay inside this missing property okay let's check this error so let's do the project and inside the checkout component class file [Music] okay here is the mistake uh inside the validate only method or let's pass this fails dollar fields okay and in this area okay now save this file and let's check again so just refresh the page okay and now first check this check box okay now it's working and if i click on place order and you can see here the validation error and also inside the validation inside this form so first fill this form so once again just right here the first name last one tomorrow mail id this one phone number ariana and now and here's the shipping address so let's add here the different names okay email address test gmail.com phone number this one address country all right this is the billing address and this is the shipping address okay and now let's uh select the payment method that's on delivery and now let's click on plus order now just click on this link and now you can see here the thank you page okay now just check inside the database so um inside the clipping uh inside the orders table just refresh this and you can see here the order order details okay first name last name tags total discount subtotal user id and all details okay and inside the order items you can see here the products okay and inside the dipping address and shipping table you can see here the name last name um okay and inside the transaction you can see here the user id order id payment mode and status pending okay all right and you can see here inside cart there is no any report okay it's empty so this way you can check out with castle delivery option so that's all about checkout with cash on delivery so thanks for watching this video and if you still have any kind of question you can ask me in the comment box don't forget to subscribe my channel thanks for watching

Channel: Surfside Media

Views: 6,246

Keywords: How, to, Program, laravel (Software), laravel, laravel v8, laravel 8, laravel project, laravel setting up, laravel v8 setting up, laravel v8.0, v8.0, laravel 8.0, laravel 8 playlist, laravel 8 tutorial, laravel 8 lesson, laravel tutorial, laravel 8.0 tutorial for beginners, laravel for beginners, laravel tutorial for beginners, laravel8, laravel 8 ecommerce tutorial, laravel 8 ecommerce, ecommerce project in laravel 8, laravel 8 ecommerce project, checkout with cash on delivery

Id: qJpnjCtz6tE

Length: 62min 36sec (3756 seconds)

Published: Fri Apr 09 2021