how to pull all data in shopify using ajax

hey welcome to another video in this,video we will work on the collection,page and we will add the feature of,sorting filtering will be next so,let's check out how we can add sourcing,we're using ajax request on the,collection page so let's start currently,this is our theme and it does not have,any sorting on the collection page but,we do have the option in the collection,settings so if i scroll down we have,secondary image show vendor show rating,header and here is,the enable searching if someone enable,the searching it should display the sort,function at the top of our collection,page let's come back where we want to,display so here is the collection grid,that is displaying all the product,just above this i want to display the,filter as well as the sorting,so let's come here and display this um,this collection,i put it just a class name i'm not going,to design it in here using we will use,of course i'll you tell me css but this,is just indication of okay this is the,collection sort in here now inside this,we will add our sorting how do we add,the source,um let's come back to the shopify,documentation on the collection page so,in the templating theme architecture if,i scroll down,they have the structure of the dome,because our team was the same as dawn so,we've removed a lot of things,if you want to sort collection it will,be sort by url parameter so if you say,sort by price,descending or ascending,it will just filter for us and they also,have this code that you can use this is,the code and this is the javascript,let's copy this code quickly and see how,we can use this code i'll paste it in,here this is not a lot it's just a few,lines,let's come back to our collection page,refresh it,okay it will display alphabetically in,here okay it is great that is displaying,but let's see if this works if i say,best selling,it's refresh my page and it send me to,the best selling sorting okay great that,is working feature will be manual yes it,is working,and everything is working great the only,thing is like it should be ajax requests,we don't want to like refresh the page,that is what we want to add so let's,come to the code i'm going to completely,remove this javascript because this,javascript is what happens look if i,show you behind the scene,this is document that query sort by,which get the sort by id,and it is adding an even listener on,change get take the value,then window.search it is going to give,you a new location that will refresh the,page and add the parameter to that so,let's remove this javascript since we,are using alpine we have to design it,without punches we do need this id but,if you leave it that's still fine,let's initialize our alpine component,again x data,and let's put this as an object in here,so the first thing we have to do let's,design it a little bit uh let's add this,page width you know one of the thing is,like it is over the cross of this it,should be the same,space as this one so we can use this,patch with class,and yeah that's it let's see and let's,display it on the right side so i'll,make it flex justify and,and also let's design this sort,option a little bit now what i want to,do is i want to add some padding y of,three padding x of four and margin from,top to bottom also,some three margin top to bottom now,let's come here and let's refresh it it,will display it nicely in here we can,select it let's give it some border also,if i say border and border black it,should give it a border black so it will,be highlighted like a button currently,it is like a text so if i refresh now it,will show like a button it looks fine it,requires some other like minerals,design but that's fine it is displaying,properly but currently if i change,everything like anything,it doesn't work because we remove the,javascript,let's fix the javascript using alpine js,now how do we do it first of all,um let's add,a sort that displayed the default value,in here let's check this is a sort that,take the default value on a refresh,it is going to check if collection has,this sort and it will assign it to this,sort value what if i move this at the,top in here,so i have access to this sort value in,the alpine component let's write,one of these properties in here give it,a name of sort not short sort is equal,to,sort which comes from this one so if,someone refresh the page it will take,the default sort and it will assign it,here that should be fine if it is manual,best selling it will assign it here now,let's create a function,and the function will be called when,someone change our select so how does it,work let's come here and we say at,change add changes uh use for the select,if anything change on the selected,option we can call a function let's say,um let's let's just name it like,uh,sort again short,we can say sort,collection,we just call this function of sort,collection if this,select change now let's write our,function at the top,and see how we can send an ajax request,and get the data and display it uh the,reason i do it step by step is because i,want to show you some of the issues you,also learn the javascript thing,how you can manipulate them which is the,important part that's why let's do it,step by step so this function will be,called,okay great if this one changed,now let's change let's send a request to,the source,and add it in the url so we can just use,the fetch in here,it automatically add this for me,which is great right this is exactly,what we want but not truly so currently,we are sending this uh,url in the collection page and then,sort by,everything looks great this autocomplete,and i'm going to remove some of the,things first of all it is sending it to,the collection handle which is great it,is sort by everything works and then it,emits this,uh,image we don't have emit in alpine js we,have dispatch instead of dispatch we,will have this data what is this data,this data should be a text not a json,when you send a fetch request to this,url it returned the whole document for,me like the whole html document so let's,check change it to a text so it should,be a text and then we have a data other,text now for now let's console.log,uh the data,okay cool,oops we have this extra,parameters in here,and if we have any error display the,error now let's see what the data will,contain we are sending an ajax request,if this function is called,let's come to the code let's refresh it,in the console log let's remove that,and let's change it to feature,it send the request and return the whole,document for me now i have the document,all i have to do is find out the product,and when you find the product replace it,with this one and it should be that much,smooth so how do you find it you can see,like,this one has an id of product grid,container,so we can say document dot query,selector and grab only this one when you,grab it just replace the content of it,this data will be,this data all right so let's search,inside this since this is a text we,cannot use document.query on a text so,let me show you what i mean let's learn,something new also let's say this is the,data and if it is the document you might,say okay data dot query,selector,and,let's pass this id,let's say that,enter,this does not work the reason i put it,this way is because i want to show you,how you can,like,fix this issue if you said data dot,container since this is a text it is not,a dom,you cannot use this query selector and,it will throw an error for you so if we,assign this um to a variable of let,html dom,and let's put,uh html dom in here let's see how does,it output something,i will refresh it,you don't have any,problem so far okay let's do a feature,now it is saying like query selector is,not a function that's correct because,this data is a text it is not a dom how,do we change it to a dom it is like you,have to create a virtual div element,put the data of this inside that and,that div element will become a document,so you can create it through that if i,say html,div it is just a variable i'm defining,and i'm going to say create element dev,now i can say,html data is equal to data html dev now,will be a dom it is searchable we can,use document.query in that so we can put,this inside that,i hope i i hope this makes sense if we,are creating a div element we insert the,data inside that so it becomes,searchable using the query selector and,then we are going to assign it to this,dom,let down i don't have to specify it but,yeah,now we are getting the information and,put it in the dom once we have it we,will output it now let's save it and see,how does it work,refreshing the page,let's go by best selling,and yes it is returning our data,and all of these are svg plus holders,that you can see there's a lot more of,them i don't want to scroll down,it is having exactly the data that we,want if i scroll down it will have this,collection,uh,with page and width that is what we want,now all we have released instead of,consoling the unlock,let's replace that we say just,document,this time we go through this document,and we say query selector which one this,one,and we are going to add oops where is my,autocomplete,and another html should be equal to,dom html which is this only the,collection data now let's stiff save,this and let's refresh this pitch,current is,price descending and this is how it will,display,let's go with the feature,it didn't do anything let's go with the,best selling,it didn't do anything let's go with,alphabet,and it doesn't work right,so let's see what is the problem if we,come to the alpine this is the component,and this is the price,descending but if i change this,you can see nothing happened,the reason is okay here is the reason,when we change this it only send that to,the sort collection,we never said okay change this one also,like this one is calling the function,but it is always fixed so we have to,check this one we have to update that,how do you update that we can use the x,model in here,and we we can say sort,so,this select will be in sync with this as,soon as we change this this value will,also change that is i think the solution,we add this,let's come here and refresh the page,now let's check out,feature,i,didn't i think we didn't have,like we don't have the update yet okay,let's refresh the page again,let's go to the best selling,it changed if you notice that let's go,from price low to high,it did change that,and let's go from low to high to low and,it is changing new to old,old to new and it is working properly it,is working as expected the only thing we,have to add is first of all update the,url,and once you update the url let's add a,loading option also in here,so let's come back to our code the first,thing i want to do is,change the url so at the,bottom let's try uh a simple uh,comment so let's see if co-pilot can,complete this one um update url without,refreshing,the page,page with now the page let's see if it,it can do that,okay yeah this is how it is,changing the history,so it is adding the source,at the url using the replace instead,and there is one more thing that we can,do using yeah history that replaces,stage should do the trick but let's see,how does this one work but,the comment that you write in here is,very important if you are using copilot,or not but this is how it understand,what it should do using history without,the replace instead it will replace the,sorting at the at the top of the url,here now let's come here,best selling,it is adding it to the url okay great,let's do manual,it is updating and let's do high to low,it is updating as well as the product,and that is how easy it is,what else we need to add let's add the,loading the loading was i think we added,the loading on the card page on the mini,on the card drawer so i extract that,into this snippet and this is just a,loader you can see it will show if the,loading is true how easy it is like we,just extra this in a separate like a,snippet easy to use just above this,i'm going to include this loader,let's not use include let's use render,my editor does not auto complete render,that's why i first write the include now,in here at the top let's do a loading,let's put it as a true for now and see,how it will display if it is true how do,it it will display the loading for us if,i refresh this is how the loading will,display i think it is fine and if it is,very consistent across,like,all the loading in the website now let's,make it false by default,and it will become true if someone call,this function we say this the,loading is true,and when do we make it false,when this function will be called or,when the error happened now we don't put,it inside this because if the error,happen it does not make it false,so we can use this finally finally we'll,run even if it through an error at the,end it will run this finally if you have,ever used this fetch now at the end we,are going to make the loading false,if i save it,let's come back to our document let's,refresh it everything looks great now,let's change it to the best selling it,shows the loading and it update the,product and let's do a to z,as a to a,and,high to low and everything is working,perfect now this is an ajax sorting and,shopify team i hope this video has been,informative thank you for watching and i,will see you in the next video

Congratulation! You bave finally finished reading how to pull all data in shopify using ajax and believe you bave enougb understending how to pull all data in shopify using ajax

Come on and read the rest of the article!