Add to cart with jquery ajax in django session | Django eCommerce Website | Django Tutorials

hi guys welcome to code artisan lab this is our 23rd video for django ecommerce website and in this video we are going to work on cart so first of all we will open the detail page and from this detail page we have uh we have implemented already the variations color sizes and i have explained everything in my previous video okay so now in this video we are going to add the card okay so by default i have set the value of one and when we add to cart then we will send the ajax request to the server and in instantly we will add the data in the session so we will add to perform that to cart functionality in the session okay so we are not using database we will use database only if user is logged in else if if some guest is browsing this website then we will use the django session okay so when we click on the this button add to cart then we will send the request to server and the server add the data in the session and then we will perform all the functionality okay so we will you will understand all the things when we start to work on this okay so if you have any question any query then please add in the comment section and please subscribe this channel like this video okay so let's start to do this okay so i will open my product detail page so here is my product detail page okay so in this i have i have settled out the this is our where is the this is review this is attribute okay so i've settled this value one okay now when we click on this add to cart button then we need the color uh selected color selected size and price and we also need the product id okay we we will save the product id with product name and all the things so that in future if product name change then uh we have the history for the same product okay so so here we have add to cart and now we will here we will add the input type hidden okay and this hidden will contain the product product id and the value will be product id so data so we have a data you can say data this title we have a data id okay and we also need a product title so this will be a product title okay and with the help of jquery we will uh we will use the jquery to uh get the selected color id and the selected size and with the help of jquery we will also use we will also get the price and when we click on this we will get this quantity okay so let's start to do this i have already created the custom.js file so we have a custom.js file here i have open this now i will create the functionality add to cart and here i will add end okay so okay so this is the id i will add let's add to cart button copy and now when we click on this i have also i will also upload the all code i am also uploading all code on the github so you can download the download the all the project from that website so add to cart where quantity so this quantity will be our this class this is not add to cart button this this will be product quantity okay so this will be id so i will hash dot value similarly we will get the all things okay so this will be our product id product id so this product id is this class okay and similarly we will get the product title product typer and we need the selected color and selected size okay so here we are adding we are adding the active class for selected size and for the selected color we are adding the focused class okay so we will get that so first of all let's console this so i have a product quantity product id product title let's check the functionality so i will open the console click on this nothing is performing click on this actually we need to hard refresh the page so one two and product 1 so we have a quantity 1 product id is 2 here is a product id and product title is product1 okay now we need to get the color and size okay so what we are doing here we have a focused color okay so we need a selected color and selected size so here we will get the color id okay we will get the color code uh i think we will face the color code and color id with the help of product if we need that then we will add in the future okay so let's uh let's start with this quantity product id and block title if we need that uh uh color and size then we will add okay we also need the price so product price so product price will be we need a text so this price will be product price and we need a text we will use text method okay so now we have all the things now we will send the request to the server okay so let's send the request so this will be ajax and end so dollar dot aj so i will copy the filter i will copy from the filter function i will copy this okay and here add to cart and this will be our data so the first is id so this will be our id second is quantity so this will be our quantity third is product title title fourth is price so this will be our price okay and we will let's get the context of this clicked of this clip element okay so here we will define the attribute disabled true so that when user when we are adding the data sending the data to the server and performing the server things then we want to disable this button okay and after the success we will enable it okay now we need to create the route for this add to cart and then we need to create the other things so we will open the urls.file urls.py file and here we will add add to cart and we will create add to cart functionality name it fuse dot py file we will perform all the things add to cart delete to cart not in this video but in our in this series we will perform all the things add to cart and this will be our request okay so we will return json we will simply return json we are no we are not returning the template but we will simply return the json data okay what we need to do first of all we will create the session so this will be your card product and this will be your dictionary and we will here cut and this dictionary will be string request dot post we will get the id and here we will create the title will be here we will the title similarly we will get the price we will get the quantity so this will be quantity this will be price okay so here we will be quantity and this will be price okay so our card product is so here we are sending the data we have created this uh dictionary for the card okay let's return this let's return this so whatever we send we will return the same thing okay let's refresh this it is seeing something sorry so it is saying that okay we need to do something here we are returning the data this problem refresh this okay so in this console we will check the data we will click on this and this is the server internal error something is multi-value dictionary dot okay we need to use get because we are not using the post method we are using the get method you can also use the post method but if you are using the post method you have to send the csrf token click so it is again name cart is not defined okay so this will be a card b okay so when we click on this again okay let's let's i will do this comment this click button okay so here we have a data this is to title this is the product id title quantity and price okay now we will okay let's refresh this and click this is the okay we will see the issue why it is uh great why it is clicked two times okay we will see this firstly we will create the all uh let's create the card functionality first then we will see this why it is why it is clicked two times let's use the bind method click on this okay again it is working two times okay no issues maybe okay it's working two times okay i will check this so let's continue the card okay now we have a we have sent the data and we are receiving the data now let's create the session so here we will use if car data in request dot session so in django you can use request you can use the session with request dot session okay so if card if data is exist then we will do something if data is new it means card dot session is not exist in the request session card data is not exist in the request session then what we want to do so we will do we will create the card data and add the add this card underscore p okay and we will send this data card data okay okay if data is exist then what we will do so first of all we will check the data if data is exist then we will check if if the same this id is exist if this product is exist in this session then we will cut data equal to this session okay and then we will increase the value of this product quantity we will increase the quantity of this product equal to 1 and then we will update this card data okay else what we will do we will get this data okay we need one step more we will add this data like this else if if if product is not exist in the cart then we will simply update the this update will be used in the dictionary if that particular dictionary is not exist then this update will be add in the existing dictionary okay so first of all we are getting the session then we are updating the data and then again updated data we are adding in the session okay so here we are doing the additional step if product is exist then we are increasing the value by one okay in this case in this case we have a one k one another case if user define five then what we will do okay so here we will add request dot quantity so every time if user click on this then we will okay let's start with one then we will see that what we can do okay now we have created the data let's refresh this let's click on this click network add to cart so we have a data 4 10 1 actually i have created this data before so let's first of all let's delete the session let's delete this what is wrong with this around the server again i'll refresh this okay so when we click on this so we have a 2 and the price is 200 quantity is 1 product is one okay now if we click on this again then what we will do what it should it will do click on this quantity is one but the quantity should be so the car data okay i will use my reference that i have created before this making video so this is the car data plus one upgrade card data so we are updating this card data and we are adding this okay we are doing the same thing let's refresh this again and click on this the quantity should be increasing okay because whatever we are adding here it should be added in that product okay so here what we are going to do uh we will get this we will add this data plus we have we are adding this uh plus in the session so here we will add the quantity this will be our quantity okay so we are adding the current quantity in our session quantity okay so this is our session quantity and we are adding the this current quantity so this will be your end and this also via end okay caught this will be like this okay okay now refresh this page and we will add to cart it is working perfectly but it is not increasing the quantity let's add to add to cart the quantity is 2 now let's add 4 add to cart the quantity is 4 and let's add to card six add to cart the quantity is six okay so it is working correctly now what we need to do one thing we are missing here i think if we have a oh we need to add this data if our product is already in the cart then we will update the quantity with the add to cart button okay so here we will do this let's refresh this page add to cart and the quality is fun let's add to cart the quantity is 5 10 okay so it is working correctly so we are added we have added the data in the cart now we need to show the number of products a here in the header section okay so our number of product is only one so it should show one in here in in the header okay so what we will do we will open the base.html file and i will add here the spam tag and i will add the class card card quantity okay card quantity card list okay so default will be request dot session dot card data length default will be this okay so here you can see that it it has one when we whenever we load this page it will show the current length but when we click on this it should also uh show the current length okay so we nee we will modify this with the help of length so this is the data and we will also find a get the card list total items total items length session cut okay so we will get the length and dot text here we will here we are going to show the product show the length of items not the quantity of items okay so we will show the length of item so response dot total items let's refresh this page and we are going to add to cart so it will add the add to cart this product with the quality one okay now let's go to another product let's go to this product and add to cart okay so it is showing nothing let's refresh this okay let's go to the network and add to cart this so it is showing what here what we are doing wrong here we are updating the cart so here we have a data product item two total items one here we have a data this request authentication session request data request card data request session and we are our quantity is this so we are updating the quantity okay request dot session this is our data card data else i will reference this this form i'm doing here we are need to add the p because we need to add the current data if id is not existing if id is not existing then we need to add this data in the session okay so let's add this refresh this page okay so this is the item actually added before i will go to the home and this product and add to this product so it is showing again it is showing the okay let's see run the server refresh this okay let's delete the oh my god i'm deleting the data actually but this point is valid because uh we want to add the new data if that product is not exist then we need to add this data but we are deleting every time we are deleting the first data and then we are adding the current data so that it is showing nothing okay so let's add this so what we have we have second product now let's go to the home and let's add this product and i will open this and let's see here to cart so we have total items too okay and here you can see here we have two okay now let's go to all products and go to this product and let's go to add to cart so we have three okay so in this video we have learned that how to add the data in how to add to cup perform the add to cart functionality with the help of session okay so in this view file i have added the code and in the custom file we have added the ajax okay so in the next video i will perform the when we click on this we will show the cart list okay order of our total item list then we we can update edit and do the other things okay and we will also modify the code so please add your comments okay uh about this functionality and uh like this video share this video as much as you can and if you have any doubt or any issue then please add in the comment section thank you thank you so much

Channel: Code Artisan Lab

Views: 2,396

Keywords: Django tutorials, Django, Django 3, Django 3 tutorials, Django tutorial for beginners, Django Python, Learn Django with Example, Learn Django with creating app, Django Project, Learn Django From Scratch, python django, django ecommerce admin, django ecommerce project, django ecommerce website, learn django with ecommerce project, django ecommerce tutorial, use session in django, add to cart django session, jquery ajax add to cart in django, django add to cart with jquery ajax

Id: dlYn-Tunbk4

Length: 32min 45sec (1965 seconds)

Published: Sat May 01 2021