how to display number of item in cart and cart total amount in shopify

hey welcome to another video in this,video we will learn about how we can,update the card quantity how we can,remove it custom even and global,functions there is a lot to learn and a,lot of techniques as always so you will,learn something really cool in this,video so let's start in here we have the,card in here when we increase the,quantity it should update the card,and,the x button should remove it so i,already done the x button in here once,you click on this it is removing and the,card is empty now so let's add the,product again,now it shows the product in here okay,great how do i remove it so if you come,to the um,cart api documentation in shopify in,shopify.diff,you can do it and using a post request,to the,change.js,so change the jss for that like you can,use update also but the perfect time the,perfect like api for that is changes so,here is how you do you will pass the,variant id as well as the quantity so if,you pass the quantity of zero it will,remove it if you pass quantity of two or,three it will just modify or change that,now change is used on many different,other ways also so if i scroll down you,can also remove the selling plan or,change selling plan in here selling,planner for the subscription some,products are on subscription and shopify,for example if you are selling like a,protein bar,or a shampoo you can put it on a,subscription people buy it on a monthly,basis,so this is the selling plan not,something that i would do in this video,uh what we are interested in is uh using,line line is in which item they are so,if this is my card this is the line and,this is like the first one,and the second one third one so that is,the line number now let's see how we can,remove this uh from the chord let's,check this function first and we will,add the same thing and this minus and,plus also so if i come to my code this,is for the remove it has a title just a,button it is sending a fetch request,to the change api with the data that we,passed the body is quantity and line,item,and after a successful like uh response,it is going to run,this event or,update it and of course our drawer is,listening for that once it,sees that this event has been filed it's,going to update our cart okay that is,what we did in the previous video,so,if this is doing the trick,uh it should be the same thing for this,quantity right,so we increase and decrease the quantity,so let's extract extract this into a,global function instead of writing this,uh let me just clean up this a little,bit,i'm not going to find an event in here,but i will call a function let's say,remove item from the card or whatever,but in here our function will accept two,parameter one is the line um item or the,number and the second one is going to be,the quantity so the quantity is of,course zero when we remove it we pass,the zero but the line item,it should be a number which one is this,first one second one third one instead,of that we can use for loop that index,it is since we are inside the for loop,you can see the four ended here,you can use the for loop index in here,it will start from one two three and,four okay we pass the line in here,which item is that the second one and we,are going to remove that we pass the,zero where is this function we can,declare this function there are,different ways you can declare this,function but i will put it on a global,variable what is a global variable a,variable that is easily accessible,across the page so we can assign it in,the window variable you see this window,so we can assign that directly to this,and we will do this technique throughout,the course so that's why it is very,important to understand,now how do we do this let's come to the,code we have a file called app.js,inside this source directory the only,thing we have added was alpine.js but i,will come here at the bottom i'll create,an object in here what do we call it,there should be a unique name to this,the reason i say it should have a unique,name is because it should not interrupt,with any other app that someone,installed in their store,i can call it kodi inspire on the name,of channel,and,that will work but since our theme is,called sunrise we can call it sunrise,the same name as the theme so let's call,it,sunrise and this is just an object,inside this object we can have functions,as many functions as we want what do we,call it we call the first function,remove,item something like this remove item or,remove whatever like a proper name would,be fine but for this example i will just,call it remove item but it is good to,have a remove item from the cart it,accept two parameter,the line or and the quantity,and what are we going to put inside this,let me paste the code i have copied from,my change function so here's the thing,we send a post request to this url,this is the quantity this time make it,dynamic it will come from this qty and,the line item instead of writing a,liquid code we just write a line in here,that's it,now this function is accessible for us,so if we want to increase the quantity,we just put,one one more number if one decrease it,we just put like a minus number that's,what we do and then we find that even,now let's come here back to the cart,form instead of this,we have to write sunrise dot,remove item and also sunrise is not,available unless we assign it to the,window variable so we can say,window.sunrise equal to sunrise,something that we do i also don't put,semicolon in here that is like,typescript style i think but yeah feel,free to put it it is just up to you,for now i didn't put it javascript is,smart nowadays,let's come here let's refresh this,and let's see if we can access that um,global,function that we said so if i write here,sunrise i can see remove item is,available in here and in accept two,parameter line and qty for quantity,so i'll come here instead of this remove,item i will say sunrise dot remove item,something like this,sunrise the remove item and we pass the,quantity as well as the zero number in,here now let's refresh the page,let's see how it works now,it should work as expected like if i,remove it,it does remove but dispatch is not,defined that is an expected behavior if,i come to my javascript we are running,this dispatch this watch is only,available in alpine but this is pure,javascript it does not understand what,this dispatch means in here,and,in this instance we have to file a,custom javascript event so if i write in,here file,javascript event,and let's see what copilot is doing okay,copper is saying you can say,document.dispatch even with this,information,but,we are not filing it on a document level,we are firing it on the window level so,if i come here,if i say file javascript in it,on,window i know how how you get it done,but i just want to copy it to auto,complete it this is what we do in search,document right window,the reason i put window is because,i'm listening to a window uh in my cart,drawer if you notice here,um this is a cart updated.window so if i,have a document in here um you will,write a document in here so this is the,event card updated,how easy it is to write a custom event,okay let's come here,let's refresh our page this time it,should work right since we don't have,any item let's add one,yes we have it now let's remove it,it did remove and it fired even and the,card is empty now that's great we have,successfully created this global,function and we can use it anywhere on,our page now here is what we do we come,here,and let's apply it to the quantities,also,this is a bit tricky right so we have to,have the existing quantity okay let's,put in the plus one first,uh i normally put the clause in the last,because clause are a bit long,let's try at click in here,and again we are going to use,sunrise.remove,item,ah,we shouldn't call it remove item,we should call it update,quantity or qty right this is much much,like better why i call it remove because,you are removing in this instance we are,updating and here also we are updating,so we just pass the zero value that's,why in here we should call it update,quantity i hope i have i have no mistake,like type of mistakes,in this one,that you see in here,uh first of all we have to in the first,one it should be for,loop,dot index,okay,but the second one huh,this is the tricky part should i put one,in here then it will just,change that to one so if it is one it,will make it one again,this one should be dynamic so how would,you do that one you can pause the video,and see how you could figure out this,one i haven't done it so let me give it,a try in alpine let's create another,component in here,and let's call it,uh data and we pass a quantity in here,this one should store the product,quantity for itself,in here i will say item that,quantity okay that's cool now instead of,uh,doing this,let's pass the quantity so if you pass,the quantity in here,plus plus,it should add one to it whatever it is,and if you minus it it should pass the,minus now let's give it a try if it,works this is what we do okay cool now,let's refresh it i haven't done it so,i want to do it together so if you see,any error you can see that i am not a,perfect like developer too,if i click on this,it didn't do anything,right okay yes it is it did update,plus,but it took some time,if i refresh this,let's come back here,let's give it another try,add to cart,i will wait a few second,if it did get that now here is also a,tricky things that we have to remember,okay this is the button,we click on this,ah it didn't work,and it didn't also through an error for,us so if i remove it,the remove is still work but if i add it,increase the quantity it doesn't work so,let's come back here do you think we can,have like,this plus plus directly in here,if you can't do that,the other example would be,to put plus plus in here before you pass,it,plus one to it,okay let's come here let's refresh it,click,let's refresh again so make sure you get,every update now let's click on this,yes it works this time,this is increasing now you see,everything gets updated without noticing,now there is one more thing that we can,add but i will do that probably behind,the scene a loading,like a set in here so when someone click,on this it should go in loading instead,like i shouldn't let the user just like,throttle like the card you see 11 in,here,they should be able to do one by one in,alpine gs if you come to on click,something i have to show you you can do,d-bands,debunks will let you click only once so,you say,debounce,that time it is not going to let you,click multiple time,you can just run this d bounce and it's,not going to let you,send that request again until the other,one is complete so i'll remove it,let's see what is the difference between,them,and if i come here,okay we don't have an item let's add one,let's click,it add more now if i multiply click on,this it doesn't work it just add one in,here until the request is done so,that's a good job for the,d bounce now see if i'm clicking on this,it is going to accept only one click,that is good because we are not going to,heat up the shopify card memory that is,something that you have to remember,now the same thing it will go to this,one,okay,at,click the device is equal to,okay,summarize that of the,quantity okay let me just copy the whole,thing in here sometimes the purpose of,copying is not because we are lazy,because we don't want to make a typo and,come back here so,in this one let's minus minus and add it,this is how it works how easy and clean,it is i think it is much cleaner than,writing the whole alpine js in here,some people prefer this and also we will,refactor the article in the future,videos if you don't like this,alpine has a better way of handling,like javascript component in a,completely extra file we will do that,like a lot of people don't want to write,javascript html which they are right,okay now everything is working fine,plus minus,minus,and minus it works it looks a bit slow,unless you add a loading cell in here so,i challenge you to add the loading set,otherwise,check out the source code on github i,will add the loading in the future video,but that is what i will do behind the,scene now everything is working and you,can see everything is in the card is,updating properly in here,what is this this is applying the,discount code in here for us if it is,more than 10 that's what we did in the,previous videos but yeah that is how you,can use the global variable,and how you can update the card i hope,this video has been informative and,you'll learn something new i thank you,for watching and i will see you in the,next video

Congratulation! You bave finally finished reading how to display number of item in cart and cart total amount in shopify and believe you bave enougb understending how to display number of item in cart and cart total amount in shopify

Come on and read the rest of the article!