Ecommerce website in laravel and vuejs [ Easiest way For Beginners ] 2021

welcome guys welcome to this video in this video we're going to convert this e-commerce template into a larval application so we have here the products and there is a slider we can add these products we have discounts that we are going to apply we have the strike payment so here you can see the transactions the payments successfully implemented we have user detail so it's a test mode i will tell you and show you how to create the account and how you can make things work with stripe for the project if we go here we have card on top so user when clicks card updates you click on that you go to the cart page you have to cut a detail you have total amount that user has to pay you're going to create the tables like products we're going to have stored the products here we are going to use the factory larval factory to generate some dummy content and we are going to see how we can use it we are going to have cart so once the user adds a product goes here then we are going to see processing so we are going to remove the user detail from cart when payment is completed and going to put the detail in processing whatever detail is company requiring to send the product to the certain customer so yeah so this is the project we will be working [Music] hi guys so i'm here on marvel website and i'm going to create a brand new project so we will be using composer for it so here if i scroll down you can see the composer command given here so what i'm going to do i'm going to open the terminal and in terminal i need to go to the desktop so cd desktop and here i run this command instead of example app i'm going to call my app shop so it creates the the shop folder so it's here now now i also have a theme here which we are going to use in this project this is the e-commerce theme so i'm going to extract it and here we have it so if i go inside this we have these files and if i open it with the browser so this is the theme that we will be uh using it and we're going to convert it according to our needs so let's do that so i'm going to cross this off and i'm going to go into the uh the project is complete now now we need to open this project with our any of your code editor that you prefer i'm going to use visual studio so here it is and uh what i'm going to do i'm just going to drag and drop my project here and here it is so now here if we talk about the structure we have the routes defined in web dot php and if you familiar with this it basically works this way you have a route by default larval provides one route which is defined and it is powered by vulcan and dot blade now this welcome is inside resources and then when you go inside views you will see walking down blade now these man names should match to work so if i go to the project itself uh currently we don't have it running so let's run it so i go to thumbnail again and here i'm going to go uh cd which is change directory to shop because we created the shop folder so we go inside it and then we say php artisan server now it's going to start the local server it is giving us this url so i copy this url paste here and hit it so you can see that we have our application up now here if i go to the code editor and if i comment this go back refresh it goes away so basically that is powering it if you go inside this file and make changes there let's say i delete everything from here and i refresh again here it's still not going to give me anything so if i restore everything say again go back refresh we get it up by default we get only this file from larval we want to have few files for user login because in our e-commerce application only register user will be able to place orders or add products and code so if we go in here you can see in view we have only welcome and if i go to app and then http there we have controllers and inside controller we have only single controller present so what i'm going to do in the terminal so here [Music] i'm in the shop and it's in the same folder i'm going to run the command laravel ui and it is going to provide us the ui component and then we are going to install view components here so i'm going to run this alt command and it is and you can see that authentication is covered in generated successfully now if i go back here you can see that in the view file now we have auth folder we have layouts we have home and previously we only had welcome the same way if i go to controller we have old folder and we have a home controller now if i go back to application and refresh we can see we have login and register so if i go in here register we get this page now currently it is not showing any css let's write that now for correcting that we need to run a command so i'm going to go back to text editor here we are going to run uh there are two commands basically npm rom dap and npm run watch so if you want to put less pressure on your system while developing you can use npm run dev so if you make any change you run this command to compile and then things will be updated on the browser if you put npm run watch then you don't have to care whenever you make changes automatically it is going to update the output but in that case it is going to be bit pressure on your system because if you're working on some heavy application that can slow down your system so here i'm going to run this nvm on that so it is going to compile now it says sh miss mix not found now that means we don't have mix so we need to install that so here is the command and all the commands that i'm using in this tutorial you can get the access to those and given in the post in the description so here i'm going to run this command now and it should fix it around the package is installed we need to run npm run down again now and this time it suggests us to run this command so let's do that okay done now random run down again and this time hopefully it should work now it's mixing it you can see here so now if i go back and refresh you can see that styles are back so we need to have the localhost uh currently we are working with the php server command so i have zamp also running on my system and here what i'm going to do if i go to localhost slash phpmyadmin so you can see that i have it working so i can create a database here so i say larval underscore show and i create this and we can pass this database in our env file so env file is where we define all the configuration for your database so here we have localhost set as host in our wall shop it's going to be name is root password i'm not providing any and that's it for now so i'm going to cross this off all right so if we go and do the migration because we also got some migration files if i go in database migrations we have few migration files here and once you run these migration files we can register the user then so let's do that so what i do simply i run this command say php artist migrate and it adds few tables and let's go back to the browser in the world shop now we have few tables we have users table here so we can register a user so let's do that i refresh here and create a reuser here so as a test one two three and i give a test123 at gmail.com and password we want one two three four five six seven eight and the same as confirmed password so register so now we are registered you can see that it's redirected us to slash home and if i click here we go to main app so we have here and we have this page two pages all right now we have the front page and here as well as the page where we can process users products so let's work with the theme we need to change it so currently we so what are in to do i'm going to first delete uh change the name of this welcome to product so that that's more relevant product dot late now it's going to stop working because if i go back here and refresh it's it's saying it's not seeing view file for welcome so we need to change it here we need to say it is product now it's not welcome anymore so we go back there it's back there okay now we go here in uh the theme that we have the team i showed you initially so we need to use this theme in our uh so what i'm going to do i'm going to open the sublime text here you can see this html and the whole code is here so what i do is simply get all this across this now in here inside product dot blade i'm going to paste i'm going to control all delete and then paste that code all right now currently we don't have the css files and js files so we need to go inside the theme and we need to copy this asset folder because there we have all the files so i copy this and inside our project we need to go inside public folder so if i go here and it's here i can paste this folder right there okay so if i right now in the code editor you can see bsn asset jc js and then main.js so by default it is going into public then we have assets and there we have the file so it is going to work correctly so if i go back to the browser refresh and you can see that this is the theme now working on our laravel app you can see that now we need to work on this and make it better so for that first of all we need to see how we can log in the user because we don't have those options here so for that what we can do uh we can go back so initially this was the code so what i do and here if you notice here is the uh code that is responsible for login user so it is actually checking here uh if the auth then provide this link otherwise provide log in or register so we can copy this i'm going to paste back the theme code and i'm going to go on top here where we have navigation so in the theme here this navigation we need to paste here that code that we just copied from the previous file okay so here [Music] navigation links are here so i'm just gonna paste here that code all right it's like this okay so we have li and then anchor tag and here this structure is a bit different we have uh if conditions and div then inc attack so what we need to do we need to remove this data to match the design so i'm going to do that and remove this thing from here too now each of this anchor tag should be inside li i'm just going to copy this just like that i'm going to put here back and refresh now you can see that we have here home so currently user is logged in so it's showing home here so if i click there it takes me to home and if i log out and now it says login and register so you can see that our links are coming in the theme dynamically so we can log in again and have and go back so it says now we don't want it home it should be uh something else so we will work on that so first of all i go to product page here where it says home and that is here all right we can call it cart so we we are going to show it as a card so when the user goes to this user will see all the products user is looking to buy now if currently if i go to database here um in our laravel shop we don't have any products table or cart table so we need to work with that so let's do that i go to text record editor again and here we need to create a few files open the terminal and clear the screen here and first thing first we want to create a model for product so it's a php artisan and it's going to be make and what i'm going to say i'm going to say model and it's going to be product so model should be singular so i call it product then i say dash m and f and s so m for migration as for factory and s for cedar so we run this and it creates these files and i'll show you what each of these files will do in a moment and the same way we can create a card model so for card i will call that simple card and dash m for migration for now all right so let's see how it's supposed to go so if i minimize this for now and go to files and here in the migration we have the create product table and create card table so we we can create these tables now now factory uh is also present so that we can be a product factory here now so we can have some dummy content for our products and we will be working with that so let's work with the migration like create products table here we need to add few fields so let's do that so as a table and the first thing first i'm going to save the product name which is going to be string and that's one thing then we want a slug so the product will have a slug another thing we want to say is some description so what product is about and what dimensions are or anything you can dive into the description then after description we want an image so we want image discord name and we're gonna store the url as well as names depending on the situation so i'll show you here now we need uh price so we're gonna show user product price and we will also show a price user can buy at the product so it's going to be sale price so usually we'll see two prices so if we go back to the theme here we have 69 and 49 so this is the price is this is going to be the sale price so after discount what price is that is sale price all right so this is going to be the products table now we have product stable uh settings set let's add the card table settings as well so there for migration we go create cards table here if you want to change the name you can change it if you want to i leave it as cards for now so what we need to do here is we need to first of all create a table and it's going to be unsigned big integer and basically it's going to be product id so the products we save in the product table and the id will be stored here for the reference so here table and then we want to pause here string and this time we are saving here user underscore id you can even save as a integer if you prefer it's totally up to you my for saving as integer we can say integer like this now i'm going to save our quantity all right so after that we need price so i'm just going to copy and paste here and let's say price now the price came to be float so float all right so it's it can be 23.50 or 70 or something like that so it should be float now another thing we want is table again we need to use unsigned teacher and this time it's going to be user underscore id now we are doing this inside integer because we want to refer this field to the product table and here to the users table because we have users and user table so for that what we do we simply pause here something like this to create a foreign key we say table and then we say form and here we're going to pass first for product table so product on this karate now here we tell reference different the spelling should be correct and here we need to pause the id so in product table is referencing to the id and here we say on products table so product id of this table is referencing to the id of productive products table so just copy this again and paste here and user id of this table is a reference of id of users table all right so looks fine now we can run the migration so for that we can run migration so i open the terminal and php artisan migrate and we get another duplicate column user id okay i made a mistake here i said here user id because we created here so we don't need to do it here so i remove that from there sorry about that and clear and run migration again and this time it goes now if i go here yeah so we have products here so the structure is here all the fields we define then we have the cards or you can call it card but i added it as part so here you can see that we have foreign key on user id and product id so yeah as we expected this thing just like that all right so we need some product i want to have some sample products so we can show here currently these are the static products uh showing up here so let's do this let's use the factory to generate some uh products so for working with factory when i do enclose the terminal go inside here and here we have factories folder there we have product factory so i open this file now here we have an array now here we can pause some options so what i'm going to do i'm going to pause options as we have in our database table so go here products structure now we can have side by side so we want to have some demo products so the first field is name so we want to use generate some name here so i said our days faker text and we want maximum 25 characters picker is a library that helps us generate dummy content random content so you can check about that in the description and the link it is in the description so you can check from there so here we have the name and this way we need slug now for what we want and we want to have the name and then convert it to slug so what i do is simply pass here on top i'm going to call dollar name and i'm going to pass this there all right and then in front of name i'm going to copy and paste rna and then we have slog now for slot what we can do we have a function uh in uh marvel helper slug or we need to pass this dollar name here so we are passing the dollar name so that same name goes here and same name becomes slug so this is gonna work now to make it work we need to make sure we have string imported on top so let's do that it's going to be use illuminate and support and then string it should be fine now now the other fields we need to work on is description now it's description is just text so we can pause this figure like this and we can just increase the count let's add 200 so that hundred corrected description now it's an array so we should pass comma only another is image underscore name so we want to have image name so let's see how it works so i go to the factory if you search laravel factory faker and you will come to this page figure and here if you scroll down you can see the type of content we can generate we can generate names we can generate addresses there are examples here like how you can generate these so you can check for your understanding you can generate phone numbers company text date time internet user agent so this kind of information we can generate for our project so here i'm getting the same thing so we need to generate image in this case so here we have the image generation we can pass the width and height and we can generate the image so let's do that so here i'm going to say image underscore url oh sorry it's a u arm and for using this we need to again call it through this figure like this now we can pass the width and height so here is a dollar worth in our case we want to have width i i call 140. and we also need to pass height and height should be rotated to new line and height should be i think 300 coma save it all right let's go back to the table after that we have price so let's add that so it's a price price is going to be uh the price is going to be between some number so what i'm going to do here i'm going to again uh use it outside because also we have the sale price and i want to have single price set so what i do basically a simple say here dollar price is equal to all right and here we call this figure first just like this copy and paste and then number a bit wing all right and here we pause dollar min number and i want dollar mean to be hundred and then dollar max number so it is going to generate number in between these numbers all right so it's gonna do that so here we can do this for price we pass this price for sale price as we want to give discount to user we say minus 50. so whatever is going to be the number let's get minus 50 to that all right looks good we can have it working now so if i go to the uh now before uh inserting data we need to do some things once you have your factory file ready you need to call it inside the seeder so for that what we do we considers here you can see you have database cedar so we can go inside there now we also have product cedar so we can call it through it what we need to do we go inside products either here inside we are going to say the model so for the product we have product model and here we are going to say factory and then how many records we want so i've gone 25 products to be created so it's going to create 25 of the semicolon so 25 products going to be generated now if i go to models we have project model here so it's we need to import it as well otherwise we need to get the error so it's going to be app backslash models backslash product looks good now what we need to do at last we need to go in database editor and call this file so go in database editor here what we're going to do simply download this and call and now we are calling the project seeder all right so we should have this class here and it should it's gonna run just fine so yeah we have it here not factory everything is set up just fine now one thing we need to do before because we are mass assigning data we need to set fillable while using models so whenever you do that basically the procedure is quite simple all you need to do is simply go into the model and create a variable i'm going to say protected and call it fillable and you just tell that these fields allow these fields to have a mass assignment so here we can say in the product table we have name break it down here and hold fields slug and then we have description if you don't do this you're gonna face adders so it's better to have it that place all right so here we have image name then we have price and we have sale price and we have created from this grand all right now as i'm done with this here i want to do this same thing in our uh model as well so that we uh however we're not gonna do anything straight away but uh in case we do then we can we have developers that place here with your card and here the fields are product and square id then we have quantity price user underscore id all right all set now we are models already and one more thing i want to tell you that you can tell in your model what is the table names for in cart i can see here public dollar table is equal to cards so if you're like we have cards here uh in our laurel shop so we are telling that this is the table that can be done as well so we have available at place we have products available at place we already call the migration file that's cedarval so let's do this let's add the easer and broad products so i run the terminal and here we need to run a command so all right here we're gonna say php artisan migrate dash dashboard okay sorry about that we need to do a bit different not like this we need to say instead of freddy fresh it's going to be seed and migrate uh it's going to be fresh just like that and you can see that it migrated it's seeded as well so this product so if we go in our database here and in products we have some random products now we have the name slug description we have images we have price so each price has uh like here and the sale price is 50 dollars so yeah it's doing just like that now what we can do first of all to start with we can have our products here because currently these are just static products so let's do that so here what i do i go to the uh first of all in the route so in our route if you see the first thing that'll be happening is here so this is the page that is providing us the data on this front page so we need to first of all connect it with the controller so let's do that so it moved this and i'm gonna say here all right this is going to come from products controller it's a class and use function index alright so we need to call this controller so we say or use yeah backslash http and controllers and then we need to pause the products name products name okay now it has the access to it that's perfect now i cross all the files because we don't need these files for now and we need this file now so let's go there so in http controller and here i notice we don't have products controller so we need to create one so let's do that i create another command here and simply click the screen php artisan make controller and it is going to be products dash dash resource now this should be plural and model should be singular so that's the best practice so here we run it it creates a controller and now we have the controller i use the resource if you don't know about resource it provides us these default functions you can see here index function is created and create functions is created so if you not going to run the resource it's just going to give you the class without these functions now we mentioned here that use the index method so we're going to deal here with index so here we can use the product model we can call all products here like this and let's see if we get all the products so here let's simplistic other product and to check in laravel you can dd and put the variable that gives you the output what output you're getting now we don't have product called here so we need to call it use app backslash models and then product all right and i hope we have it so if i go to molds we have product yeah so it's gonna get us the products so if i go back here and refresh uh we get products controller does not exist okay let's go back to here now we have the products controller here and okay i called it https it is http and here let's refresh yeah that's correct now we have 25 records coming here you can see now if i go to the attribute we have the data showing up here great now let's do this pass this to the front page so we can show to the user so what we do here basically we gonna say return view and we use product page if you remember so if i go back here so resource view and this is the product unplayed that is responsible i pass here with or we can use compact in this case as well so compact and products all right now here now we're passing products there so in the product.blade now we need to find out where uh you see these products are coming where exactly is the code for this so we can modify there so here if i go to okay it's on top of it so it's not this one so yeah this is the one so we open it and here we have cool md3 called lg3 so we have three and nine so you can see here we have the three portion coming here another encryption from here so what we can do we can uh open the nine portion and here here you can see single product item so here i collapse these all so we have four days or more days here yeah so what i do is simply remove all these disks because we only need one so we have this for going up here and what i'm going to do i'm going to run a loop here so if i say here's a reset dollar products as we are passing product so here it's going to be endive all right and here we're going to loop for each dollar products yes dollar product and at the bottom of it and for each and here now what we're gonna do we're gonna first uh for the discount this is sixty percent off here we're gonna say uh for discount dollar 50 minus as we are passing that then we have image here showing up so we want to get the image so i simply passed all our product there in the image and we pass it like this all our product and here image underscore name now the same way we need to pause the product name so product name is here let me pass name other than that we have sale price so it's gonna be sale underscore price and also price so what's the original price without discount okay let's go here refresh and scroll down all right we have the things working you can see that product names are here we have prices we have the yeah all the set these images are generated by faker factory so you can see that dollar fifty discount and that is happening here now the image is too high uh height is too much so we need to decrease it so what i do here inside here we can pause some style or simply i say hi let's hide to uh 250 pixel let's see if it looks good or not maybe a bit more all right say 320. yeah it's better so we can have anything so it's working just fine now all right so now what we need to do we need to have a card button that is going to work so let's do that so first of all i go here in here we have price here i need to put hr then i'm going to say button with the class of button i say button warning and here i'm gonna call add to cart all right it's in loop so it should be showing up in each product so here we have it here on each product now if i go back we can have it center using text center i just take it out from here and put just after the price and now it should be funny so all right refresh and yeah that's fine now what do we want to do we want to use vue.js in this case to work with the card button so when we click on this one it should update a card so what i'm going to do i'm going to go into the our project i'm going to close all pages except product now let me close all the directories so you can see what is going on so here now we need to go inside the resources there we have js then if you notice we have app.js and bootstrap.js inside app.js we have the view already set up and wii u is binding to id app so it's going to work now one other thing to notice is we have a component created here example component by laravel for our usage so if you go in components directory we have this component working so we need to work and create a component using vue.js and we're going to put this button in that component so let's do that so what we do simply go inside here and create a new file i'm going to say here add to cart dot view that's it now for um we can copy the content from here and paste inside this now for now i'm going to remove this content i'm just going to say remove this class as well now template should have a single div and then inside we can have multiple divs so be careful about that now we want this button to be from coming from ugs so i'm going to take that and place here so you can see now now this is in our vgs component not in the laravel blade all right so now as we created a new component we need to register it so we have done js and here we have one component already registered so i'm just going to copy this paste here the above one we can comment because we are not using it in here we're going to call the add to cart because that's the file name when you're calling the file and to call it we can say add dash to dashcode or you might want to see a button as well so let's do a button say copy this and go to the contact only and here we're gonna paste this like this all right now if i go to the here and refresh the button will disappear so you notice here button is no longer there because our button is in the view component and we need to compile using npm uh run dev so let's do that npm run down all right so it's going to compile it all right it's successful so if i refresh we still won't see the button and i'll show you why all right scroll down and we don't have the button still now the thing is i'm gonna cross this we created a component and view is we registered it as well we called the component so the thing why this component is not working because we ugs binding the app to id app but if i go to product.blade and i try to search here app you won't find anything no results so we don't have a div with the id app so here a concept of layout comes that we need to work with so currently we don't have it because if we want you just to work we need to create the element for example if you want to use this component you should have a div with the id of app and inside that div you can call this component all right so let's do this let's create the layout so we do here i'm going to close this js file and another thing i want to mention here that when we run the npm run tab it updates the js code in public js so we need to include that file and we need to uh once we include that file then only application will be able to see this code of vue.js so let's do that so that you get the understanding how it it works so in resource we have view and then we have layouts now here when we need to create a new file i'm going to crawl call it front and dot blade dot php all right now what we need to do we need to go into the product dot blade now here if you see you notice that we have head tag we have scripts calling css is called here html code here so we need to separate the things here so what we need to do first of all i'm going to start from the top and i'm just going to get the head and all the html just going to cut it from here kind of go back to the front end like this all right now we don't have that in there the body tag also needs to go in the front all right and then we have the header which includes the navigation and preloader which is the loading component so we can also take these two with our uh front-end layout now the reason i'm taking this to layout file because these this navigation and loading is going to be working on every single page so we can work from the layout file now only the content that is going to be showing on the first page is going to be here so here now i leave this and scroll down so at the bottom we have uh scripts so you can see how we have js scripts called here and body ending and this so we can cut this too and we're gonna take this here so just to be sure things are working fine the paste here all right now here is the thing we have the layout file and we have the content here we need to inject this content in the layout file and that layer file will process that content so how we do that so simply what we need to do in the layout file we need to say at yield so here after header i'm going to say at yield i'm going to call content now this if i go to product stop blade here all i need to say that this file extends layouts dot front end so the in layouts directory go to frontend which is this file and extend that file and whatever is inside this section which is content section we are naming this section as content and section so whatever is going to be inside here going to be injected right here so we gonna get everything all right cut and we're going to put inside here okay so it is automatically going to be injected here and that's how it works so you can see that we technically have our css there we have js there only the content is in the separate page so the concept is basically this if you have some css of js working on h5 each page of your application then you will put it in the layout file if you have some particular js working on some particular page then you can add another section here so you simply say add section and you call it like anything you can give nameless scripts and then you can say section oh sorry it's gonna be n section here now if you call any js in here all you need to do in your um layout file you just need to yield again so here you say yield and you pause the script all right so that js that you have that is going to be injected here when user goes to only that page otherwise all dc js files will work all right so if you notice in this file now uh we currently don't have the amp.css and js so if we go to the another layout file here and i scroll up we have the app js loading here so we need to include it in our our layout file as well so i go back there and our scripts are loading at the bottom so i need to call it here all right the same way we need css so we pass css right here so it's going gonna be css f dot css okay now let's see how everything works refresh inspect it just can't find the element uh idx we need to add the element id app so if i go to the layout file the whole reason to creating is to have the element of id app so what we do we simply click adhere div with the id of app so we can work with view and we simply cut our uh content and put inside only the content actually so i'm just gonna cut it from here paste in here and this content goes inside there okay let's go back so i just take this we put it after the jquery load so here and also i want to include navigation and preload inside the idm so i cut this and here just right here i'm going to minimize it so that we can see it easily so now it is inside the uh div with the idea of app the content is yielding and okay so we don't need this different remove that and yeah it should be fine now let's let's see and refresh yeah i scroll down yeah it's working now you can see that our products and slider is here so yeah that's uh how it works so let's recap on this particular uh thing because it is it was uh it was bit complicated so the thing is we created a layout file which is frontend and we had an app.played you can check there as well if you face any confusion so we did this we simply added all the html from the uh template in this one only the uh css part and the link part we included here the html part for that we created a yield and we called it the content so we created the view file and there we created a section and we added all the html art there so this html using this content is getting injected here the same way if you want to have some separate css you can create section here call it styles and you can let's do that too in case if we want to so just like this add section and you just want to pause here styles you can call it anything you want but that more concise to call it this way so section styles now here all you do the same way you did the yield content in where you have your css in head here you call styles and we are looking to inject your styles here in the same way we deal with these scripts if you have scripts for that particular page you add scripts inside uh the script like here if you include any js file here it will only work on this page not at all if you add a js here it is going to be working on all pages so we have the app.js included we have the app.css included on top here and whenever we do the npm run dev it updates the files inside the public directory yeah and app.js and csn app.css and these files are we including so we can see that the vgs is now working because we is bound to the id of app so if you want to change this or use any other id you change here and then you change it here in your layout file so here we are calling it all right so now we will be working with some of the view concepts so if i go to the product page and we need to simply go to the loop where we have the products so and there it is so here we have discount here our button is going so here is a concept of props so i need to pause here two values and those two values going to set up the product either so first here product dash id and what it is going to be it's going to be the id of this product and we can pass that id just like this so i pass it like this instead of my price we call id second thing we want to make sure user is logged in or not so we say here user dash id and here we again copy paste this now in laravel we have a function that helps us identify if user is logged in and then get the user id so we say user sorry first it's going to be hot then it's going to be user and then i'm going to be id now if you put two question marks you can pass here zero now what happening here we are saying if the user id is present pass user id otherwise pass zero and we can check that if it is zero that means user is not logged in and we can stop user from adding product into the card so let's do that i save this we need to go into add to cart here and here what we want to do first thing i want to do here is create data now another thing we want is props as we are to be to deal with props another thing we want is methods so so we want to have a few functions so we want to have methods all right now we pass the product id as well as the like close the front end layout now here we pass the product id and user id so to catch these values inside props we pass two values the first going to be product id and second going to be user id and this is how you get the values now what i'm going to do here when we click this add to hot button something should happen so here i say we on click dot prevent now preventers may need to make sure page won't refresh if it is anchor tag or anything but for now it's just gonna stop the default behavior here i add a function add product to cart all right and this function we don't have right now so let's add that so we i create methods here inside it we can create a method and this method is going to be this method now as we are getting the props we can call these props straight away so here what i say is alert and what i want to alert let's get the product id so we say this dot product id all right so now we need to open terminal just to recompile so npm we're on dev you can use npm run watch totally up to you now it's going we have no adders go back to app refresh now go to the product and click here we get one click here we get two so we are getting the product id as you can see so let's proceed for alerting user i'm going to install a package in the screen to give user alert so here is the view toaster i installed this package and it is done now we go to app.js here we need to call this package so how we can make it work so to use this package what we need to do where we have this here i simply say import and i call it view toaster from view toaster all right and here all we need to say view dot use and in here we need to pause this name that name we gave it so here we say just simply use it that's it so if uh spelling should be correct so that's important so we have it now so what we can do now is we can uh check for the user so here we alerted the product we also get a user id so what i do simply i simply say here if this dot user id equals 0 then we won't do a lot all right so what we can do here is to give the alert using toaster again you can check the link for the toaster package in the description for more information so it's going to be a dot uh dollar toaster and it's error and what we want to say we want to say you need to log in to add this product in cart and then we say return no further execution all right let's go back uh we need to recompile for sure and let's see if we get any error and all good let's go back refresh so currently we are not logged in we have login register on top so let's go here to god we get you need to log in to add this product in content perfectly that's what it's supposed to do so let's log in now so we keep logging and i think we need to re register here let's sound like that so 678 register go to home page and now if i click on this this time it doesn't give that alert yeah but however it doesn't know what to do because we haven't placed anything here so let's deal with that so here uh we can't even do this way or we can say checking if user logged in all right and here if user logged in then add item to cart all right and here what i'm gonna do here is i'm going to say xu's now we have installed xuse but if you go to add.js and here we have bootstrap so bootstrap is in the same directory where we have app.gs and inside bootstrap file here you will see that we have access to xeos so by default uh laravel provides excuse so you can use execute straight away so here what are we going to do we kind of use the excuse so let's see here dollar post so we have post data and i want to create this route where i want to pass the data and here i want to pass an object and this object is going to have two values uh one value sorry so it's going to be product name let's just give you product underscore id and we have the access to product id so we can pass that through this product id like that all right now uh what we can do here we can put it in a variable so it's a response like this and we can use weight here and to use a weight again spelling should be correct and when you use a weight you need to use a sink outside so that we'll wait for it once the response there then work so okay we have the id we are passing to this route we don't have that route well we got we are going to get the response here so when i do simply instantly say here honzo dot log first response talk data so we'll see if your response okay now let's first deal with this card route otherwise it is not going to work so we go back to the ramp in here uh being to create the card route now currently i have a home route which is going back to whenever you go to cart on this page i don't want this page i want a separate page for god so we can get rid of this so here and what i do simply go into the views and then there is home blade i can delete this one like that then we go into the app http controller home controller we can delete that okay that is going to give us adder because we just deleted it so we call it cart and we need to have the controller called layer so we need to change the name and i'm going to call this as cart so we are naming it here all right so what we need to do we need to create let's see if we have the controller so if i get a controller we don't have card controller so let's create one so we say here clear php artisan make controller cards controller and it's going to be resource hit that go there all right now here we call it cards controller you should have it on top so let's copy this case here a copy cards controller and paste it because they're in the same directory they should be included now it's the index uh but we want to work on store because uh no so when user click on that particular product it is going to store in cart so we can use store method in that case all right so when we click on this it goes to store method so let's see we go cards and go in store method here yeah right there so we are passing an id if you remember so we have a tidy so we can first find if there is a product with that id so here simply we need to say dollar product and i'm going to say here product model and then we're going to say find dollar request and we say get and we are passing here the product id the exact name so i'm going to copy this from here go back here paste here and once we find it we want to get it first here now we can see this again using td like if we get the volume so if i go back here now and refresh now here i'm gonna go network so i run the npm run down again and it recompiles nowhere i refresh the page now if i go to add to cart and here we are getting the adder this time method for apply okay my method is not matching i'm doing post here and here in the web we have get so it's going to give us problem so it's going to start with post and this time let's say if i hit again if i go to network and here response so we don't have the model called there it says not found and that's something we need to be worried about we need to call it so here so i call the model here but i haven't included it so here we say use app models and then product all right now we have it and we are getting it here all right hit it again this time it is green now we have the returned data so you can see that we got the data okay great now we need to add the product in the cart so here i say getting product details and here i say um product in cart all right and what we do basically we call the cart model and we say create and we basically pass an array and all right going to have these values product product of this variety and then we're going to have here because we are fetching it we can basically pass it here so it's going to be addy or you can pause it through there because we are also getting through requests but we also need more information so here dollar quantity okay it's not dollar quantity it's going to be quantity as its array it should be like this so when you first insert quantity always going to be one then we have price and price we can get from this product here so price going to be sale price so we get sale on discover price all right then we can get user underscore id now as user has to be logged in we can use alt user and then id so this is going to provide the user details so if i go back to the database and into the cards so we have these fields i don't think there is any other so we have product id quantity price user idea that's it so here i simply put this into a dollar cart is equal to base and here you can save dollar card then we can return some response sh data all right guard updated all right for now now let's see if it works or not so let's see so go back to the site refresh yeah here let's uh go back to the condo delete home hit it request 500. okay card is not included sorry about that now we just use card here so we need to include it so totally forgot about it so here it's going to be cart let's go back and hit again this time car to update it so you should have the console.log message how to fit it so yeah we have data in card now so if i go to the card table we have the product id quantity here now if user clicks same product again and again we don't want to insert again again we want to update the quantity in that case so let's do that for that we can put check here so simply we need to say that you've got already has the product so here we say card where product underscore id is equal to the label id then we can get here first or we can get here let's say block id all right and we can say our product found in cart so if i simply uh did it this time here so dollar days with this we go back here and uh hit this we go to the network tab here we get the collection which is empty so we can check it so if i say here is empty this is how you check a collection if it is empty or not so now if i hit again it says true so the thing is we the product id of we have the one of the product i don't know which one so let's hit this one true false so this one is already there uh but the rest two notes so yeah so here we are checking this so if product is empty so we just want to do this so i simply say here we create a if statement if it is empty do this and paste inside it and then to the bed and put this inside here all right i say you're incrementing product quantity now for incrementing we need to change this code a bit so what i do is simply remove this portion and here i say uber so where the product id we know is already present so we need to pause here 90 so where the product has is this simply increments so there is a function in laravel increment and what we want to increment its quantity all right so now this will also update the card variable and we are returning the response here i have the ear moving in so here now if i refresh and now if we click on so we have one product there already so that was the first one so if i click here and go back there and click here you can see that it updated the quantity and if i click again and yeah quantity is three now and yeah that's how it's supposed to be now we can either update the price as well if you want to uh surprise getting to the number of times the quantities or we can calculate it uh on the front end so let's leave it for the front end so now you can see that we have the if i click on this one so we have second product with quantity one which is fine and there is an issue i think it's not taking the price correctly let's see that somewhere here is the problem because we are getting a product and we are passing an id and getting the first so if i go here it's gonna change this to get simply and then here let's see what values we get we simply said it here so that we can see what there is so i go back here and refresh now here we get a collection and here we have the welly and that's fine but we have more than one you can see here so we have here okay and it was going for first so it was just picking this record but on this particular point we only want one product not all so if i go to the products table if we are dealing with this product we only want this product we don't want any other product that means the conditions are not working properly so we say where and i pass here already alright equals that then get let's see what happens this time so if i uh go back hit here now we have array of one you can see on top i have one and yeah now it's fine now even we can use first as well so if i say first here so it should be fine i think let's go heat again and go back here and yes we have the same data so only once on one single product that what we basically need so i'm just going to remove this and let's do this i'm going to remove the products from the cards table so here check all delete and we did reinsert the product so see if everything works fine so i go here i click here add to cart and it insert with the price this product 31 now i add another product this time it should have separate id product id and separate different prices yeah it's working fine you can have this 842 yeah it's working fine now if i again click the same product it should increment as well so yeah it's incremented too so all right so currently it is working just fine if i go back to the code we are returning uh and console logging here and in the cart i'm returning uh the message the card updated what i want to do is i want to get the items in the card so we can display to the user check user card items user ready and we can count it so here if i saved all our user items we can see uh what we get so i simply say dd doppler user atoms what i do is simply take it on tops and just this happens and then we stop the because after dd it is not going to execute so just to check how what is being currently you put it here entitlement first now i go back here if i hit this network xhr there's one three so we have three uh three different products so if you want to have the quantity that's up to you but i'm going to leave it for a product so we have three products at it and it's giving us three so that is something we can return so here uh simply we have access to this user items and where we are passing this we can pass it like this items and the items just user items all right now this time now when you hit this it's going to be message card updated item three so now we can use it because we are getting here items three gotta did it so let's do that so what we do here uh as we are returning it i'm just gonna we go back to the two card and here i'm going to uh check for an event so what we can do basically we're going to say this dot dollar route and this is how you pass the data and component so here we say it all right and here i'm gonna say change in cart all right and then whatever response we are getting i'm gonna pass here so we say response data dot if you remember we if we go here we have items so we can pass items like that all right now let's do one more thing here we need to work uh basically because when i go here and on top we have got here so it should show us the number of products added and they check out so let's do that so what we need to do first of all i go to product blade here on top where we have the uh [Music] so navigation is in the layout file so let's go there so i simply go in the uh here in the views layouts in there from 10. blade here is the header and here we have our navigation so in our main uh front-end layout file we have the cart button which is here so it was let's see here so the way we created a component for the add to cart button here the same way we need to create for this so what i do i simply go to the components i'm going to create a new component here and this is going to be a cart dot view all right i take code from simple just simply going to copy and paste here remove everything from inside it a single day squad now we need to have the button here so i'm just going to cut from there and i'm going to paste inside here all right looks good so we have the car view i'm ready to need to register it so we go back to that.js the way we previously registered one i'm gonna register this component here so here it is cart and we can call that cart all right so we can call it there now simply cart that's it it should be fine so if i go back here um we need to rebuild it recompile it so let's do that first so yeah own dev let's see if there are any errors there is error so let's check that all right so we moved the url inside the view file so we can't use this uh approach of passing h ref so if i go to card.view file and here we are passing around like this we don't need to do it this way we just remove it like it's going to be this way now all right so this time if i can recompile it it should be fine yeah it's fine now refresh we still have our card there and that that makes sense that it's working so yeah let's show the i wanted them as a button so it looks a bit better so let's do that so i see here we already have class here let's change it to bdn bdn bdn warning and i remove all the rest of glasses all right just see the changes we need to recompile all right it looks buttons it's fine now now let's show the account of the uh items in the cart so if i go here all we need to do when it is mounting we are running something so we can look for an event here so we say this dot root dollar on and here we're going to pass the one we created in add to cart so changing cart so i'm just gonna pause here and then we're gonna call arrow function and i'm gonna call item here and here what are we gonna do we're gonna create a variable so for variable we want data and it seems like this inside we need to return an object and then they're going to be uh item count by default it's going to be empty string and here all we need to do we say this dot item count is equal to item all right so that's all we need to do so yeah that's it and here where we have our cart here we can display it so here simply bury a car i'm gonna pause this and gonna pause i don't count like this okay so let's see if we uh we recompile no errors all good we go here refresh and we got three so it is happening on click of this so now there is a thing then i click here because it is incrementing here but it is only showing three there that's not the correct thing so what we do we get all the count at the sum of the quantity and display that so go back to the uh cards here and here where we are getting the atom so we are getting item here so what we can do we can say sum and what we want to sum we want to sum the quantity so we can pause that here so i'll just copy from here pause there all right save it now refresh okay so when i click here we get the count so if we see here we have the five six seven eight nine and here it is eight all right guys what i do i'm going to remove the data and all right guys the issue here is that we are checking here for the quantity for the sum and then we are adding the product so it is checking before adding so we need to do it at last so that we have the correct count so i'm just gonna remove this and scroll down so here it is inserting and just after that we can put it here and here we are passing the user item even we don't even need to create this variable you simply can pass this straight in the array so just cut this from here and just replace it with this all right so now it is just when it is returning only then it is summing up so here now if i refresh so if i add here so we have item one and this we have one two so yeah it's it's working perfectly now okay that's great now what we need to do uh we need to work with the card page now so user goes here so it goes to the page also when we refresh the page uh if you notice we get card we don't get count the two things we need to correct so currently if i go here and click add to cart it updates there but when i refresh the page it should show us the count there and as well as when i refresh the page you will see that the navigation is not showing up and if i scroll then it comes up so we want to make sure that on refresh we display the it stays there it's so that we user can see the card if there is value so let's do that so first of all for the card we have the component i go here inside the component card.view we have mounted and where we are checking for this event and showing the count but by default we can fire a function here so for that what i do is simply say here methods and i'm going to pause a method here so get card items on page load all right and simply we can call this method here so this down this method all right now what we're going to do if i go back to add to cart here we are basically getting passing the product id and then in reverse we are getting the response so what we can do we can still do the same and what we do here basically we are going to use this code i'm going to pause it here notice it's going to fire on the same route we don't have product id anymore this time all right and whatever response is it's going to be the response data items that we need so we can we can have this and we can put it inside this count like this and then we can simply alert this item kept all right now we need to modify the function in the if i go to let's go back to the controller so here when we go to cart it goes to the cards controller so we need to go there here now so it is going to store method so here what we are going to say we need to check if we have the product id all right so here we simply say if not product id then just redone something and that return is going to be the uh the value we are looking for so it's going to be this so we're just going to copy this and we're going to return this all right so here we say items uh return all right so for current user it's gonna get the summoner down the value save that and that's that's it that should work so we have it here so we need to run the npm command here so let's do that npm run dev and i run the command can we get her let's see what is it uh okay i'm getting a weight so it's going to be a sink here so let's try again all right let's go back and refresh we get three we get three that's great so we click here it becomes four refresh the page we get four and we get four so that's great it's working so we can remove the alert from here now the other thing we need to correct is that this [Music] nav bar should be always showing up it shouldn't go away for that we go back here in the front-end layout we have navigation showing up here so here all we need to say is never fixed top okay now i had to be at a base we need to add one more thing and that's going to be quite a bit of a hack here so what we want to do basically navigate bar is going to be fixed on top and when user scrolls it stays there so if user refreshes whenever user is somewhere at the bottom we want to make sure that it goes up it shows from the top so that user again scrolls and this sticks there so for that what we can do we simply go into front end upload here at the bottom where we are including the script here i'm going to add this grip tag because we want to do this on every page so we need to add a layout file so here i'm going to say window and then it's going to be on before unload and it's going to have a function and in this function basically we're going to say that window dot scroll top sorry scroll to because we want to make sure it stays on the top so it's just going to be zero zero so once you have this in place not very fresh anywhere in the bottom it takes me to the top so if i go down here and refresh we are on top so user once on top this navigation gonna stick so the user will be able to see now if we add here it updates so yeah that's perfectly fine now let's work with the card page so that we see our item i noticed there is in this editor data function and it should write on an object so if i go to the uh the file it is saying add to cart so i forgot to return the data yeah here there should be every object returning so now if i compile this error will go away so okay now refresh and that adder is going so now let's work with the card so when i click on cart now it goes to slash home now i want to take it to somewhere else so let's do that so we go here and we're going to create another route i'm going to copy the code here and what i say is a checkout and here it is going to be cards controller that's fine and i'm going to you index method in this case uh give it a name of checkout so here we will have our list of content now this in our navigation we need to update this so for our front blade and go to the navigation options here so our navigation is right here okay we have card here and cart is here so it's slash home it says we just change it to slash checkout now we need to recompile again because it's viewfile alright so now if i go back and and click on the card again it goes to slice checkout and that's fine because we want it to go there so here now i go to web and here we need to work with this function so here i'm gonna close these pages for now cards there we have the index method all right so let's go there so i return a view here and that view going to be a checkout page so you don't have it right now so let's go there so here and resources views now you can even create a directory if you want to so let's do that let's create a directory i create a folder here so i say pages and inside pages i created the page checkout.blade.php and here all we need to say pages don't check out all right this is the page that needs to be inside single quote pages check out yeah perfectly fine we don't have check out our blades let's create one uh sorry we have it here so we can do is we can get everything from the basically what we need is we need the layout so we can copy this from the top of our product and we paste in here and then here we say end section all right for style we don't need it or anything right now we just need this it's very fresh and we have method not supported so for that we need to go back to web and change it to get and refresh now you see we have the navigation on top because it's extending the same layout now we need to put some content here which is going to display the list of products user ordered apparently we don't have anything on this page so i'm going to boot snippets it's uh bootsnipp.com here you can get the free snippets here and i have this year uh checkout page so basically we will show our content here and the order summary total here so i copy the uh stuff from here so simply what i need to do i copy the this day row and we go to our site and here content i'm going to paste this let's see if it works if i refresh here all right it is working but it is kind broken so let's correct that so for this we need css this css which is provided by this particular snippet so we're just i'm gonna get this css as well this is just gonna copy this all now this css will apply only to this page so we don't need to include it in the layout file we need to include it in this checkout blade so what i do simply here i say actually css goes on top before content so your section and here it's going to be styles and an end section all right and here it's going to be style and then css we just use it so here we have our css so i'm just gonna indent it a bit all right now as we are calling it in section styles this also needs to be inside the layout file so if i go to the front end and here we are calling the stuff i'm gonna move these styles on top so all the other stunts come afterwards so here just on top of styles here i'm gonna yield this we have it uh showing up now it's showing but it is not proper so let's correct that so we go back to checkout and here what we need to do is basically we need to it's a class of row so i'm just gonna copy this i'm gonna create a date with the glass of container i'm gonna refresh it's in the middle now we need to put some padding on top so let's add some padding so this same day here i say check out box and we can pass css right here in the style of this so here i stays uh march margin top 200 pixel let's see if it works fine so refresh yeah it's it's a lot better so we have our product we will be showing here this select tone that um we don't need this portion so we can delete that one so it's this box and these two yeah so this is not needed it's very fresh all right so let's show the products here if we're displaying our product from the con we can use two approaches here one is using larval or the second is using vue.js so for pgs we need to create a component for larval we can display on the same page so what i want to do in this i'm going to use vujs for this particular project so let's do that so what we need to do we need to take all this code for which is responsible for this and we need to create a component for it so here i go to the code and here in components i'm going to create a component and it's going to be check out dot view and i'm just going to have the template as uh and we're going to have a dave inside and there i'm going to put all the code from here i just cut this all from here and we just could take all this to inside this all right now we need to register this otherwise we won't be able to use it so we need to go into app.js and here i'm going to copy this and i'm going to paste it here this time check out and i call that checkout so for using it we need to go there and blade and here we're gonna call check out and it should work now we need to run compile to npm run dev so i'm just going to compile it now if i go back it's showing just fine refresh it's loading here i need to have a script version i'm going to add script and then here we're going to put export default inside it i'm going to say data and this data will return an empty object for now i'm going to remove the terminal minimize it for better okay so now all right so here we need to have methods write a method which is going to load all the content so it's in your created and let's get all the uh products so i say here method get card items all right and i want to run this let me create it so here get card item okay now here uh the same way we did work with uh here we're just gonna do the same way so i'm just gonna copy this from here and go back to check out now here if i use a weight i pass here sync and here we want to get check out so currently if we go back here we have checkout for the page and for here what we need to do we need to need to change the route so i'm saying get items all right and here you're not passing anything so wherever we get in response we can see console and we pass response inside it so as we are using vgs instead of laravel because when you load the page you can by default past values for larval but i want to show you in vgs so i'm doing it this way now we will get it here now let's pass this so that we get the valleys i'm going to pause this method to get i go here web now here i'm going to copy this and paste here and i'm going to again copy the route here and i'm going to change this route this now we need cards items so here we can go in cards controller and here you can see basically we can use a index method for it but it is already used so what i do it go here at the bottom and i create here uh public function i get card items for checkout all right so this function explained by its name you can put any comment if you want to so we just can have this way all right so here currently i'm going to say return one to three i'm gonna save this go here now we need to pause this method here in our call so here we are passing name as well for now i'm not going to give a name to this one so name is only required if you want to use it in any of your anchor links so otherwise you don't need to pass these so here we have it and it should get one two three so let's see so we go here and one moment we need to check so it is going to run on create so it should be fine so and we already called it here so we registered it so only thing we need to make sure is that we recompiled it so okay like refresh and here we have the data and one two three is coming so now we can get the data so we go back here and current now we have query there already so let's see uh so we need very user id currently we were getting the count here the sum so i'm just going to copy this query i'm going to take here paste here and i'm going to say your card items all right and it's going to be this where user id is this some quantity we don't want that way we just want where the user enters this only get so we just want to get everything there so whatever comes we want to first see then we will do the calculation and after that we return the value so that's the dd here and now let's see so go back here refresh and now it's needing so items we have here uh this is the area of three and we have the item quantity here given so let's do this let's get it done so for that what we need to do and go back to the controller and we need to loop through this so here what we want to do we're going to say for each and whenever you forage anything it's better you always check if there is value so if is set this value all right so that if there is value only then we perform that operation and we pass here for each then i pause the variable inside it so card items as card item and here for now i'm going to our dump and let's see what we get so we should get the card item so all right so if we go back to the browser here previously we were getting the values like this so if i try to get the uh product id we should get it now here straight away so if i say product underscore id and save this and refresh and we get the id now there is a one problem here so if we see here we have product id we have quantity we have price we don't have the product name so here we need to get the product name from the table so here in carts table we don't have product name it is in products table so we need to define here the relationship and from there we are going to get the names because we need to display the name here the particular product is purchasing and here the total there we are using cart so we can define the relationship and card model so i go into models in there in car.php here we are going to define a function and this is going to be the relationship so you can add a comment here our relationship with product and here we say public function product and what we want to do we want to return something so here i'm going to return this and then the relationship has many i'm going to pause here product loss and reference going to be by id it's a product id in a card table it is product underscore id all right so card can have many products so card has many products and in card table it is product id in products uh table that is id so that's a relationship going to get us the data now we need to have it included as well here so it is on the top as well so make sure you have it otherwise it's going to get better now if i give back now currently if we go and scroll down here we have a empty array but now we need to get the data but as we define the relationship it's not going to fire automatically so we need to call this uh variable relationship so for that i go back to cards controller here we going to say width and in width we pause the relationship name and here we get the product now it should have it so let's let's refresh items this time we should have okay you can see relationship now we have product here and the first is the product id2 and we should have the product id2 you can see here the detail of product id2 and the second product we have is product 93 and the details of product id3 so yeah it's working just fine so we go back to the code editor now here what we can do we can get this detail so firstly we are getting the product id so we want to show the product names here so let's do that so for that what we can do we simply i'm gonna copy this so for that i'm going to say product and then name this is going to get me product name product id the same way we need sale price and quantity sale price and at last we need the uh quantity so quantity all right so let's see let's refresh go back and we have name doesn't exist so let's check there so here we need to create a new array where we're going to get the product detail product name and the total so what i do here i need to create a variable dollar final data all right and here what i'm going to do each to the time when we deal with that product like this card item so it'll be a product id so i'm going to say okay new array and then we pass here product id and then we need to pause some details so here we will pass some data okay so let's pass data one by one about this product name we're going to check about this in a moment i'm just going to comment it for now here what we want to do so product id so each product with the id going to have the data so here i'm going to pass name and for name we are going to get the name from here so for now i'm going to leave it in this string i'm going to copy this in here paste it here again here i'm going to say um sale on the score price okay so we have sale price we get that yeah it's pasted here then we are also going to copy it again here we are going to say total so the total for total we have sale price and we have quantity so we're just going to get this and here we're going to multiply it with this so we're going to get and save there so i'm just going to remove these two all right so we get the uh product id here and also the details we need now here we need to work with the uh name so let's do that so here we have the wardump so i'm going to recommend it i'm going to remove the name here and i'm going to check for this first so what we do we simply say here um if this relation is there that means we have the name for the product because that is required so we put it inside condition then we put it like this okay and then we want to wire down this all right let's go back and let's see refresh now we get some data here to see what is in the data we say here echo and pray so that it displays in vertical order so we can see a bit clearly so here we have array of data and then zero index and then we have inside their values so that's why it's not going straight away so what we can do here we can simply say uh for each product as simply card product all right and then we can pause this inside here as a card product and then we're going to check if we can access to the name here so let me say this go back refresh again this time you can see we have object and then we have already so by the name so let's let's get the name here so as a name let's see if we can find it out so so we get the name here that's good all right so yeah so what i do uh here we need to do basically if i go back and remove this so we have names and everything but we don't have the id actually we do have id here okay okay so we have id so what we can do we can compare the id and then we can get the name so if i go here you can see vrd so all we need to do here is we say if this product id is equal to the card product id because we want the detail of that particular product only then we are going to insert it so here i'm gonna cut this and paste inside it all right i'm gonna remove this word up now so but this is equal we want to deal with this and this time we're gonna call him so we should be having name so now let's see if our new array is working fine so i'm gonna we have it set here and you find layer here so here we just check the new range data so save this refresh so you can see here we have the product id2 name is this sale price is sharing null now total zero so we have the product id so let's say your cart it's product 92 if i click on it it is at this product so if i go back here 2 is the same product i made a mistake here we go to database we have price here so i called here field sale price so there's no field sale pricing caught so that's why it's giving us a problem so here we need to remove it and make it price and this time we should have things fine so go back refresh go back there so you can see that we have the uh total chewing up here so if we what i do here i'm going to take out the one tab and out here i'm just going to open this there all right so oh sorry we need to check here actually so inspect refresh here items so if i go side by side you can see here uh so we have 8 42 three quantity and three times is something like 2500 then we have 860 685 which is one so total is this and then we have 666 which is one quantity so total is this so yeah it's doing the calculation and this is the data we need so and what we can do uh we can also uh for ease for handling it easily easily going to copy here one more time and also going to pass the id inside as well so in case we need to access it that way so now if i go back here refresh we should have all the data along with id so you do it there as well and here as well so id name uh sale price total okay great now let's do this let's display this and another thing we need to show the quantity as well because uh so yeah in the cards you generally see the quantity so now we need to get the quantity to realize so we're just going to copy that and paste here and i'm going to pause quantity here and here and refresh it should be fine so quantity is null and that's issue again why is that let's check it sorry so this is what we need refresh yeah now do we have the quantity one one one okay now let's do this now let's return this data i go here and here we have this array so i remove the dd and instead of returning this we're going to return response json and here we're going to pass the right there we have so i'm gonna pause your dollar all right now if i refresh again and go in console log we have data in uh console data now it's showing up here like this and we can work with this data so let's do that so we go back to the component this time so code editor i go to checkout.view so this is the console log we are working with currently so what i'm going to do um so what we need to do basically we need to get here items as a variable i'm going to call it empty array and here i'm going to say this.items is equal to response.data now to see it is assigned incorrectly we just copy this paste in here save it and update and if it is working fine then we can look through now here refresh console.log and we are getting the value as you can see here object and each object has value that's perfect so let's go back here now we need to look through this so we have items so here uh we need to first i'm going to show you here so select your hosting plan then where it says so here we say uh products in your cart something like that now here we have three we don't want three so we need one here two here and three here so i'm gonna do remove this here and here i'm gonna expand this now here i'm going to run v4 loop in vgs i'm going to pause items so here i'm going to say item in items now when we use loop like this we need to pass a key plus key is equal to uh item dot id so we have id and item so that's going to solve the problem here now we need to pass the name so here for passing the name we need to put curly braces like this an item now we are getting name as let's see here so we're getting name quantity sale price total so that's what we're gonna do so it's gonna be done name all right now here we going to show the name here total so here we go copy this and i'm going to show here like this and this is going to be we should show here quantity so we say your quantity and that's what we're going to pause as well simply quantity and meaning sale price so for sale price i'm just gonna pause here like this so this one is here so we simply cover this and here price is better i think in here it's going to be price all right then for seeing the output we need to compile it so let's compile it and let's see how it looks no letters go back refresh and we have product name [Music] quantity and i made a mistake again i'm calling it price but it was not price it is sale on the score price so that's why it's not showing there so if we say here it's the sale of the score you price to pass that here that should show the prices so we are telling the user you have these products three products in your cart quantity one quantity three quantity one now this is the price for each in here we need to make it tall so let's do that so let's go back now for this what we need to do there is the issue we are looking through with this dave and this other summary is innovative all right so we need to re-loop that i think so we can loop through here as well and this time we will be calculating so let's do that so i'm going to copy this loop um i'm gonna go here so other summaries of this kind of widget that is covering complete div and here we have three so our summary and we have the website essential we don't need this and then we have total and totally something we need so now we need to look through the this portion so we pause here loop and item so i call it summary summary out and i'm getting zero copy this yes here too now here we need to pause here the total so we want to show the user what exactly is um it is working so it's going to quantity into sale so i'm going to do it that way so quantity and that's um you put it like this you put this down want quantity and then x uh price now what we can do here we can break it so it's easy to read so heroes stands for quantity p stands for price and here so paste it this way this becomes price there okay so here is going to be the totals of this boot so here it's going to be one month is below so we need to pause it here so it's going to be equal [Music] and we are getting this value as total so i'm going to pass it as total [Music] all right so it's going to show it like that so that's good let's update and let's see how it works the wires refresh okay so we are saying it it's not looking that great but we have here so what we can do we can put this quantity and product here at the bottom and the total on the top so here let's do that so i go back to the code editor and i'm gonna cut this where it says one month i'm gonna put it here quantity and that's all right so yeah it should be fine this time and the price so it was sale price again i had the price sorry about that so i copy the sale price and paste here update this refresh all right so price this quantity one total here total here total here now we also need the it says personal we can pass the name so personal we can pause this let's try this and it looks sensitive name here simply okay looks good now we can calculate total here or also we can calculate here as well because we are already dealing with it so let's do this let's calculate here so what we do we going to pause here and just after this i'm going to say total you know using total here so this is going to have the total amount and what total am i going to be we have days so we need to get the variable here so it's going to be um amount it is going to be zero you know what we want to do uh we're going to say here amount dollar amount plus equal this and whatever dollar amount becomes and we're gonna pass in there so and let's see what happens actually so if i go here and refresh and now if you give an item here and see here we have the total 38.77 now let's see open the cup later and we have the first sale price a total of six eight five then we have two five two six and at last we have six six six and which is three eight seven seven that's what we're getting here so that's perfect as we're getting the value we can simply show this value here so the user can process so we also need to remove this and in object this time we have item total amount straight away so if we passing data straight away so just display the total we can say items don't total so here so here i'm going to say now the another thing is you know why we have this so we need to put a check here so it's going to be this uh we name so what we want to do here will be if and we're gonna pass this so if this name is present and then show the detail so for here if we're in this we don't have a name so it shouldn't show and we are passing it here so should work there is no other and then we have the total yeah so let's refresh and it's working now so we have the name total and the total now let's deal with the and i think i'll notice it's the same thing happening there as well so we correct that as well as we create a button so let's do that so here what we want to do just the same way summary name so here we added this and here we have planned data so i'm name if we have item name so we pass here we if our name and the other thing we want to do now is the button so let's do that so here it's going to be in place and the button inside it has a hr on top so it should be fine and class i'm gonna add text right and it should separate it and yeah it's looking better all right guys at this point we need to take the address from the user so that we can make the payment so for that i'm going to go into boot snippets website and here we have the html and this is the address form and then we have the card details from here so to save time i'm just going to copy this so what we can do we simply get this div here i'm going to copy this and go into our component and here after this box dave i'm going to add it here now on top of this here we have the coal md6 and all this is going to make it uh small so i'm going to pass a class card here and uh now it will look fine so you can see that it's yeah it is totally fine now so i'm just gonna uh indent it a bit so it is now it's article lg8 now also we need some css here so i can copy uh control all from here and i go back to component and there and check out blade we cannot see this so here we can pause the css for address and payment form so here we can add the css and uh yeah this css will make it look uh better so let's save this now i'm going to compile it and let's compile let's see how it looks so let's go back here now i'm going to refresh so here we have the products and here we have the address form and the payment we can improve the designing and i will do that as well but for now what we need to do we need to get the user detail so that we can process the order so i'm going to remove this placeholder button from here because we don't need here all we need is that once user provides these details and then click this placeholder then we go to the stripe and charge the user i'm going to move this inside here to a little bit better so just simply gonna go here and i'm going to remove this card glass i need to remove this panel lighting and i'm going to i'm just going to cut this and i'm gonna go you know this day and paste right here all right now here we compile now go here and we have shipping address details looking the better and for the secure payment we i can add some spacing there as well so simply search here secure payment it's here it's a panel heading i'm going to change it to let's say i'm going to pause here in hr and compile now we refresh the page here and it's a bit better so we can even pass uh some spacing there so if i if you want to be over here you can possibly hear here compile refresh uh now it's a bit better now let's get the details so what i want to do first i want to create a function that is going to deal with this detail so we need to have the simply what i'm going to do i'm going to scroll down and here i'm going to get the function and this is going to be get address or we can better say user address all right and we need a user details so to make it we just ready we need to put where you've also got into vjs so let's do that so here we have the first name now we need to use v model in this case so we're gonna use that b model and we're gonna call it first name then we need a b model for last name we're gonna pass here it's gonna be last name then we have address here we wanna check for uh address so it's going to be address simply and we need city all right it is coming from input and here we want to pause city then we want to pause state and here we're going to pause state now after that we have zip code so we say zip code all right so that much information is enough for now uh let's set the phone and email as well so it passed days and i call it phone and at last i'll be model for email so it's gonna be email all right so now we need to check it so let's go here all right so we need to put all these variables one by one here so first first name we need to be empty by default then we have last name by default and then we have email we have phone and what else so we added here why do they collapse this panel and we have this uh we have address city state so let's get that so we have it all right and let's see what else for address uh [Music] it's an input asking address okay and then city and state then zip code and then phone an email okay all these codes here all right so here uh that city state and zip code okay now we have these so we can validate these as well so i'm not going to go in deep validation in this video so i'm just going to check if user providing first name and address and if it is providing we are going to process so uh let's do that we using plus simply gonna say if so here this dot it's going to be first name is not equal to this and now we can do any type of uh validation here make it more complex check for correctors check for length and everything but that is going to take more time and going to make this video long so we will do that and to improve it but for now i'm just going to do it this way so these two things are ready that means we have user address details then we want to next go into the secure payment here we want these three fields all right so let's do that and here what i'm going to do i also want to pass the variables there so first of all let's check if our phone is working so this method is going to be called when we click place order so we go and see where this place operates it is right here i'm going to also be our tag there and here in placeholder we can pause me on click dot print and function goes right there all right so it's gonna it should work so here if these things are present all we need to do for now is alert so alert username all right so if this is doing it that means we are working uh things are working for us so let's make it work so compile it and then we go and refresh and uh all right so okay so we inspect we our form is lost now so we go here and it says that property method last name is not defined an instant but all right let's scale the last name and here okay here i'm just going to copy this now and i'm going to pass it here and this is going to be country all right so now here we're going to pause country and we can use the country as well i haven't removed this place order so we need to remove this one so i'm gonna be cut this from here going to remove this completely and then we will be left with the place order uh if i search here please so we have here and this is the one where it should fire so here and pause that function so now that should go and work so now then recompile and then we go back and refresh and we can pass these fields here and pass here any data just random data and here city state pane now let's say place order we have the first name all right so it's getting it the same way we can get the uh card and it's going to be card number then we're going to pass the b model for gonna pass it here just like that i'm gonna call it cvv here for select we're gonna call uh this is the month so month then we have here year and year basically we are getting the expiration date so here we can get that so we can say x vibration month and same way x minution here and it's uh here so simply plus here remodel card type all right let's add these so we're gonna pass these here it's gonna be car type empty string then we have expiration month empty string and the exponential year it is empty string as well and the other thing was cvv card number i hope this was it so here here and this dot card number and this don't see preview if this is then we say process payment okay so here else what do we want to do we want to just for now um if you remember we use the uh error to add to cart over here uh here so the same thing we can use there too so i'm just gonna copy this from here and i'm going to pause here so the message is going to be changed and this is going to be user info incomplete all right so it should work i'm gonna save this go back there and let's see what happens so first [Music] refresh so if i go straight away and simply hit it it says user information incomplete so let me make it here so you know so i'm going to hit it and it's there so now and we need to provide the information for that we need to process it so here we are going to again use the xu's uh the way we used here to god so the same way i'm gonna copy here and i'm gonna paste here all right now here what we're going to say we're going to say process user payment so this is going to be the route it's going to be post i'm going to make it a sync and [Music] the data we need to pause that's uh this that's something that's going to be huge here so let's do that so uh let's get the data so simply what i'm going to do i'm going to copy everything from here simply like that oh that's too goddamn responsive i'm just gonna get this this is going to be first name this is going to be last just like that so all i'm doing double clicking on it and then adding this single quote because this information we need all right and now we need to have here this dot so i'm just gonna uh so we can do ctrl d to select these all and put like this now after this we can put these so they start first name and let's start last number so yeah so we have all this detail we are passing and the response that we're gonna get we can console log here so simply say console dot log the response down data all right let's create this row to it just copy this from here go into the web dot blade here i'm going to i'm just going to paste it here first then i'm going to copy this and i'm going to paste here now we can replace with our out right there now we've learned to post data so it's going to be post request and it is going to be uh going to be through cards and we want to make a payment so i say process payment method so we're going to create this method so let's do that i save this go to the controller now here we don't have this method so here and simply we need to go at the bottom here i'm going to create it public function process payment all right it's going to get all my data using request so let's see if we are getting the data or not so you simply say dd and here dollar request and i'm going to say here all point is to see if we are getting data or not so let's do that so here everything is done so we are passing data from here and yeah waiting for the response so here in cart we are just doing it so now first i want to run the npm run dev and after that we're going to check it so right around dev and then we go to the browser now what we need to do i need to fill the information here first we need to log in okay we have this it's redirecting to slash home uh let's quickly fix this this is basically happening in the art controller if you go here and so we are logging in and if we go here in this file it is here road service home it is redirecting to so what we can do we can do uh go to this file it is inside out providers route service provider so let's go there so app providers road service provider it's home here so if we want to redirect user to uh home page we just bought slash here so that should fix it so all right let's log in and you can see now it is redirecting to home page so that's it's correct and refresh now if you face some issue you can once you change it to home you simply go into network sorry storage and then cache storage and there whatever data you see just remove it and then log in again so it's now working for us here so we have a cart and yeah so we go to there and here let's deal with the address so put address here as just random text for now and say state save so we just want some information there email now we have card type i say visa video number 2678910 one two three four five six i think these are sixteen so let's see we've been going to three expiration nine year that's 25 and let's set place order okay so thank you here we have payment and here we're getting the data so let's see if uh beginning all so we are passing data from our component so here check out component so all the wheels are here so if i match it with this we have first first name last name address city state it's a code email phone country contact uh contact five and we have expiration month expiration year cbb and card number all right now this is the time if we have the data we can process the payment so let's do that so for that what we need to do so let's go to the controller we have the cards controller here and the payment method is here all right so what i'm going to do i'm going to get uh the values to variables so here as we have it we're just going to copy this and that's gonna help us to do things quickly so just gonna do it this way all right so here what i say is a dollar dollar first name so dollar request and then get and inside get we passed these all right so we need to just paste this and let me change this as well as the dd we don't need it anymore save this now what we need to do we need to go to a site package and we click here now here we have installation and we need to include this in composer.json so let's go there so simply i'm going to go there and i'm going to get back to the documentation so it says require array okay so this is the require a good comma here and put this here right there okay once this is done we need to run composer install so yeah we can do that and just cross this and here i run composer still okay um okay so we need to run composer update i'm just gonna do that in that case here so now it is adding it so you can see here it added it so we have it and now once we have it so for integration we need to go here config app and we need to add this in the provider so let's do that so config app.php so let's go there it says config app.php and here they said in providers right so providers are here and here we can add the provider you can face here all right so let's save this and what else we need and his releases over here so that we can use this word for class calling so here simply i'm going to add at the bottom just after you like this okay and save this so we have we just saved it so yeah now we can use it so let's see how to deal with it so if i give it back to code i'm going to cross this and when you use the add new classes it's better if you you don't want to face any problem just from composer dump auto load however it is not required every time but just to be safe side it's like the clear here now what we need to do here we are getting this data and for now i'm not going to validate it and just straight away going to process the payment and later we will add the validation so here we're gonna process um payment okay so for that we need to go to another site which is uh believe no stripe okay so strive.com now you need to log in so i'm going to go into the dashboard once you have login you will be here that's data and you go into payments and there you are going to get the api key that is what we you have developer options here so here when you click you get the api keys from here so if you click here you have public shareable key here and you have a reveal test key here so this key we need so what i'm gonna do i'm going to take this key okay continue and it shows the key we just copy the key by clicking here now we go here here in our project here what we can do we simply go in the env file in an env file i'm going to say uh secret all right and equals to i'm gonna pause okay we haven't copied it so click and now just copy it so just copy and paste here all right now we will be using it in a moment so yeah that's it for now now in our uh main package side we are done we have the api key that is fine now let's deal with the payment so what we need to do so here we came back to code editor and here we need to call the class so to call the class we need to say [Music] stripe and then we say here peak and inside make we are going to pass the env function and it is going to get the parameter and that parameter going to be the name of this uh stripe key or secret so i'm going to pause the key i save it copy this close this file pause there all right it's going to get the value from there i'm going to call it stripe here and then we can forward the steps now what we need to do here first of all we need to generate a token so for that here i'm going to say dollar token equals and all the strike and here we have functions from stripe so it's going to be tokens all right and then it is going to be create all right and inside create what we need to do we need to pass an array so array of values this time and these values going to be the column details so here whatever value we're getting we're going to pass here so here first is number all right so and then we have to pause expiry month so this goes like this and we have expiry underscore year the expiration month and policy her dollar days and then we have cbb that goes here expiration year i'm gonna pause it here all right and the first and last number so card number is here so let's get that and that goes here all right so this should create a token for us and let's see what happens to fi didi here don't talking i need to make sure we have stripe included so because you are using the clasp here so on top i just simply say use stripe all right so it's going to get the access to it now we're passing the car details here we need to change one thing it's an array and it's a car detail so as it is a car detail we can put inside a cod so that's what i need to do here so i'm going to say that card detail like this and then i'm going to pause here all right now it says unexpected okay i think it's also good all right so i'm just gonna cut this and paste like that all right so now we don't have any error it should give us the token so okay let's do that so i go back here and now let's get the so we have all the data already pre-filled so what i do simply i'm going to click place order and we get okay c we see it again and your card number isn't correct all right so if you follow the documentation here say my open link here uh they're suggesting this number for testing so i'm just going to copy this for now and i'm going to paste in in our code so what i'll do is simply paste here all right and hit now and this time we get the data so we have id which is a token it's object token and then further details here all right now we can use detail to work further so let's do that so what do we need to do here uh if you have the token id you're going to check here okay so if we say if so we need to return header as well so here if i say not dollar token id because we just saw that there was id so here we're going to say session flush all right and we're going to say enter and then the add are going to be stripe token generation failed something like that and then we simply say return now this process if we pass this if we get the token so here it is so if we get the token the next thing is we need to register the customer what we need to do we need to create a swimmer so we say create a stunner for the record interesting stripe so here we'd say dollar stripe is equal to um sorry dollar customer it's going to be because dollar stripe is going to be you need to use its dollar stripe and then customer customers and then create all right now here again we need to pause it array semicolon after this inside and then pass an array and this time we don't need to put inside column b or something like that or use or anything we simply pause the values so we hit pause here name now in our case our name is coming uh first name and last name so we just need to put it like that so here first name and then done let me play your last name all right then come on similarly second his email now for that we have dr email so yeah then we need further his phone in here dollar phone then we have address all right address we need to provide a bit differently here we are going to pass line one and that's going to be dollar address that we have because we have postcode city so all that goes here so it's gonna be post doll underscore code and this is all in the documentation of stripe so you can check there if you have any doubt and currently i'm just using the local variables i'm not creating the class variable we can do that to improve it but for now i just want to make this payment work for now and later on we will improve it so our postcode we have the zip code i'm just going to copy that from there is here after that we have city and our city then we have state dollar state and then the country and that's the dollar country and let me see if i have all these variables the same way your state city your country and yeah all that's fine it should be fine all right now after address we have shipping this is therefore we provide here so you can skip as well but i just wanted to demonstrate the everything is in the documentation so here i'm going to pass name again or what i do simply is simply copy the name from here all right and then here we pass the address so address goes inside shipping so it's gonna be like that okay that's easy now here we want to say source and the source is something we need to pass dollar token id like this okay so just going to generate a customer for us and once it has it done we're just going to generate a customer id so once we have customer id we are going to charge the user so here we put uh [Music] code for charging the user uh via client uh let's try so here we need to say we say dollar charge is equal to dollar stripe again and we use drive function charges charges we pass here create and again create takes an array and here the first value is customer all right and if our this code worked successfully we're gonna get a customer so it's gonna be dollar customer and there we have the id for that customer once that is done second thing what currency we want to use for payment so we want to use here usds is simply usa all right then they're going to be amount and we need to check that let's put here one now and then we put here description all right the description going to be the the order details so payment for the water okay just like that so we i need to check the amount here for currently when i pass process payment here we are not passing amount and that is missing things we need to correct that so here we got somewhere and it's here semicolon goes here okay it's fine now now let's get the amount as well so what we do for a mount i go back to the uh check out and here in the form so so we are passing everything from here so what i can do is simply as we have the data stored here items total amount we can simply get that so it's going to be like total yeah it's going to be this way okay so we can call it it's better to call it amount so that's going to be clear it's going to be amount that's going to be passed as well now now we'll go here now we need to cast the amount as but also just copy this and here we pause amount and that goes here an amount and this variable we need to pass there so that goes right there all right so yeah it should be fine and let's see what happens so here we go and here the dd color charge let's save it now we have everything again here as we did it previously so i'm going to hit place r we get our undefined source and this adder we got source i made a mistake here it should be his string in quotes sorry about that let's try again please order okay look how we i had corrected here i'm going to be also out there too so missing required parameter amount okay so we have the amount going here and that's fine but uh if i go back to check out here i made a mistake so if you see i call items now we can't access items like this because items is like this items so we need to pass it like that so this item stop total and now it should work and we need to update it as well npm run down otherwise it won't take effect and uh and how it is uh compiled now here we need to refresh but before that i'm going to copy the card number you're gonna need to use the same one for testing say here all right let's put the demo content and here address the name is roger city state zip code phone number email gmail dot com card type visa card number cbp103 now let's put the expiration month here and hit then we go here this time it took time you know and now it gave us the response we have and if i go back to code in the controller this time it is happening at the end for chart so if i go back to stripe here and refresh and we have a payment you can see a 3877 succeeded payment for order and we have details for it here as you expect uh all this string up here okay so this is a test account so it's showing here like this and if you use uh for a real account it will work just the same way for that you need to use the api key for your real account and we are doing protest so yeah it's it's successful so here if i give back and here so here we have an id okay and it's charge and then id so what we can do also if i scroll down there should be more uh data here okay we also have status so we can check for that too so all right let's do this so what do we do here we're going to get the status so here we simply say if dollar charge and then his status is equal to whatever the status we got here succeeded we're gonna pause it here and then we want to uh remove this we don't need it here or we can say else and then here we can throw the adder so for now i'm just gonna do the uh dollar charge for now right but here uh we need to work with the our order so what do we need to do so we need to uh return some data that is going to unset everything from the so let's do that what do we do so if i go to database so here uh let me open the google host slash php in my admin all right so we have normal shop here and we have card here right so currently we have this a user created order and this is the total what the user is getting so what we want to do we want to delete everything from here for this user and also we want to add a new table where we want to get the processing because we received the payment so what we want to do here we want to capture uh capture the details from stripe so what details we can get so for that we have already dd there so we can use that so if i go back there so for stairs we are checking after that we are also checking uh we are getting id so we can get the customer id so here i simply say dollar customer id and that's going to be here like id so this is going to be for your record and it is from stripe so i'm gonna add stripe here also we need amount so what amount we charged so it's gonna be amount received and simply i'm going to take over charge and pause this now rather we have uh yeah address details if you want to capture that we have created a currency so any detail you want to store you can get here so it'll be basically guys so before i uh here when we get the success for getting the charge from user we need to save it in a processing table and we need some details before doing that we need the order detail so that our products user purchased so currently we are only getting the user address username and the user card details so also we need to get users order detail so if i go back to the checkout.bu file we have here these items and that is the one we are looping through and showing up here i removed one item from here for now and so we have two items now so we can see the difference we have three 13 15 one here as total so these items we can fetch as well so what we do uh we simply get this items and i'm going to pause it as well i'm going to call it order and so that we can have the order detail in our controller so if i go back now here in cart so when we get the user card details as well as the name and address we also get the order details so we can simply get our detail like this so i'm going to call here order and i'm gonna take this and i'm gonna pause here so we can check this so first i'm gonna dd here so we see what details we get so that we can uh when we save in processing table we save the order detail as well so we go back here and here there's they need to stew out the space here let's quickly add that too and check out view here we have total and here we have place order so this is going to pause here one hr on top that would look a bit better so let's go back here for now it's gonna hit this and we go to the payment and we have no okay that's the issue let's go back here okay so we need to update it because we are passing this items here but we haven't uh recompiled this so it's not it's npm run dev or you can run npm and watch it in case you don't want to run it again and again but i prefer this way so when you want to only then you run it so i'm going to copy the card number because that is for testing purpose only so here country just going to pause here to enter random text for testing address city state phone number email [Music] card type visa card number days one two three month any month is fine and we we have place order hit there now we have the details here so we can see that we have name of the product quantity and that's good so what we need to do now here uh simply in the controller i'm gonna loop through it so i say orders instead of order and then i say four each and then i'm gonna say dollar orders as dollar order and here what i want to do want to say because when we loop through here it will go inside this here so we can get the id so product id so here it's going to be dollar orders array so this is the array where we're going to have the others and we're going can pass everything inside it so here we say dollar orders array and here i'm gonna pass the product id so dollar order like this we have id inside it so i think it's an array we need to access it like an array so okay so it is going to pass the id inside all right and then we can check for this if we have the so if i put comma and pause the second so we can check that both values so let's see that so we go back here and hit place order now you can see we have here okay we also passing null so here we can check a folder id so here folder id only then we need to pass it inside it and also another thing is we need to know that what order is what quantity because otherwise how we're going to process the order because it's just passing order id so here we're going to do and again i'm going to say the and simply order id like this so for each other and then we're gonna pass the order underscore id like this and then kind of copy and paste this and this is going to be the quantity and the same thing we need to pause here or you can even you don't if you don't want to do this you simply can pass the orders straight away so in my case i'm just going to pass this way so we only need two things so we only pass two things so your order id quantity one order id three uh quantity one so if that's the only we need now we can if uh want to pass it in a string so we can do this so we can say here json and in code all right so if i do this it becomes a string so here hit this and now it's a string so what we want to do we want to pause this and i'm gonna take it and i'm gonna remove this all right so we have here our data ready and so here we can getting order details and here i'm gonna where we are getting the other i'm going to pause this like that now currently we are not dealing with processing so let's do that i'm going to clear the screen here and then we're going to take we need to create the model controller and migration so let's do that so php artisan make model and spelling should be correct i call it processing and we need migration as well so let's do that so we have migration now we'll also need a controller so here controller and then it's going to be processings controller so here i'm going to pause the hashtag resource and hit this it creates the controller okay now let's go there and open this file so processing controller is here and let's first create the database table so for that we go database and their migration and we have the processings table here let's add the fields what fields we need so we need here uh the details what are we getting so here table first thing first we are getting a client so i want to have the client [Music] let's go name all right then we need the client underscore address [Music] we can you can have any details here whatever you prefer so then we also want this the order uh underscore details the details we just collected and then the amount paid so what amount using paid amount and also currency if you want to save that and i think that's that's the only thing we need so we have order details already amount paid currency yeah that's that's i think enough so here we say save this file the php artisan migrate now it creates the table we going table here processings and we have table okay so let's do this what do we need to do now now i can cross this and we're going to save this data so for that i call the processing [Music] model and we want to create a card [Music] okay so here we need to include it on top and otherwise it won't work so simply copy this i'm going to paste here and it's going to be processing all right so we have processing here so what details we need we need client name so do we have that data let's see line let's go name and then we need [Music] client discord address and then we need order details [Music] now some people prefer to put only the client id and then their separate table for all the details for that particular client that can be done too it's totally up to you and i noticed i have the wrong spelling there so it's like currency [Music] it should be like this so let's crack that we can change here currency and save now it's correct and we can also update our migration file so in the migration uh here okay across this however we're not gonna run the migration again we correct it directly but in case you just corrected the migration and you want to run it again all you need to do you need to go in the operations and you need to delete table so you will be deleting the table then you go in migrations there you will see your migration you need to delete from here and then you can run the migration again so here now be back in processing stable now here what we want to do we want to pass these statements all right we have the order detail i'm going to cut this from here and it goes right here all right it's a string so you just need to go inside just without any problem now we need the other details so we have uh you know we don't uh let's see what we get and we get here so what i'm gonna do all right so we need decline name we have client name here and we're just going to copy this as these variables are set in this function so we will be able to get the detail just without any problem so yeah exactly gonna copy this right here comma then i have client address client address is here now what we want to do so i'm gonna get this and we are we are doing it we need to encode it as well so i'm just gonna paste here now here i'm gonna remove this so we have array like this and i'm going to say json encode [Music] so the client address is going to be encoded as well so i'm just going to cut this from here and similarly uh address goes here it's going to be string and it is going to be inserted then we have a mount we are getting a mount so we have them out here as well we can use our local variable as well so let's use that all right at last we have currency so in the payment and here we can check the currency if you want to so here we have currency coming here actually because here we are passing it in uh just like this so we can't use it so we need to get it from the charge variable so it's simply going to copy this and here we want to call uh the property that we have here coming so currency it's a string it will go there it is going to be fine all right so this is going to create a record for us so it's going to be dollar processing details for now now if we have this that means we can empty the cart so here we say for now let's see if it creates a certain thing if and we do something here so forever okay i save this and go back here and then i'm gonna place order and we have client underscore name deliver property allow mass assignment so okay so uh in the models we added the fillable but we just created the model for processing but we didn't add anything in as fillable there so we need to do that so copy this from here that's the same time and possibly level and if you want to fill the values we simply pass all the wheels so okay so it's going to be client client underscore name then we have client address all right then we have order details details and we have amount and currency and also we need created the scrap okay it should be fine now so let's go back and see to go here and hit again so it goes through two we have 200 this time and let's see the table and processing yeah we have the detail you can see here we have client address it's coming everything since it is a string so you have the line one postal code city state country we have water detail amount usd graded and the name so yeah now once we have this so if i go back to the cart right we have here user id and here we need to do one thing because we need a client id as well okay so we need to add another field and i'm going to show you how you can add another field in existing table so we are not going to use the same migration file we are going to add another file so in processing table we need a user id or client id all right so let's go in processing table so we need a client id so for that i'm going to go here clear the screen here we're going to say php artisan make and that's the adobe migration and i'm going to say add underscore client underscore id and we can say the table name so the table in this process so proc settings uh table all right so this is gonna create this migration so let's go to this migration file uh it's here now in up function we need to pass uh schema so it's going to be this way and we want to say table name and in table name we want to pause the table name so we are going to call here processings [Music] and then we want to run a function and this function repository all right and here we want to say which field we are talking about so here we're going to say okay dollar table and we want to say it's going to be it's it's going to be anything you want to store integer or anything so for now we want integer as it's going to be id and the name going to be client id all right so the same way we need to copy this in going down and the only thing changes here is the drop and it's going to be column so if something goes wrong remove the skull so we need to make sure it's there now what we need to do we need to run this migration so if i say here now another thing we can do here um we are saying that add this field but if you see here it is going to add it at the end so if you want to say that i added after client name you simply pass here on the thing you simply say after and then you pass client underscore name so it's going to add there so let's pause the php arts and migrate it adds there let's go back so we have client underscore id zero all right great so what do we want to do now now we need to insert this value so across this and where we were storing it so i'm going to close this processing model and here we were inserting it so here client id from what so that user is logged in so then user can order so we simply say here client id and then it's going to be we're going to remove this auth user id all right it's going to insert this and that's what we want so let's do this i'm gonna go here and going to empty this and this time we can hit it again okay client doesn't have default value clear screen php artisan optimize clear this is going to clear the cache you can see here let's clear the cache so this is the command now what we need to do we need to refresh the page and try again so i'm gonna copy this refresh if i go back here and there's no record let's go here just put the data right okay place order go there i think i have that in the fillable so check there as well so let's go back in code and processing model and there it added available because we didn't add before so climb this karate so now it should be fine i'm gonna clear the cache one more time go back here hit it okay we have 200 go back here browse all right great we have the client id this time so it was fillable but that was causing the issue now we have here this so what we can do uh let's you have this so here clear the cart after payment successful [Music] so here is simply cart where user underscore id so when you use this again and again you can put it in a variable so i'm gonna say a dollar coin [Music] id equals this i'm gonna get this variable and i'm gonna paste it here as well as i'm gonna paste it here and then i'm going to say simply delete and i'm just going to delete the record from the card all right so let's do that so go back here place order so 200 we have here again going card there is nothing so god is empty and now what we can do also we can redirect user uh to home page all right so let's redirect the user so we have card getting deleted here we can say here return and i'm gonna pause it right here i say here message and then i'm going to pause here [Music] order completed [Music] fully all right the similar way we can pass a return statement here and this time is going to be the [Music] order failed what's our contact support something like that all right now here oh this is going to be returned one once it does so what we do basically uh this function is happening when we clicking on the place order and that is happening inside checkout so i go back here we have checkout component now here this is the response so now we need to check uh basically we need to show a success message to here i'm gonna put this so it's going to go like this now instead of e it is going to be s for success a is for error and here we need to check uh so what we're going to do we're going to say response start data uh basically we can do it this way so if i say if response.data.message [Music] so we can do this to differentiate between success message or error we can say here success and here we can say error so something goes wrong this will return and we need to pause it as well even key so here it's gonna be like this okay so here we check the key there so here or if message is equal to success and we want to do show this yeah basically not like this we want here message if we have message then it's going to be success or we can say else otherwise if it is not success that means it's not it is header in that case so we can pause here uh error [Music] and we need to get this let me check one more time here so this is i'm going to be the key and this is uh here we're gonna call dot success in the same way we're gonna copy this this time and we're gonna pause here now key here going to be header all right so if it is better it's going to get better maybe the success is going to get success and we need to redirect as well so currently it is not going to redirect so here uh we can say here basically so window dot location dot href [Music] and i want to say direct home i'm going to add set timeout [Music] i'm going to pause here a weed of 500 milliseconds and then i'm going to redirect now we are in view file so we need to recompile and pm run dev let's see what happens so it compiles all right now let's go to home page so we don't have any product currently if i go to the processing we have nothing there card is empty as well so let's add product so i add this product here go to cart and we have card here so let's add the data hit it water complete successfully and we have here uh but we need to give the time a bit more so if i say here uh you can see here so you can see the card is empty now we have one more thing we can do let's try this again so what i do go back here card is empty processing must be having an order so delete this from here as well refresh and we need to recompile otherwise it won't take event [Music] so let's try again scroll we get add to cart it has a value we go there now we want to make payment all right order completed successfully and then it redirects the user to them and that's perfect that's how we want it so it's working just fine so yeah this is it and you will have the processing details here so we can check uh this order was created on this date with amount paid and this is the address if you want to deliver something all the details are here quantity and order id everything and yeah so card is empty and everything is perfect so yeah that's it so we're going to improve it because it is currently we are redirecting it it should give the success here and there are so many things we can do in this to extend this project but for this video i'm just gonna stop now here we're gonna extend it further in further videos to make it more advanced but for now i think this is enough because it's already almost a three plus hour video so if you want to see some particular things in this project or some particular approaches or some particular feature as in e-commerce what exactly you want me to implement in this you can put the suggestions in the comment section i will try to add those in coming videos hope you like this video uh code is available for download and for your use thank you for watching and see you in the next video [Music]

Channel: Zarx Biz

Views: 45,300

Keywords: laravel, laravel tutorial, laravel crash course, codecourse, php, laravel series, laravel project, laravel php, php framework, model view controller, laravel 5, laravel course, laravel for beginners, instagram clone, instagram clone laravel, php tutorial, laravel rest api tutorial, laravel api tutorial, laravel restful api, laravel rest api for beginners, build an api in laravel, laravel 8, mvc, laravel from scratch, learn laravel for beginners, learn laravel step by step

Id: hOF2NQkkyYk

Length: 228min 4sec (13684 seconds)

Published: Mon Nov 15 2021