Laravel 9 Ecommerce - Part 14: Edit, Update, Delete Product Color with Quantity using Ajax Laravel 9

hey guys welcome back so guys we are continuing our level 9 ecommerce series and now guys in previous video we have seen that how to add a color to a product okay so while creating a product we are adding the color and we have successfully inserted it okay and now guys let's edit and update this colors so when you go to your products and edit and update the record guys so let's get back at edit page here and we will add another tab called product colors and their same will be listing as the create form okay so let's move to editor so now guys let's move to web.php and go to your product edit to that edit page so let's move to the product controller at edit function here's the edit function and from here we have to go to our edit blade file done so now let's let's create a tab let me minimize this here you see let's copy this and paste here and tell product colors and id make it to colors copy and bootstrap target also you have to make it to colors all set and if you require you can remove this we don't need so just remove that once you have set your id and target then you have to copy your tab pane here and set that color tab not this this one the target id so you have to paste here done guys and if you require you can keep or else remove this not required all set so here the design will be copying from the create blade so we'll go and we will copy the whole design copy and paste so if you don't know why i'm copying you have to watch out the previous video guys about setting the colors link given in the description and now we have got the variables of colors and listed out over here okay so yep guys let's get back to our controller at edit function and here we will take only the not inserted colors okay so i mean to tell while you are creating the product right so when you created you have inserted the colors so we will exclude that color inserted one and we will fetch only which is not inserted okay so let's get back here is our product variable which we have find and with the relationship we'll be getting our product colors so let's use the relationship called product product colors and let's get all the color id so let's use plug function and make this to to array function and what you're going to get from that that is your color underscore id okay so what is this product color let me show you this function inside the product model so you need to go to your product model and here is the function guys okay so let's copy this function name and you have to paste here and now you get all the product colors here so let's tell product underscore colors then let's get all the colors also color model where let's use not in okay whatever it's not there that only we will get get function and here let's mention that from the colors table i have these many records okay i have this much record and which is not there that only you'll be fetching it as simple guys now let's pass that here you pass your colors and get back to your edit blade and here is your colors so we are looping and getting the color id this is your colors table id not product colors okay very clear and that's it guys so now let's see the output for this on our edit so here we refresh okay we have face an error like two array does not oops we have given a wrong spelling r a y array get back refresh perfect so we have got our product colors guys so here you see only three colors are displayed for this product edit let me show you the total number of colors so total we have over here five colors but it's displaying three why because we have already added the colors to this products so let's display the product colors also below and we will be updating its quantity and deleting that product color yep let's get back to the edit blade so let me just define here the like add product color this will be and just move below margin bottom three here start with another div with table responsive class table responsive here you start with the table design table dot table dot table bordered a simple table head table row table heading id and the color name we don't require id just remove that and your quantity and one will be for the delete done guys and now let's begin with the table body and i just want to add here table small table lesson table row table data color name like red and let's use a input group so input hyphen group margin bottom three of fixed width so let's tell width colon 150 pixel and then guys you begin with your input form design so input the value then let's use the bootstrap class form control small form control sm and now guys we need a update button let's use a button where button name will be update and here give a class button primary button small and text white set and then give this button type as button and you have a value inside this button also so which will be fetching the color id all set and then guys one small td tag for again a button so let's copy this button itself and paste here and make this to delete and this button design will be danger and here again the value comes so now guys let's use the for each loop and loop the stored colors so let's use for each where we are going to use the product variable let's get back to a product controller here you have got the product right so we will be using the relationship and getting its stored each product colors okay so let's tell product where it has your product colors has many product colors okay so this is your relationship which have we have is defined over here done and this is your like prod color copy this and then you have to put in input tag curly brace of quantity okay let's copy this and here you paste your color id color underscore id so why this color id because we have stored the color id right here color id and quantity so we have this color id now and quantity now and then we require this product id primary key id i mean this id okay so let's get back let me zoom it yep guys and here you paste the prod colors of your product primary id rod color id so same you have to paste for your delete button also just paste there and now guys let's check the output so be and now let's end this for each correctly close the for each all set guys now let's check the output refresh get to your product colors so here you see that your color name okay we have printed the id we need to print the name also and this is the quantity guys over here for updating will be using jquery ajax to update the quantity of each product color okay let's get back and fetch the color name over here okay let's take something like this and you need to create a relationship in your product color model let's go to our product colors here and we have a product model let's copy this and go to that product model and create a relationship with the function name color okay return dollar this belongs to relationship where you will be telling your color model colon colon class where your color id so let's paste here color id and the product color primary key id that's it so now you can access your color let me close this and get back to your edit blade file so now here you paste your foreign key name and name that's it so now you see your output refresh get back to your product colors and you see red and blue color perfect so guys what in case if someone deletes it so let me just validate that i mean let's give a condition so let's copy this product color of color and use a f condition so and now you and f okay so if it is available it will show else it will not show if you require you can add else also like no color found that's it save it this is for safety purpose guys now let's begin with the updating this quantity first whatever this quantities are there for each colors let's update this first okay so yep now first up we'll begin with update one here you tell update product color so we have created a class name as update product color let me tell us it is a button so same goes with your delete also so let me just create that class name and keep that's it and now we need to when you click on this update button you need to get your product quantity let's tell product color quantity okay and when you click this we should get the closest record what is your closest record me like when i click this update we have to get this record not that this one okay so for that reason we have to create a class inside your tr tag like this is our product color tr okay table row so we can keep a shortcut class name that's it so now guys let's copy this and get below to the end of the form and section and here let's extend the section guys with the name scripts and end the section that's it so make sure you have already yield this script section let me just show you let's go at the top here inside the layouts admin here i have already linked it okay yield it so this is your code let's copy this close your file and get back to your edit blade and paste here so now it's linked that's it and now let's begin with the script tag jq dock where we'll document ready and now let's use a jq on event so this will be a document document and the event is click so when i click and on what click that is your class which we have to use dot and the button name so my button name is update product color button this is my button and now get the value so what value you will be getting the button value that is your product color id so in this button we have stored the product color id so first we will get that variable prod color id dollar this dot val function so you will get your product id let me just alert and show you alert function now you can get back once refresh guys so let's get back and if i click on this update we will be getting the product id i mean product color id let's click here you have got id number one here you click you get id number two so which is your primary id product color id perfect so now let's begin with uh getting the product id and the quantity also so we have directly the product id so let's copy from the form tag itself and get back to the below where product id is equal to double quotes and inside this just open double curly brace and paste that that's it you get your product id and your product color id and now you need to get your quantity so let's tell qty is equal to so for this quantity we have to get the closest of its quantity so when i click this update button i have to get this quantity when i click on this button i have to get this quantity okay so for that guys you need to use dollar this dot closest function the closest value will be getting from our table row so product color row copy this and get below and just paste in the closest function and it's a class guys so you need to add a dot let's use find function to find your input so our input name is the product quantity here so product color quantity copy that input field name it's using a class so user dot and it's an input field use a val function to get a value from that and now you need to use a ajax to update it so before that we will be checking that this quantity has any input or not so like quantity is lesser or equal to zero then return false and before this let's send an alert message like quantity is required and if quantity is found then it will ignore that let me comment this and here we create one variable called data i will tell you where we'll be using this data variable let's get this product id product id colon your product id variable and your variable product color id and finally quantity qty colon the variable qty all set so let's use ajax jq ajax where now you are going to use a post method and set up the url admin forward slash your product color with id let's send the id also guys what i'm going to say it's a product color right so let's send the product color id only so copy this and you send that product color id and we don't require here so once you're sending this id y should include okay and copy this and just send here data not required the data type so once it saves send the alert response dot message so this message will be coming from your controller and now guys if you are sending an ajax request in laravel you have to send the csrf token so for that guys let's go to the laravel.com and move on docs documentation and you search for adjacent csr of token ajax here x csrf okay so you move below and you find that let's copy and paste before the button click okay this is my button click and outside i'm pasting that so what does this header does guys so it search for your csr of token in the meta tag so let me show you where this will be so if you are not included please include that if you go to your wherever your setup is there so here it is in the meta tag csr of token let's close and get back to your ajax code and now guys let's copy this path i mean let's create a route in a dot php so you need to go to your product controller and in that only let's create the route using post method why because you are sending in a post method so this will be a product color id all done and now what we are doing actually here we are updating the product color quantity okay so you are updating this product color quantity update product color quantity qty let's keep shortcut and let's go to the product controller and create a simple function let's move below guys and just create a function product color quantity and now guys let's get all the request request dollar request and then you get your product color id let me just copy that product color id you copy and paste here so now you need to search for the product id first and then we will validate whether that product belongs to that color and then we will update the record so let's create a variable called product color data is equal to your product model find or fail function where we'll be checking the product id so dollar request so what is the input name so you need to go back to your blade and here is the product id copy this product id so now guys let's use the relationship of product colors and then we will be updating it use a product colors relationship the product has many colors so if you want you can just copy from here product colors paste here product colors and use a where condition to find the id of that from that table product colors table so we have the product color id also let's copy this and send here so we got the id guys and now we will get the first record of it first first that's it all set and now you got the product colors data from here use the update function with array you get the quantity column we are just updating the quantity right so let me tell this quantity q u a n t i t y of your dollar request of quantity qty so why this qty is because we have passed here so let's copy this and get that that's it guys so it will be updated and once it's updated we need to send the message so let's return and a response in json and you can remove this we don't require and here let's pass in an array where message of product color quantity updated that's it guys so you'll be copying this message okay so here double return let me remove that you'll be copying this message and get back to your edit blade and you get the response here that's it so now guys let's test this get back and you refresh the page once and now you see that quantity six right so i'm not giving going to give any quantity now so let's click update quantity is required and now i will give quantity 2 let's update that and you will find the message okay we didn't find anything let me inspect and see what is the error let's go to the network area guys so now let's send the update function here you see it's telling 4.4 okay so we find this error let's go to headers here first we'll see the url okay admin product colors slash one it is going correctly let us check whether it's correct or not so you move to the web dot and here oops we have added this admin so it's a prefix guys we have already added at the top okay so we have already added so we don't require that so because of that it was not able to find that ajax url so now let's update once again once refresh guys okay let's go to the product colors and let me clear all the way out and now i'm going to change it to 2 22 update and you see product color quantity updated successfully okay and here there are 200 response let's preview here you got the product message perfect so now let's check in our database once refresh guys so you see that quantity 2 and from here let me make it to 3 let's update i get perfect so we see that the quantity got updated and now let's work on for the delete part done so you get back to the edit blade same concept guys everything goes same so on this delete we have to just select that the product color id and delete that specific record so now you need to copy this button name get back below to the ajax code same let me just copy that code guys i'm going to copy this and this task i mean and that tag let's ctrl x and paste here so now delete you clicked and you need to get that product color id let me just copy from top so i don't want to waste time paste here create a variable this is equal to dollar function this okay and now let's use a jq ajax to delete the record why we are creating this i will just tell you okay so let's use a get method guys to delete it and you set up your route so forward slash admin then your product color so product hyphen color forward slash and let's get that product color id so you got the product color id and let me concatenate again the url forward slash and then delete okay perfect so let's remove this data we don't require and data type also not required once you delete the record i want to delete this row also okay without the page reload i want to remove this quantity when i delete that so for that case guys i'm using this dot the closest so let me copy from above let's copy this the closest user remove function that's it so as you see that this is reading as something else so what we'll do we'll rename this as this click so you just replace the variable this click and this click closes remove that row perfect so now guys uh let's before running the ajax record let me just remove that and test it comment this and now refresh guys once so when you click that it should remove that row so without deleting we are removing just okay so i'll delete the second row delete you see that that complete row has been removed so let's refresh and now you can uncomment this code paste here all set guys so testing has been done for this now you need to copy this url and create a route to delete it so we are using a get method guys to delete this record product color paste here we don't require the admin just remove that product and you require the id open curly brace close curly brace and delete so you go to delete product color so now you copy this create a function inside your product controller the function name as delete product color and you don't have any request so just get the id product color id prod color underscore id you have the data and now let's delete the product color what color is equal to your model directly we are going to use no relationship product color colon colon find or fail function and now you copy your product color id and send it now you need to delete the delete function we deleted the record and we are using our jack so let's send this again the message same product color deleted and now let's copy this message variable and go back to your edit blade show an alert message so we need a response dot message okay so this will be our response dot message all set and now guys let's test it let's get back once completely refresh guys so if your code is not working please use ctrl shift r let's go to product colors so i'm going to delete this second row guys okay let's click on delete okay it's not deleted why let us inspect and see what is the error let's go to networks let me check the database guys once okay it's not deleted so now guys let's click on delete so you see the 500 error let's click here the class app product color not found so you need to import this class guys where is the product color you need to import class imported let me just show you here it is now it's imported now you can go on with deleting it okay so i'm going to delete the second row click delete so you see product color deleted and the row has been vanished and let's check in our database here you see the product is deleted okay product color cool so now guys let's uh once insert another record while updating the product okay so when you check with this green and yellow now i'm going to give a quantity 2 and quantity 3 for hello and now once you click on update it should insert the record so as we did same for the storing part so we'll do the same thing for updating part also so guys first step let's go to our store function so at the store function we use the code let's copy the same code guys and get back to the update function update function let me minimize this code this is for image and this will be up for the colors okay so how are you getting this at update function let's go to edit blade first let's move top and here you see guys we have looped it right we have looped it and here you see the input this inputs are nothing but this okay this checkbox and the input quantity so you get this colors input and your colors quantity we are taking this and looping that and updating the color quantity with the key of color id so if you don't understand how this is working you have to watch out the previous video where we have added the colors so we need to just create here color we are not updating it so we are updating at this place and creating at this place okay so now let me update the record update perfect so product updated successfully let's get back to the men's and you see that more two colors has been added let's go to products you see that green and yellow is added and it's removed from here that green and yellow is removed perfect so guys we have successfully completed with our color edit update and again add that while updating your product so guys let's see next video about the size or any other information video so thank you for watching this video guys please subscribe like and share

Channel: Funda Of Web IT

Views: 8,194

Keywords: fundaofwebit, how to add colors to product in ecommerce, how to add product color in laravel ecommerce, how to make product color module in laravel, product color in ecommerce laravel, how to add product color in wordpress, edit update colors product in laravel ecom, change update product color in ecommerce website, product color edit update in laravel 9 ecommerce, laravel product colors module

Id: En1_sRlcfDg

Length: 34min 5sec (2045 seconds)

Published: Mon Jul 04 2022