shopify district theme how to disable ajax cart

what's up guys welcome back to another,edition of coding with robbie my name is,robbie and in this video i'm going to be,covering the shopify cart page in depth,so in a previous video i kind of went,through all the different shopify,templates i showed you how to create a,basic cart template,it looked similar to this where you,could um,you know update your cart quantities and,everything but you have to hit an update,button,and i can remove an item but it hard,refreshes the page,and you could add a note but it also,requires the update button and in this,video we're going to basically ajaxify,this page to where everything will,update on screen and there's no need for,this update button,so we're going to get into it right now,make sure to like subscribe leave a,comment if you have a request for a,video put that in the comments as well,and i might make it,and uh yeah let's get right into it,right now all right so here's what i'll,be starting out with it's just a basic,cart section and i'm checking if the,card is empty and displaying a message,if so,if it is not empty i loop through the,cart items and render the cart item,snippet for each one,we got the cart notes field right here i,got the total discounts and the total,price displayed and then i have the,update and checkout button at the bottom,and then i'm linking up cart.js at the,bottom this is just an empty file i,created in assets where we're going to,write our javascript,and then if we go to cart item it just,looks like this it's just a div with the,image we got the,item title the item variant title and,then we have this quantity selector so i,just took the input to update the,quantity and i just wrapped it with,minus and plus buttons and they're not,hooked up yet,and then we got the line item price and,the remove x at the end,and this just links to the remove,url,so i think the best place to start would,be with these quantity selectors so,we're going to hook that up first so,let's do that by adding an event,listener on each one of these buttons so,i'm just going to copy the class right,here and i'll go to my cart.js and i'll,go document,dot query selector all,and i'll paste in that class and select,buttons within that class and then for,each one of those buttons,we want to add an event listener so,let's go,button.addeventlistener we want to,listen to clicks and when someone clicks,we want it to run our function here,so let's just console.log to make sure,that's working,and i'll go back and refresh the page so,i'll go here refresh open up console,and uh when i click i get the hey,message whether it's minus or plus so,let's check if they're trying to,increase or decrease the quantity so go,back to my code and let's go uh,cons is plus,is equal to and we'll get the uh button,element that we're working with,button.classlist.contains and we'll see,if it contains the plus class,if we check out my cart item you can see,i added plus and minus classes,so if it does have that class that'll be,true and then let's go and do an if else,statement we'll go if is plus,if that's the case we want to increase,the value so let's get the current,values so we'll go cons,let's get the input element first let's,go const input is equal to and we'll go,button,dot parent element which is the div uh,containing all three of these,and then we'll go dot query selector and,we'll get the input,so that should be our input element and,then our value,will be,input.value,and this is going to come back as a,string so we have to convert it to a,number so we can just wrap that in,number,so that looks good,and then uh in the is plus we're going,to update the input value so let's go,input.value is equal to and we'll get,the current value plus one,and i think that's all we're going to do,for now let's make sure that works i'll,go back here,refresh,and i hit the plus button and you can,see it updates it so now let's do the,reverse case let's go downwards so let's,go back here,and really we only want to do this if,the value is greater than one so they,can't go below one so let's go else if,value,is greater than one,and if that's the case we'll go,input.value,is equal to value minus one,just like that let's try it out,and now we can go up and we can go down,and it stops at one so that's cool and,now we have to actually update the cart,when that happens so let's go back and,we'll create a new function,i'll just call it change item quantity,now let's take a look at the shopify,ajax cart api and look for something we,can use so i'll link this in the,description,but here's the page and they have some,different routes we can use so there's,cart slash add card slash js and the one,i want to use is card slash,change.js and basically we can just send,it a variant id and a new quantity and,it'll update that item and then you can,also send the line item key and we're,actually going to be sending the key and,that's because you can have multiple,line items with the same variant id and,with the key that will always be unique,so there will never be complications,so let's uh go back to our code and,let's make this accept a key and a,quantity,and then we gotta figure out how to get,both those uh,values so we already have the quantity,right here but we've got to get the key,so let's go back to our cart item and,let's just go data key,is equal to,and we'll pass it item.key,save that and now we can get it within,our um click function here so let's go,const key is equal to,and we'll go button and we gotta find,the cart item so let's go closest dot,cart item,and then we want to get the attribute on,that element and we want the data key,attribute,so that'll get us our key and now let's,pass it to this function which we,haven't even called yet so let's call it,in here we'll go,change item quantity,and we're going to pass it our key and,then we're going to pass it the quantity,which is right here and here,so let's assign that to a new variable,called new value,and we'll make it equal to this,and then this equaled a new value,and we'll do the same thing down here,but minus,just like that and now we can pass this,function new value,so now we should have both of these,values available to us so let's just,console.log it to make sure it's working,so let's go quantity and new value,or i'm tripping uh quantity and key,let's uh go back and try that out so,let's just refresh i'll open up console,again,refresh one more time and now i go up,and i get the quantity and key,and it works both directions,so it's working good so now we're,actually going to fire off that ajax,request and to do all ajax i'm going to,be using axios,so i'll link this in the description,also it's just the most popular uh ajax,library and i'm just going to use the,cdn version so i'll copy this,i'm going to go to my cart dot liquid,i'll just add it right above the cart js,line,so now i have it available to me,so let's go back here and let's uh fire,the request so it'll be axios.post,and i'm going to be posting to slash,cart,change.js,and then i got to give this um the key,and i got to give it the new quantity,so that looks good and then let's go dot,then,and this receives the response,let's just console.log res.data,and see what happens so let's go back to,our page,i'll just refresh,and check out the network tab so i hit,plus now,and it fires off the request we get a,200 back,and we sent it the key and the quantity,and then it responds with the entire,cart object,that's been updated,so we updated the cart and if we refresh,the page,you can see it updates now let's make it,so these prices update on screen without,a refresh so we have to get the item,price and then we also have to do the,discounts and the total at the bottom,so we can get all those values from the,returned,cart object so let's uh take a look at,that object,and let's just update an item,if we look inside here we can see we get,the total discount and total price so,those are for these two,and then for the item,price it's in this items array we just,have to find the right one and then we,have item.finalprice so let's get all,those let's go in here,we'll just go cons total discount,is equal to res.data,dot total underscore discount,and then we got the total price which is,uh,res.data.total underscore price,and then we have to find our item in the,array so to do that let's go const item,and we want to go res.data.items.find,and this will receive a single item and,we want to find the item where the key,is equal to the key that we passed into,this function,so this should grab us the item so let's,just console.log all that to make sure,it's working,let's go total discount total price,and item and then i'll go back and,refresh my page,so i'll refresh,hit it and i get uh i didn't update yet,let me refresh again,and then hit it and we get the total,discount total price and then our item,right here,and then the item price is under what,was it,item dot,uh,what is it,item.final line price so let's grab that,and let's go cons item price,is equal to uh item dot final,line price,so now let's actually update the,elements on screen with these new prices,so let's start with the total discount,if we go to cart.liquid,the element is right here let's just add,an id to it i'll go id is equal to total,discount,and while we're here let's do the same,for total price so id is equal to total,price,and then let's go back to our javascript,file and let's uh select those elements,let's go document,dot query selector,hashtag,discount,and we want to set its text content to,be equal to our total discount value,right here,and then let's do the same for price,so total price,is equal to total price,and then we got to do the actual line,item price so to get that we can go,document.queryselector,and now let's do backticks and we want,to get uh the element where data key,is equal to,uh the key that we passed passed into,this function,and then within that cart item element,we want to get let's see,we want to get the span right here so,let's add a class to that and i'll just,go,line item price,so let's go back here within that,element we want to get dot line item,price,and then we want to set its text content,to be equal to our item price variable,right there,so let's do that and try it out so let's,go back to our page i'll refresh,and i update the quantity it updates the,price and the discount in the total but,it's all in cents so we're gonna fix,that right now so depending on the store,their money format could be completely,different so we can't just hard code in,the format so we're actually gonna read,the shop's money format and then we'll,make use of this um,function that was extracted from uh,optionselection.js so let's just copy,this function i'll link it in the,description,and i'm just going to throw it at the,top of my cart.js file,so let me go up here at the very top,i'll paste it in and then uh let's go,function,format money,is equal to all that code they gave us,i'll minimize that and this just takes,the sense and then the format we want to,format it in so how can we get the,format well if we go to our cart dot,liquid let's just go up here and let's,just go data,money format,is equal to,and it's a shop,dot money underscore format,so let's save that and refresh the page,and see if it worked,uh let's go back here i'll refresh let,me inspect,i'll go to the cart and i got the money,format right there so let's grab that,value within our function,so let's go,right,in here and let's go cons format,is equal to document.queryselector,and i want the element that has data,money format,and then i want to get the attribute off,that element and the attribute i want is,data money format,so that should grab us the format let's,just console.log it real quick to make,sure,it's console.log format let me go back,to my page i'll refresh,and then go to console and update the,quantity and i get the format right,there so now let's plug it into that,function,so in all of these we'll run it so let's,go format,money,and then we give it the sense which is,what we have right here and then the,second argument is the format,so just like that and we're gonna do,that for all three so let's do it for,total price right here,and then we gotta do it for the item,price,and that should do the trick let's,delete our console.logs and try it out,so i'll go back i'll refresh,let me close this and now i update the,quantity and it uses the format properly,and everything updated,so that's cool so next up we gotta do,these remove buttons so for those let's,start by adding a uh event listener on,each one of them so let's go back to our,code and let's check out our cart item,and then let's just add a class to these,i'll go class is equal to remove item,and then let's go to our cart.js i'm,just going to minimize all this stuff,and let's do a new,area down here we'll go,document.queryselectorall,and we want to get all dot remove items,and then for each one of those,uh,we want to add an event listener so,let's go remove dot add event listener,we want to listen to clicks and this is,going to get a function,a function,and then that function is going to,receive the html default event stuff so,let's prevent default on it let's go ed,prevent default,and uh let's just console.log hey and,see if it works,so let's go back to our page i'll just,open up console,and i'll refresh,and i'll hit a remove button and now it,says hey so now we can run our code,there let's go back to our code and,instead of console.logging we can hit,that say same api route so let's go,axios.post we're going to post the slash,card slash change.js,and then we got to give this an id which,is gonna be equal to the line item key,and we gotta give it a quantity and,since we're,since we're removing that's gonna be,zero,and then uh yeah let's get the key so,let's go up here let's go const item is,equal to,we got the remove element we clicked,right here so let's grab that and we'll,go dot closest we want to find the,closest uh dot cart item,so that's going to be equal to this div,right here which has the data key,attribute on it so let's get that,let's go const key is equal to,item dot get attribute and we want the,data key attribute,so there we go we got our key let's pass,it in here,and then let's add a dot then,this will receive a response and let's,just console.log,res.data,and we'll go back to our page and try it,out so i'll just uh refresh,and then i'm going to hit the x,and it responds with the cart object and,if we look inside it we can see it only,has one item inside now so i actually,did remove it and if we refresh it's,gone,so now let's have it remove the element,without a refresh so we can go back,and we can just go,item,which is the whole div we have stored up,here dot remove,and let's save that and then we'll go,back and try it out,i'll just refresh and i hit the x and,now it removes that whole element so,that's good but we have an issue it,should be hiding everything when the,card is empty and instead displaying our,empty message and another issue is that,when we do remove an item we should be,updating our total discount and our,total price so if we refresh this is how,it's supposed to look when it's empty so,let's uh,fix that let's go back to our code and,right here we can check if the card is,completely empty by going if,res.data.items.length,is equal to zero,and we know it's a completely empty cart,and then if it's not completely empty,we'll just remove the single item like,we were doing before,so let's check out the,the uh,html of the page let me add another item,real quick,and we gotta basically remove everything,so let's see how we can do that i think,we should select this form and just,remove it so it has an id cart form so,let's go back,and let's go,document.queryselector,and we want hashtag cartform.remove,so that'll remove everything and then we,can just rebuild it to show that empty,message so let's try this out we'll go,back i'll refresh,and then i'll hit remove and,everything's gone,so now let's uh go back to our template,right here so we have to add an h1,and we have to add this cart empty,message so let's copy that,and i'll go back here,and we're going to do all that right,here,so let's go const,html is equal to document dot create,element,and we'll just create a div,and then let's just go html i should,have named it something different but,inner html is equal to backticks,and let's just copy and paste all the,html inside it so we got this h1,and then we got,this cart empty div,just like that and then let's append,this div to our uh,page which is going to be,dot cart dot with,so we'll go back here and let's go,document.queryselector,and we want to get dot cart and then the,dot width within that dot cart and we,want to append the child and we'll give,it our html variable right up there i,think that should do it let's try it out,let me add something to cart,so we got something in the cart i hit,remove,and now we get that message so it's,working good and then we just got to,make it so when we remove an item it'll,update the totals down here so we've,already done this if we go to our code,and we go to our change item quantity,function,you can see we're getting the format and,the total discount and total price so,let's copy those lines,and we'll just paste it up here in the,else and then,we need these two lines right here that,actually update those totals on the,screen so i'll paste those in,and that should do it let's go back and,uh,i'm just going to refresh,and now if i remove an item those totals,update so next up we just got to do this,text area box and make it so it'll,automatically update the cart note so,let's go back to our code and check it,out so let's go to our cart uh template,and let's find it let's see it's right,here it's just a text area with name,note so let's go back to our javascript,and i'll just minimize this and i'll do,a new area below,document.queryselector,and we want to get,the element with name is equal to note,and then we want to add an event,listener to it so add event listener and,we'll listen to key up,and then this is going to get a function,which receives the uh html event and,let's just console.log,e,target.value,which is what they typed in so let's,save that we'll go back,and i'll refresh,and now when i type in here,whoops if i type in here you can see,it's console.logging it so we're going,to use that value to change the card,attribute so let's go back to the api,and uh let's find it let's just search,for note,and try to find something useful,okay we can update the note right here,and,which route is this so card slash,update.js and then you just pass the,data like this,so let's do that let's go here and let's,go,um axios dot post,slash card slash update dot js,and then we gotta pass this a note,with our new value which is right here,and that's gonna do it but we're gonna,have a bug so let me show you what's,going on,so let's go back and uh,let's go to a network and i'll refresh,you can see when i type in here it's,sending the request and updating it but,it's just gonna send a ton of requests,which is bad,so really we wanted to bounce that so it,doesn't fire as much so it's just google,uh,javascript to balance function,and uh david walsh has a good one so,i'll just copy it,and uh let's just paste it at the top up,here,and then let's use it on our function,right here let's go to balance,and then we give it the function we,wanted the balance,where does it end let's see,i think it's right here and the second,argument is the delay we want to wait,for so let's wait for 500 milliseconds,save and that should fix it from firing,so much so let me try it again,i'll refresh,and then uh,now when i type,it shouldn't fire until i let go and,wait 500 milliseconds so now it only,updates it once which is a lot cleaner,so that looks good so last up we can,just remove this update button since,there's no need for it anymore so let's,go back to our,liquid,and let's just delete it,i'll hit save and go back,and there you have it that's the cart,page so i hope this video helped make,sure to like subscribe leave a comment,let me know you're there uh if you have,a request for a video uh put in the,comments as well and maybe i'll make it,and i'll see you in the next one bye,you

Congratulation! You bave finally finished reading shopify district theme how to disable ajax cart and believe you bave enougb understending shopify district theme how to disable ajax cart

Come on and read the rest of the article!