Laravel 9 Ecom - Part 33: Add to Cart - How to Add product to cart using Livewire in Laravel 9

hey guys welcome back so guys we are continuing our level 9 ecommerce series and now guys in this video we are going to learn how to make add to cart option in our e-commerce project so as now when we click here add to cart this product should be added in your cart okay that means in your cart table so guys now let's get started so first let's move to this page guys and move to this button so yep let's go and yep go to routes web.php and search for the path so what is the path guys that is your collection the category is mobile and the product is mi so collections category slug product slug let's go to the front end controller here at what you have to go you have to go to product view function name so move to your front end controller go to the product view function guys here is the product view and let's move to this blade so just ctrl and click so we reached here and you can see that it's a live wire component blade so where we can view the data of your add to cart so here is our add to cart button guys which is visible over here now let's get back and this page is coming from a live wire component okay liver controller so let's go to that path also guys like livewire front end product and view so first let's move over there let's go to app http livewire so here you can see frontend product view so go to front end product view so this is a live wire component controller where you can see that we are rendering at this blade okay so which makes you to reach at your add to cart button so it's the same page so as you can see that we are passing two variables one is category and another is product so with this help of product we are displaying all the products product id product name everything whatever it's shown over here so now guys uh on this add to cart will be sending the product id okay so guys first step i just want to convert this a tag into a button tag and let's make it below so it will be more clear and just make this href to type button let's wire coolant click equal to which will be the add to cart function and inside this function will be sending the product id so you can just scroll up you can get all the product details so here you see guys the product name is displayed so let's copy this variable dollar product and you can get back to your add to cart dollar product of id you'll be sending the product id at this function so let's copy this function and go to its render livewire controller component so here is our render and now inside this component let's create one function so that function name will be add to cart so which we have created just now and we are getting the product id that is end product id it's very clear and now guys first step when you add the product you need to check the user is authenticated or not so let's use if condition and else check for the auth colon coolant check function and import the class guys so class is already imported and once it's like if you're not authenticated then you have to show the message so for that guys we can just copy from above let me copy the message how we can show the message let's copy this and send it so here you send please login to add to cart okay so this is the first step and if you're logged in let's dian dump and in let's save and now you can add to cart here you see please login to add to cart okay now guys let's login once let me just login logged in successfully guys and let's just refresh here you can see that we are logged in perfect so it's logged in and now let's click here add to cart you'll be i am in perfect and now guys let's check this product id let's copy this and let's dd the product id save let's again add to cart here you see id number one cool and if you require you can just go for another product also let me go with this add to cart id number six okay so get back and now guys you need to check with the product is existing or not so let me comment again add a if condition so first step let's get the dollar this off product i mean in your render function you are sending the dollar this product right so you will get this product data in your if condition and use a where condition again where condition for the status check and then you can check with the exists function so first here you will check with the id your dollar product id if it is there and then check the status status is zero then only you are getting in else you need to show the message like product does not exists a simple and it's a warning and it's a 404 error okay like it's not found itself once it's found you are getting in so let's again dd guys here and let's tell am product let's get back add to cart and product perfect let's get back again done guys and now let me comment this here first step we will check with the product quantity if product quantity is there or not so you can use again if condition let me just copy this if here then so just copy this dollar this of product and we need to check from that the quantity q a and d i t y quantity column which is greater than 0 if it's greater than zero then you have to insert the cart else out of stock so let's copy this paste here mention the message out of stock so now when it is available then you have to check whether the quantity provided by the user quantity okay this user quantity should not be greater than present quantity okay so again guys the if condition comes let's paste here again copy and paste and this quantity in the previous video may have made the quantity increment and decrement right and now let's get back so you can see that quantity increment quantity and decrement quantity that quantity are stored in a variable called quantity count so let's copy this variable dollar this of quantity count in the beginning you can see here let me minimize all this here quantity count variable right so that variable only will be checking the stored variable whatever should not be greater than the normal user quantity given okay once it matches insert your card so let's tell insert product to cart and here you can give the message as only let me concatenate and here is space quantity available let's make it to capital so you can count this copy and paste here only two quantity available only for quantity available you can just show that message also guys and now here you need to insert the record okay so guys before writing your insert query let's check one more add to cart so this is the product where you don't have any colors so coming to the next product let me show you new tab so when you come to like clothes or fashions you can see we have multiple colors here so multiple color has multiple quantities so at that time you need to check the that quantity also okay so here you see that you have red green blue so it has its own quantity not the product quantity right so when you click on this red you have in stock when you click on hello it is out of stock right so at that time you need to do another validation so guys for that let me just uh after checking your product is exist or not then you have to go inside this first if itself just put this in an else condition okay so first use if let's break it down use again else paste it and bring this paste it down and push the code that's it guys so here you need to check the color checking okay so check for product color quantity and insert to cart okay or add to cart so same this is without else part is a without product color okay as simple so now guys to check the product calorie is available or not so you can use a count function so let's get this dollar this of product let's copy this dollar this of product where you have a relationship of product colors so let's go to product colors and just count the number of rows which is greater than 1 then you have to come inside this and let's tell um first let's dd and check so and product color inside okay so you save this and now you can see that you are in a product inside right this is the product colors these are colors of product let's add to cart you can see i am product color inside and let's get back to the previous product where you don't have any colors let's add here you can you will be directly moving insert to cart okay so where is that if condition here let me dd and show you dd and just add m add to cart without colors let's dd also here click on add to cart you can see i'm add to cut without colors and this is your width color so you'll be going in that condition that's it guys so as simple and you need to check the product color is selected or not okay so this product is selected or not so for that guys you have already worked on this like in previous videos you have worked on that color selection let me show you here color selected let me open this okay we are getting the product color id here so first let's store this color id okay let me copy this ctrl f and search for this function in the view blade here it is so wire colon click on this function you are searching you are doing an action and getting the product color id so first let's store this dollar this of product color id let's add this equal to dollar product color of id okay and make sure you are making adding this in your top variable here all set we have got the color id guys now here you see the code is written about the quantity is available or not like checking for the color product color quantity if it is available then it is adding if it's not that means it is showing out of stock so we have to work with this two functions so let's copy this dollar this of product color selected quantity okay so we are going to take this first and check here use a if condition if anyone has selected or not not equal to null if it's not selected give a else and just add the condition i mean the message let me copy from below here you copy and paste the message as select your product color and this will be the info and once it's selected you can just dd color selected okay you have selected the color now let's save so guys let me refresh once and show you directly on add to cart so i have not selected any of the colors let me add to cart select your product color okay now let's select here so you we have selected with the red in stock let me add to cart and you will get color selected cool so once color selected let's check with the the product color quantity okay so now guys a simple let's create one variable like product color equal to now get the dollar this of product your main product whatever single product data again just check for this relationship has many relationship where it has that and use a where condition and check for the specific product and get the data id of it so just now we worked on getting the id guys so here you see on color when we select the color we are storing the product color id let's get this variable dollar this of product color id and check that so we will get that specific product color all the details okay so with that help of we will check the quantities available or not of that product color so product color of quantity greater than zero else you can show the message okay so let me copy from below here you copy copy this and paste back to your else part and now when the product color quantities available then you will check for the normal user quantity so this user quantity given user quantity should not be greater than your available product color quantity okay so the same condition let me copy that below code itself let's copy this and paste back inside this if condition all right so not this instead you have to check for this product color quantity should not be greater than the given quantity count then like product color quantity okay so only product color like two or four quantity available and then begin with i'm add to cart with colors okay so let me just show you with colors save it and now guys we have already selected the color let's add to cart here you should say only two quantity available so we have given that let us get back one to cart here you see that i'm add to cart so here we have only two quantity let me just check that here you see guys for the red color it's only two quantities so let me create to four and you see that let me click again two and you add two card you get that yes perfect so now guys we have worked with the functionality like what are the validation should be done while adding the cart and now guys let's begin with inserting the product to our card table so guys for that let's begin with creating the migration and the model so open your terminal so yep php artisan make colon migration create cards table hit enter created migration let me close the terminal let me open the sidebar and go to the migrations guys first step let's go to database migration at the last you'll find your new created table that is cards and here we begin with dollar table of integer function where you'll tell user underscore id copy and paste and next will be the product id so product underscore id and the user quantity i mean how many quantity they require this user input quantity okay let's get that quantity and then finally the product color id we need to get this product color id okay and this product color id is going to be nullable also like some product doesn't have the product color right so we can ignore this let's see and now guys let's migrate this so [Music] php artisan migrate it's migrated guys and now let's begin with creating the model php artisan make colon model the model name is cart hit enter model created successfully let me close the terminal again arrange app models here you find your cards.php okay card.php and now guys let's tell the table name dollar table equal to single quotes mention the table name cards and create all the fill levels i mean add all the fillables here fillable means table input fields whatever you have given that okay user id product id product color id and quantity so let's add that user underscore id the product id and then the product color id and finally the quantity okay all set guys now you can get back to the view dot php again add the code here insert product to cart okay as simple so you have two conditions here so one is for the color product adding cart and one is for the normal product cart okay so first we will begin with color one okay let me remove column model cart model and just use a create function and directly just type all the inputs i'm in column fields user underscore id so you'll get the authenticated user id done and now next will be a product underscore id so you are getting directly the product id from the cart you are already validating it so you can just directly add this product id and next you are checking inside the product colors right so you can add the product color id product color underscore id as simple and where is your product color id so you are checking in this you can directly get this or else you can get from the product color of id also anyhow and finally the quantity the user given quantity so where is it let me just show you here when you click this you go to increment or decrement so you store the data inside your dollar this off quantity count variable let's copy that and just send that here as simple guys so this is for your color store and after this guys you can show the message let me copy from below itself copy this paste here and give a yes you see yes as success type and product added to cart and this will be your 200 status let's copy this same code and paste in your let me minimize it so this is my product color add to cart and here is my else part that is without product color add to cart so as simple and here is my code to save the cart okay and we don't have a product caller id we just need to remove that let's remove it as simple and now guys you can check the product id the user id and quantity 2 all done guys and now let's import this cart class model okay so just import its class class imported let us check that yep all done guys and now let's check our table so here you see i have already loaded this cards table guys it's already available and now let me add to cart so the quantity is 2 i have checked with the red and let's add to cart here you see product added to cart let's check in our database let me browse it perfect so you see that user id is 1 product id is 4 color id is 1 and quantity is 2. and now let me check with this product without the color okay so i don't have any color for this let me increment it to four and add to cart product added to cart let's get back to our cards table and refresh perfect you can get that user id product id and quantity so here in this product we don't have a color so we don't get that color id perfect so now guys uh when we click add to cart again then what happens it will add one more record with the same details right so we need to check that the product is already added in the cart so guys now let's get back to the code yep and here we are to cart first let's move inside the else part where we are not checking with the color products without the color product we are going to do so here before the quantity checking let us use an if condition as simple just use f and else and move this code next paste it and now guys in this if condition use a cart model colon colon use a where condition again where condition for the product id and just use a exists function to check whether it is true or false so now in this first where condition you will check the user underscore id with authenticated user id and in the second where condition will be checking with the product id so product underscore id we are getting in the function add to cart product id we can directly get that copy the product id paste here that's it so when it is true when it is already added you need to show the message let's copy this and paste here and show the message as product already added okay and it's a success message right so you can give as in for warning anything all done guys so so this is for the without color products let us get back here now click to add to cart and you get the message product already added in cart and now let's get back to the color product here we have inserted the red color right so at this red color we are going to add to cart so before adding to cart we need to validate that let me just copy this ctrl c and go inside the your product colors and this is to check let's go inside one more record and here is your quantity check right so before this quantity check only we need to check whether the product is inserted in the cart or not so just add an if condition let me break this down so it will be more clear to understand and let's use one more where condition guys for the product color id product color underscore id and the product color ide here also we are getting let's get this and paste here so you get your product color id and you will check this so now you need to use an if condition i mean start your if bracket and here end and give else part else and let me minimize this quantity part else condition and you need to move this complete query of add to cart inside else condition as simple and now guys let us show the message let me copy this message and just paste here paste it done okay product already added and now you get back so we are clicking on the red and let's click add to cart you see product already added and now if i select this green and we need to add to cart right so it should insert the record so let me click add to cart product added to cart perfect so it might be added you see cool so it's added and now let's again click on this green itself i mean to this green color itself so add to cart here you see product already added that's it so guys we have successfully completed with our add to cart functionality in laravel using live wire okay and guys let's see next video about this card counter with the card view page also so thank you for watching this video guys please subscribe like and share

Channel: Funda Of Web IT

Views: 8,617

Keywords: fundaofwebit, how to make add to cart using livewire in laravel 9, how to make livewire crud, how to make add products to cart in laravel livewire, add products to cart table in livewire laravel, laravel ecommerce project add to cart functionality, add to cart funcationality in laravel livewire, Add to cart in laravel 9, laravel 9 ecommerce project, laravel 9 project, laravel livewire add to cart tutorial

Id: Iy_KLHg4Yn0

Length: 30min 47sec (1847 seconds)

Published: Mon Aug 22 2022