Create Stunning Invoice HTML Template Bootstrap for Shipping with Ease

Invoice html template bootstrap for Shipping

foreign e-commerce website so we are going to start working on the order in OS so every order is having the order invoice uh that we need to send to the user every time when the user plays the order okay so we are going to create the HTML invoice for the uh user okay uh so this thing we are going to add in the admin panel so I'm going to open the early panel and admin login so we will add this option in the end in parallel order invoice option and the admin can able to download this innovis anytime and we will also send this invoice to the user when he place the order that we will do later on okay so we will add here one more icon in which we will add the that link to create the that order in OS to generate that order invoice so that the admin can take the print out of that order invoice anytime and and that invoice we will also send that link of that invoice to the user when the user plays the order because uh see for the user we will send the complete invoice of the order not individual item like the vendor is going to ship this one and another vendor is going to ship this one that is the different thing but the user is not concerned with that like bit sender is going to to send the which product but the you but the at the time of the order placement we are going to send the complete order invoice to the user okay so that thing we are going to do uh so we will also generate the PDF in OS later on okay but uh but first of all we are going to create the HTML invoice for the order okay so let's start working on this thing ah first of all we are going to add the icon here we will see back the icon here that print icon we are going to make and once the admin will click on that print uh icon uh we are going to open the HTML order and Voice page so we are going to download the HTML format from online we are going to search and download that and and we will use that okay so let's start first of all I'm going to open this orders blade file okay I will open my ecom9 folder in which I am going to open the orders.blade.pp5 located at the admin okay so here uh I am going to add the another uh link here okay after this one after view order details I am going to add the another link and I will also give some space between these icons and bsp okay two times and here I will make it like view order invoice Okay order invoice and here I am going to add the uh print icon okay I'm going to add here the print uh print icon MDI printer okay printer okay so this icon I am going to add and here I am going to create the route for this one like admin and then after that I can make it like simple view order in OS you order in Os or we can also create the different link like admin orders then invoice uh we can also create like this like admin after that orders after that in ois OK it depends upon us okay you can create so I'm going to refresh here and here you can see the print icon has come up and it will go to the separate page order in wirespeed we are going to create the route now in web.php after orders we are going to create the another route and we are going to create this separate routes for like order invoices okay because ah there uh we may require to create uh many routes like one for the htmlis one for the PDF invoice okay so we will make it like this order invoices okay so here we are going to add here route get route we are going to add and we are going to make it like orders after that invoice and for which order uh we are going to add its ID here like this okay orders invoice Okay so uh after that we're going to add here orders controller we are going to add in an inside order controller and we are going to create the function like view order invoice like this okay this one so we are going to create this function inside the order controller and we are going to create at the last and here we are going to close this one and we are going to add this function here public function and here what is the function name we are going to copy from here view order invoice and this is the function name that we are going to add like this and inside this we are going to add the order ID dollar order ID okay so inside this we are going to add uh see we are going to fetch the order details okay order details that we will send to the order invoice order details and folder the complete order with the products okay like we used to fetch the products also with the order details okay and we are going to compare it with the where ID and this one that we are sending from there order ID okay and we are going to fetch it in Array first and two array okay we are going to generate the array for this if you want to use the object it's your choice okay but I always recommend to use the array because we can use the array functions with the array okay user ID then here we are going to add a user ID here okay to fetch the user details also we want to fetch the user details so we will fetch uh like this user ID from the user ID now we will fetch the user details okay user details and here we will fetch the user details also because we want to send these details also to the order invoice ID dollar user ID that we fast from the order details okay and here also we will do it first to array you can also do it like this like if you don't want to add this you can simply use this uh like here and then this one is not required if you are not using the user ID at many places then you can simply do it like this okay after that return we are going to return view we are going to create the blade file inside admin inside orders folder we're going to create the blade file like order underscore invise okay and here we are going to add with compact okay so here uh we are going to add here Order details as well as the user details fine both we are going to add inside the view order invoice and now uh we are going to create this order underscore device blade file uh inside our folder ecom9 resources views inside admin inside orders here okay so in Mac we need to create the file like this Services New terminate folder touch and we are going to create the new file that will name it like order underscore wise Dot blade.php okay and we will press enter and we can see the file has been created order and is converged by dot PHP but if you are in Windows you know how to pair the file you just required to go inside the folder and then you can just simply right click to create the new test file you can create and you can rename that to this one order underscore investor blade.php that you can do in Windows okay so once we have created the file we can open this one order unscore invis.b.php here we are going to add the invoice HTML okay that we are going to search from online okay earlier also we have used uh some invoice from online okay so uh in in laravel 8 series we have used that so once again we are going to search order invoice HTML tablet okay so we are going to search for some good template and here I am going to open this first one okay first one boot snip.com Okay so and we can copy from the HTML this is the HTML I am going to copy this complete HTML copy and we'll paste it okay here and you can see its view it will look like this one it's for you you can check it out it looks fine okay so we are going to use this template and I just copy it now I I will click here and then static invoice will get open let's see I'm going to click here and you can see the static invoice okay so it looks fine uh what I'm going to do I am going to uh see here we want to open this link in a separate window so I will use it Target blank so once again I'm going to open here so that it will open in separate window so I'm going to click here and you can see now it is opening in separate window and you can click on Ctrl P so that it it we can check its print view okay so it looks fine you can see it's a invoice so same kind of invoice you can see whenever you will order from the Amazon or any other e-commerce website okay so uh we are going to make it Dynamic now okay so this invoice we are going to make it Dynamic uh so let's update it and this invoice we're going to update with the uh with the order details and the user details okay so one by one we are going to update the complete universities like here we are going to mention the ordered ID okay and that is coming in the order details array order details here in this one and it is coming here ID okay we are going to check it here and let's see uh so order id1 okay fine and here build two and in Bill 2 we will show the user details Okay so here we are having the user details in this user details array user details name we can check there that both all details as well as these details we are sending as a array here and that we are going to show here okay so what we will do it like this order details okay and uh we can remove this one and here we will add name then address then City then state then country and pin code okay then mobile also we're going to show mobile and we're going to check it once okay so see some of the information billing information is not mandatory but delivery is mandatory so we can add here condition like if it is not empty only then we are going to display this okay like address if not empty then only we can able to see it okay like this we are going to add the condition for others as well for City Air Force state okay then for country as well uh for I'm going to replace these variable names don't worry okay so here I am going to do one by one see we will collect its layout as well okay so now address after that City under the state of the country the PIN code so now we are going to check here okay so find build to this one that much information is available and we are going to copy this one complete here uh we are going to copy and we'll paste here uh okay in shift 2. and then we can make changes here uh we can replace your details with the order details rest information we are same yeah okay so we are going to see here order details fine now we are going to see fine so see but here what we can do we can make it like uh because c c t and state everything is mandatory as for ISD shift to address is concerned so uh so these these conditions are not required here actually okay so we can remove this condition and what we can do we can do one more thing here like along with the city we can add the state so that we can save with space okay ah city commerce State okay like this okay we can do it like this and rest all are required all are are the mandatory Fields so delivery address is always there so we can remove this one okay we can simply make it like this okay so now we can see here see now uh see name address city and state this pin code also we can do it like this uh hyphen here and we can bring this one here like this okay so it will see more space will be saved and the address will look good fine now okay so now this is the ship to address and after that we are going to update the payment method also and in payment method uh we have the variable uh in order details so we can remove this one and here we are going to add the payment method roller order details payment method okay fine and here the payment method will come that is cod and Order date in case of order today date we are going to add the created a date of the order operator at laravel by default save the State Credit ad that we are going to use it here okay but we are going to change is format okay like we have used uh here the correct date you can see so we are going to use this format okay correct format uh that will more good format of the date okay so just we need to use the correct variable here array or details array here now it is fine okay so like order summary for order summary uh we will dynamically show all the product details we can open here the order details that will help us to see that how we are showing the order details Okay order product details so here you can see that the product details coming in uh here uh coming in an array yeah inside orange products so we're going to use this so here we are going to use this one and uh here we are going to use it here Okay so okay so we are going to paste it here for each and here we are going to end the forage but here we need to have those fields that we want to show okay so we want to show the product code so we will add the product code and then uh the size we are going to add okay after side we are going to show the Color Price okay we can do it like this price we require one two three four like we are going to do it like this uh out of that side then color then price then quantity then total okay so these are not required side Color Price quantity total okay product code size Color Price quantity total I think it is fine now and here we are going to show uh okay all the fields here that we are getting here we're going to show the first one is the product code okay and solar product and here we are going to show the product code okay so like this uh we are going to show the next one is this size okay we are going to show the size here after blood core we are going to show the site website after peroxide we are going to show the black color foreign color uh we are going to show the price okay so this one is product price we are going to add the INR in front after after price we are going to show the quantity press price here quantity product k o t y after quantity we are going to show here the subtotal okay so subtotal we are also going to show in INR and that is uh product price into product quantity like this okay so after this one uh we will not show this one and this one also uh then here it comes the subtotal that we are going to show nobody uh but first of all we are going to see uh okay so here is some issue has come when you want to see expecting this one some issue has come but code expecting syntax error we're going to see what syntax error is there okay so uh see the silly mistake here okay I forgot to add this one okay now it is uh it seems to be fine okay so now we are going to check here okay now it seems to be fine and you can see the product code size Color Price okay so after quantity then subtotal okay uh fine it is and you can see but these things we are going to move here okay so uh here uh we are going to add two more times like this and here in subtotal what we are going to do here uh we are going to calculate the subtotal and here uh we are going to add the PHP like this sorry PHP dollar subtotal we are going to add it 0 here and PHP and this one uh here we are going to start repeat once again okay so here what we're going to do subtotal equal to subtotal Plus and here uh we are going to take this price uh we are going to multiply the product price with the product quantity so that if there are multiple quantities that we need to add that okay so fine it is I think yeah uh so n PHP for that okay so and this subtotal uh we are going to show here you can give your own currency and here we're going to add this subtotal and now we're going to check here uh okay some issue has gone different variable oh okay I think yeah two times fine now check here yeah now it is coming 2200 that is fine okay so next one is the shipping charges we are going to show the shipping charges here we are going to add the full like screen charges and here uh the shipping charge is coming in order details Okay order details array uh okay so uh see shipping module we have not added so far uh but once it will get added we are going to show it from the order details we are having the shipping charges but right now we can simply show it like zero okay so after shipping charges we are going to show the grand total okay grand total is also coming in the variable Grand underscore total so that we are going to show okay here we're going to make it like the grand total and that is coming uh in our order details array okay so that we are going to add the show here for the details grand total okay and that is coming from our orders table okay and here also we are going to show the i r like this and now we are going to see our invoice so it looks perfect okay and you can show the grand total in bold if you want to show it because it is the main uh price that we want to show to the user that the user may require to pay but see in case of cod user is not required to pay anything okay but in invoice we are showing the Gran total uh here uh we can mention it one thing we can mention here uh like uh here we can like we can add here the break and after break we can show here one thing like in case of if the payment method is cod then we can add it like already paid okay uh so like we have added the condition earlier like this one if payment method is cod then we can add already paired here like if uh payment method is if payment method order details payment method equal to Cod okay then we can simply show here already paid okay this one we can also show this one in some color like uh font color red okay and what we can do we can show it in Brackets also like this so it will tell uh you know is already paid fine so uh so I hope it is clear but it is not coming in a perfect way it is gone there uh subtotal and this thing that we can show uh on the right side okay so we will check here like if we will show it on the right side then how it will look like right as well as right okay so we want to see now it looks fine okay subcontroller shipping charges and grand total and here also we need to see the price why its layout is uh looking not that much perfect okay we need to uh make it like price Center okay so here uh we need to do it like this okay so now it will seem to be fine and also uh quantity to check it quantities also fine now okay so now you can see the invoice is seen to be fine we can check in print layout for this one and uh you can see it how beautiful it looks okay so you can see the invoice and all the options are having okay you can save it as the PDF as well if you want to save as PDF you can simply save it as the PDF just simply click on Save and then it will get saved in the PDF format here save as PDF you need to select a save as PDF okay I have the printer also but I am going to save it as PDF right top and uh to have the PDF layout and here I will just give the name here and click on save you can manually send to the customer also you can email this invoice and it must come in my system this invoice is ready you can open this invoice and I'm going to show you that sorry this invis uh is look it will show up here in okay so you can download that PDF reader okay to see to check the invoice here it is taking time I am going to open here it is opening now in voice okay so in the PDF format though we are going to create we are going to generate the PDF invoice as well okay here you can see the invoice is converted to the PDF so this invoice you can send to the customer as well okay so uh in the next video uh we will generate the bar code and cover code for the invoice okay uh and after that we are going to send this invoice to the user and we will also delete the PDF invoice so few things we are going to do with this University because these are really very important okay so please stay tuned for that that's all for now have a nice time goodbye foreign [Applause] [Music] [Music]