shopify how do i keep the quantity in the cart from updating

26 - Update Shopify Cart Quantity with Ajax Easilyhey welcome to another video in this,video we will

Code Inspire

Updated on Jan 25,2023

26 - Update Shopify Cart Quantity with Ajax Easily

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

The above is a brief introduction to shopify how do i keep the quantity in the cart from updating

Let's move on to the first section of shopify how do i keep the quantity in the cart from updating

Let PPSPY's experts help you find the best shopify product on your Shopify business!

Find shopify products (It's Free)
No difficulty
No complicated process
Find trending products
3.5K Ratings


PPSPY has the world's largest selection of shopify products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

shopify how do i keep the quantity in the cart from updating catalogs

25 - Shopify Ajax Cart with Dynamic Cart Data Updates

25 - Shopify Ajax Cart with Dynamic Cart Data Updates

hey welcome to another video in this,video i'm going to show you a technique,i haven't seen anywhere on the internet,for shopify team developer,so this video is very important because,you will learn something really cool in,this video we will partially load the,dynamic card now it might be confusing,for you what i'm saying right now but,you will understand or when i show you,what i mean so here is the thing when we,add products to the card it is adding to,the card it should open the card drawer,and it should dynamically update the,data in here now this data could come,from core.json,but in search of that let's load a,partial data the whole form that you,have in here which we designed in the,previous video should come from a liquid,file how would we do that,imagine okay before i do do that let's,do it step by step when we click on add,to call if it was successful i want to,open the card right so let's see what we,do when we click on this it fires an,event like an event of toggle record so,let's find the same event when the cart,was successful if i come to my code in,here,uh let's open the,main product forum,this is our main product forum this is,where we consult the log when it is,successful right,okay cool,and let's keep this open and also,i will open the drawer this is the event,of toggle cart,so if we run this event exactly in here,okay instead of this i'm going to say,this that,dollar sign dispatch,and we put the event of trouble card we,don't have to pass any value i will save,it for now now again,we should run the team watch,and also npx run mix or,mix watch,something like this,let's save the changes in here okay it,is uploading it now let's come here and,let's refresh the page,let's see if this is opening our cart,i'll close everything let's add product,to the card it is,opening this but this is not they didn't,update it the information,now what if there is an end point where,i can send an ajax request and give me,only the card information with all the,html structure,is there an end point for this,yes yes i will show you how now before,doing that just to prove it is not,updated if i refresh the page the,quantity of the first product should be,3 now,now this one is three okay cool,now,after like opening i wanna send a,request to an endpoint to grab all this,data,how would we do this one in shopify you,can create a template without any,content and you can send ajax requests,to this one imagine if you come to the,url,in here you would put a view and say,card,equal to cart,or mini card or card drawer or anything,imagine if you would be able to do that,yes you can so if you are,saying something like this make sure in,your theme directory when i come here,in the template we can create an index,dot cart dot,liquid,when you say index it means the home,page,the cart is the name that you pass in,here if it is mini card you should just,say mini card so in here let's let's put,a h3 in here for now,card data,now let's okay assuming it works like if,i refresh this it says card data in here,great now this is loading the data from,this template,now what about this menu and header and,all this,because we are loading a template it is,already using the layout theme in here,as the master template so what we do is,we come here at the top,just write a layout,and instead of,layout name,write none,now what none is going to do is it says,we are not going to use any layout,template we just want the data now this,time if i refresh it this is the data,and if we view the source,it has only the data in here,okay great now we have built this,endpoint for ourselves,so let's put the court information in,here,the card information that we need with,all the html structure if i open card,drawer,this is the chord form what i can do is,i can copy everything in here,and then i can paste it in this,now if i come here refresh it again it,is giving me my card information how,cool is that,but the good part is here if i refresh,it it give me only the form that's why,we call it partial it is not a full like,document we are not loading the full,document it is very light in here,it just takes like a few kb to load this,uh cord information in here and the,other good part is this is all dynamic,it is coming from a liquid so in liquid,you have access to everything,okay that's cool now let's send an ajax,request to this endpoint that we have,here,and we can replace,we'll come let's come here,let's go back,to the home page let's replace the,content of this this should be easy,right let me go to product page so we,are we can add to cart so if i come here,this is our r2 card now let's do that,if i come in my cart drawer let me just,listen for an event in here,if i come the same way that we have,toggle card if i say add,card,updated dot window,now we didn't write any event for now we,are just listening,so when some when someone fired this,event let's call a function,we call it update cart,this is the function that you are going,to call let's write that function in,here the reason i put it in a function,because it should should be reusable in,the future when i update the card i just,call the function update card,and,okay let me just put them in a new line,so everything looks clean in here we,call it update card,okay cool this is a function and this is,reloading in here now let's put a little,comment of,send,fetch,request,to update the code let's see if we can,autocomple no it cannot autocomplete i'm,just waiting for copilot so here is what,we do we send a fetch request to each,url,first we put a slash so it go to the,index and then we say view,our,view equal to court,after doing this we are going to say,then,what happened now in here we respond it,is not a json so it is a text so we say,respond the text it will return that,and then we can listen to that text in,the second parameter in here,okay good since this is responding the,html as a text we can see html in here,or we can say card,data,now this code data will be available in,here,document.query.inr html,uh if we given if this we create an id,for exactly this,or this one,the content of this will be updated,okay so here is document.query we don't,have this id but instead of,document.query,as always like we learned in the,previous video we are using alpine js,why not we use the,dollar sign riffs,and give it a key,i call it,uh card,content so now let's create the,reference here,it is much easier to do this style so,instead of,in here instead of id we are writing x,ref,card content now it is the same as we,use specified id since we use alpine js,it is much better to use like refs in,here dot html that's all we need to do,now let's give it a try if this work,then it should automatically update the,card now here's the thing,we should find these events to like,update card where do we fire this even,again we come here,the same way that we toggle the card,before toggling let's update the car,so when someone uh when this is like,filing the event of update the car,this one is going to fire a function it,is going to send the request to this url,getting the information and then adding,the information in here okay let's come,back,now i will refresh my page,currently how many product do we have,three for this one,okay,now let's click add to cart,okay it is adding one more in here,except we have an error in here,undefined update call,so expression,now let's see where we did something,wrong,if i come to my code,card driver,okay this is our updated card yeah,we are listening to a course updated,and we are calling this function,uh let's listen what the erasing,expression card update,okay,everything seems to be fine in here,um,this one closing,okay we are sending an ajax request to,this url yeah instead of this,we forgot to put a dot in here,so,let's come back,it should add product to the card,now let's open the card and see how many,we have okay we have four products for,now now let's click add to cart,it add it to the card,now we have the html in here sorry this,one that we passed in here should be,card data i forgot to rename this one,but forgot to do this here now okay we,should have five in here now,it should be the last test since we are,okay we have five let's add product to,the car,it is six now let's add one more,it is seven and everything in here will,be updated automatically like not,automatically of course manually in here,but yeah that is how you partially load,chord and this is dynamic now to,refactor you know we are writing all,this form in here with all of this code,see a lot of coding here,now we can refactor it a little bit,instead of the form that you have in,here,why not we have a snippet for this,i can write render,i can call it the card,form,something like this,and we say render something like this,much easier right now let's create this,card form snippet i'll come here,cut form that liquid,now,instead of,the same thing we can do it in here,so we repeat it i cut it from here and,put it in this snippet file and we,include it in both areas so the same way,included in here,we include this,and here also,sorry we should render it not include,included the old,method of doing it now it works just,fine see we have one snippet for card,form and this is the card form that we,have here now do you have the card,drawer both of them are using the same,in the first load it the liquid will,load we don't have to worry about that,because someone refreshed the pitch but,then the second load not the second if,someone like add prior to the card it is,getting again from this ajax request and,partially loading this data now let's,refresh it,and let's do one last test okay add to,the card it is adding product to the,card we have nine item one is here and,eight of them is here,so yeah i hope the video has been,informative and you'll learn something,there are much more things so i can,teach you about like how you can load,ajax,using ajax and stuff like that but i,think this is enough and this isn't this,is like nice car that we have in here in,the next video we are going to work on,quantity update when we click on this,increase and decrease and also how we,can remove it so i hope this video has,been informative thank you for watching,i will see you in the next video

Congratulation! You bave finally finished reading shopify how do i keep the quantity in the cart from updating and believe you bave enougb understending shopify how do i keep the quantity in the cart from updating

Come on and read the rest of the article!