How to create Shopify Ajax-carts using "Liquid Ajax Cart" Javascript library

[Music]. hello everyone. i'm going to show you how to create the same adject scart functionality for shopify using liquid adjective library. i'm gonna create a new environment with a free shopify theme that is called minimal. this theme is good for demonstration because it doesn't have any edges. card functionality out of the box. okay, the theme is installed. let's see how it looks. this is the card page. this is how a product goes to the card. [Music]. this is how we change the quantity of a card item. so let's add a new section for our adjectives card. let's go to the edit code sections. add new section. let's name it my card. i'm gonna add some basic code for the card section. look through: card items link to a product: title: price per item, minus one button. current quantity, plus one button for the plus and minus buttons. i'm using the car change url route with the item key and the new quantity parameters. so these buttons will work even without javascript. and let's show the final price for an item. the section is ready. we need to include it in the themeliquid template somewhere under the footer. done, let's check [Music]. okay, this is our section with two unlimited products in the card. let's add one more product to the card. make sure it displays correct data. okay, now it's three. let's check minus and plus buttons. two, three, again. okay, now we have a simple section, still without adjects, and i want to place the section to the right side so it will be easier to work with. i'm gonna add a flex wrapper to split the page to the main content and the sidebar for the card css file for custom styles and a horizontal line between card items. okay, now looks better. it's time to include liquid edges card library and identify all the things. first we need to upload the liquidascart javascript file into the assets folder and include it in the themeliquid template file. uploaded and included. now we need to add the data adjects card section attribute to our card section so that liquidates card identifies it. that's it, let's check. okay, the plus and minus buttons work without page reloading. let's check product forms. now we have two unlimited products in the cart. let's add more. okay, works now. let's improve user experience by highlighting the card when it's updating. i'm gonna use the request in progress body css class that appears when an adjects card api request is in progress. so i'm gonna make the card items container a little transparent when it is getting updated. okay, it works. let it the same with the product forms. there is a form in progress css class that appears in a product form when it is submitted. it's better. you can use these css classes to show your own loading indicators. now let's take a look at the card counter in the header. it is not getting updated when the card is changed. i'm gonna fix it using the bind state data attribute with the card item count value. i should apply this attribute to an html tag where i want to show the card item count value. [Music]. good is changing. now let's add the remove button for the card. it is the same as the plus and minus buttons, but the quantity parameter is zero. okay, after removing all the items, take a look at the item's counter. it shows zero. i want to hide the counter if it is zero. let's find the css class of the counter. this is it: to hide and show the counter. i'm gonna use the js adjectives card- empty and js adjects card, not empty css classes. let's try to add product to the card to see if it works. okay, if you click on the card link, it will lead you to the card page, but i want this link to hide and show the adjects card. instead, let's use the toggle class button data attribute for it: [Music]. we need to apply the attribute to this card link and provide any css classes, for example, js. my card open and this class will be added to the body tag when a user click on the link. now let's write some css. hide the card sidebar by default. show the card sidebar when our css class is applied: [Music]. good, it works. now let's go to the limited product that have only three items in a stok. if i try to add the product to card more than three times, nothing happens. but i want to show the error messages using the form error data attribute. all i need to do is to put a container with this attribute in the product form. let's put it right after the submit button. now let's try to add more product to the card. okay, now we can see an error message that comes from shopify. let's remove the product from the card and try again, okay. good, within these 10 minutes we have created the standard adjust card functionality without writing any javascript code. liquidates card also provides javascript functions to work with the card state and make calls to the shopify card agix api. please check out all the other features on the documentation website. that's all. thanks for watching [Music] you.

Adding ajax to the Shopify cart template (theme development tutorial)

[Music]. 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 cartjs 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 cartjs 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 buttonaddeventlistener. we want to listen to clicks and when someone clicks we want it to run our function here. so let's just consolelog 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 buttonclasslistcontains 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 inputvalue 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, inputvalue 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: inputvalue 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 changejs, 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 itemkey, 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 consolelog 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 axiospost and i'm going to be posting to slash cart changejs. 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 consolelog resdata 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.

More:😲 10 TRENDING PRODUCTS TO DROPSHIP IN JUNE 2021

How to Make a Shopify API Request

hey, i'm megan, a developer advocate here with shopify, and today we'll be using an access token generated by shopify to request product information through the admin api. if you're familiar with web development, you know that apis are sets of protokols and rules used to define how you can integrate your application with this source. the apis provided by shopify are no different and they are the primary way that you, as an app developer, can integrate your app with shopify. shopify has a few apis available that you can use, but today we will be focusing on the admin api, since we only want product information. you can find out more about the different types of apis available if you watch this video by my friend liz. she goes into detail more about each one. the admin api gives your app the ability to read and write shopify store information. this includes products, orders, shipping and more, and because of this, all requests to the admin api need to be authentikated. i will be demonstrating how to make authentikated requests using both curl and a plugin for vs code called thunderclient. you can use whatever htp client that you prefer. i'm not going to pick sides in this case. so first, in the shopify admin, i'm going to create a new application. notike here that this is a custom application, and this is fine for my use case, because it's only going to be installed on the singular store, but you can also create public apps as well. we'll call this app test api app- cool. now the app's created from here. part of the authentikation and authorization process involves us telling shopify exactly what information we would like to request through their apis, and we can do this by specifying the api scopes. we can configure these scopes here, and for the purposes of this demo, i'm only going to be selecting the read product scope, because all i need to do for this app is read product information [Music]. here you can see the access token that is generated by shopify. now that the app is installed, we will send this access token along in the header for any http request that we make to the admin api. this is how shopify will identify and authorize us to get the information that we are asking for. now that the app is installed and ready to go, let's take a look at how exactly we might request that information. you can see here that the url for the graphql admin api endpoint is as follows. we would fill in the store name here: um. this specifies the admin api. this is the version. i'm just going to stik with the latest. that's fine with me. and then we're going to be specifying the graphql endpoint. we do have rest endpoints available, too. cool. now that we know what the endpoint is for the information that we're looking for, let's take a look at how we might make a curl request to this endpoint while still including our access token in the header. so in eye term here i'm going to go ahead and just make a normal curl request. i'm going to fill in the shopify store as the first part of that url, like we saw in the documentation, and of course, the application type is application json. from here, we have to include the access token as a header, like i mentioned, so that shopify can identify us [Music], and the name of this header is shopify x- shopify access token. it's important to keep your access token secret. you wouldn't want to commit this, to get or share it with anyone, because it is how shopify identifies you in the future. the next step is to actually define the query that we want to send to graphql. in this case, i'm just going to ask for the first 10 products and their ids and titles. that's a simple enough example to prove that this authentikation token will work all right. so, as you can see here, this is the product information for the first 10 products in my shopify store, including their ids and titles. you can see, if i try to make this same request again and let's say i accidentally mess up the access token, i should get an error message. that's pretty clear. and there we go: the invalid api key or access token unrecognized and valid, wrong password. all that information is telling me that my access token is incorrect and shopify was unable to authentikate me to make this request. all right. so we're going to switch over to vs code and do the same thing that we just did in curl, but we're going to use thunder client instead. so because it's a graphql query, we are going to switch it to a post. we'll use that same endpoint that we had before. that includes my shopify store url: [Music]. so we can just switch to the header tab here and include the x shopify access token and we'll paste in the value that of the same token that we used in that curl request. so now in the body tab we can define exactly what we're asking for from the graphql endpoint. we'll make the same query as we did in the curl request. one thing i did notike is that you do have to send over a variable object in order to make a request using this graphql editor. so, because everything is just statik in this query, i'll just send along an empty object as the variables and you can see here on the right that this is the first 10 products in my store, including their id and their title. if i were to mistakenly add the wrong access token or something got mixed up with the header, you will see the same error that we saw in the curl. all right, that covers it. that's all the steps that you need to generate an api access token in order to request information from your shopify admin api. you can use tools like curl or thunder client or whichever http client that you prefer. postman insomnia- the options are endless, but practiking these api calls before you actually start your development is a great way to speed up your actual development, to make sure that your api requests are functioning properly and you're getting the data back correctly. if you're building out your application with ruby, python, php or node, shopify has some great client libraries as well that can help simplify this process and you can check them out here using the link in the description below, for more information about shopify development. subscribe to this channel, review documentation on shopifydev and join the community by asking questions in discord, slack or joining our community forums. thanks, see you there. [Music].

More:BIG CASH for iPads & Tablets. 100 Awesome items to sell on Ebay, Amazon & Poshmark Day #10

22 - Shopify Ajax Add To Cart with Fetch API and Alpine.js

hey, welcome to another video. in this video, we are going to learn how we can add product to the cart using ajax. of course, we are not using jquery in this video series. we are going to use the default fetch api in the browser, which all browsers support at the time of this recording, and also we are going to use alpine js. you will see how easy and clean we can add product to the cart using ajax. so let's dive deep. in the previous video, we learned how we add product to the cart, so in this video, let's make it an ajax request. if i come to the code in here, this is my product form and, as i said, this quantity. i'm going to complete it in the next video, but for now, let's leave it like this. this is where we define our component and alpine js. we're using x data, so if you haven't watched previous videos, please watch them. this is our component in here. this is the product form and this is the button that we have in here. this is dynamic buttons. okay, now, when someone click in this, let me like add an event in here. so, first of all, we change the type from submit to button, so it shouldn't submit the form. it is a button, or we can prevent the form also, but let's make this as a button in here. now, if someone click on this, i am going to run, i'm going to call a function. i'm going to call at 2 chord function, something like this: so this is the function that should be called, where we define this function. for now, let's directly put it in here, but in the future video i'm going to refactor the whole thing and we are going to extract extra javascript in its own component. you will see how nice and clean it will become. for now, let's add the, the function r2 card in here and what this add to cart is going to do. so you know you can define a function in here using alpine js. this function will call when we click in the add to call button. for now, let's console the log, adding to carth. so to see if everything is working, i will save it. let's come back to our theme. i'm going to refresh. of course it's not adding anything to the card, but we make sure it is working for an actor cart. yes, the function is filing. everything is fine. now, and here is the thing. there is two way we can send data. as the ajax request. we can create an object, put the variant, id and quantity and send it to shopify right shopify card. that is one way. the second way is we serialize our form. behind this button is a form. it is called product form. we can serialize it. whatever data inside this one will be serialized. serialize is a function used in jquery but we can use it. currently, like browser can support, like using the new form method, new form class, you can serialize the form. this is a better approach. as i said, either you can create it's your own object and pass it or you can serialize the form. i will serialize the form, the like there is. there are many reason. i can tell you right now that serializing the form is the way to go. i have seen a lot of team developers. they create their own object. in the future there are a lot of more problem. if someone add a, let's say, a metaphil or a property in here, not metal fill, a property- then custom object will not pick that property, unless you go and write mod for your custom object. but if you write a hidden property in here, serializing the form will do the trick. that's why if you have a subscription inside this form, then that will work also. those are the things that that's good about serializing the form. i have worked with many different clients, so i know what are the problems that comes in the future. for now, let's serialize the form. how do we do that? it is not very difficult. first of all, we have to be able to pick this form in here and above this, i'm going to let just creating a variable. i will call it form data. now, if i check out the documentation of like new form data, it accept a form in here. now i can auto complete this using the autokompletion of what is this? i'm using copilot. but here is the thing we i can either use documentquery and get the product form which is coming in here. it is a unique id that has passed through the form. this is working fine. this is great documentqueryselector. but instead of this, let's use alpine method of querying a form. in alpha and js you will use a refs. riffs are like a reference to the form. if i come to the documentation of alpine, then the x- f. this is how you define. you define an x refend here to an element, give it a unique name and then, using these riffs, you can access it. you can modify it. you can do anything to that. this is much better now. i will tell you in the future video. why is it better than documentqueryselector? for now, stik with this. check it out. how do i pass that x ref and the form the same way that you put? put these custom properties in here, custom attributes, so you can say x data type. instead of this, let's write an x ref. do you think it will work? it should. let's try it. now. i'll come here and i'll call it product form, underscore form, hyphen form, whatever you name it. it will work just fine as soon as it has a unique key. now let's come here. let me just refresh it. um, even if we have an error, i'm just trying to make sure everything works in here. uh, the form that we have in here. it has an x ref of product firm. great, now in here let's pass that using alphanges. you can just say dollar sign riffs is not jquery. we can say product underscore form. the other thing is that you can check if the product form exists or not. but for now, since it is here, it should exist. but for in the future we are going to add those conditions also. we pass the form and it is going to use this form data to serialize the form for us. now, if you cancel the log because log this form data, it should have the data for the form. it may not display it, but it should have it. now let's refresh it. coming back here, let's click on add to cart and this is the form data object that we have in here. now, whatever is inside this product id, quantity, whatever should be passed, so let's know that you have here. let's run like this: they send an ajax request to shopify. if you come to the documentation of shopify for the cart api reference at the time of this recording, it is under ajax api reference card. in here they have multiple examples using jquery. but if i scroll down- or you can, yeah, if i scroll down- this is an example using the fetch api. so here is how you do: you send a fetch request. the meta should be post and it should it accept the header that the data is json. since we don't have a json, we don't have to put the header at all. this is where they define the forum data for us from. data is ready. all we have to do is put it in the body. that's all we need. let's copy this type, this code, in here, only this part, and let's put it instead of this. i can use: using copilot, i can [Music] write a comment, so it's. it will send the ajax stik responding. but here's how it works. we don't need the header, as i said, because we are not sending an adjacent. instead of, like, json, stringify, we have to just form data and now it should work. just fine, right. and if you pass a json in the header, it is not going to work. it's going to like: um, throw an error off. the top was not seen because it is not a json. if i save it for now, let's give it a try. let's come here for now. let's check out our card. it is empty. and let's refresh our product page so it grab all the latest changes. cool, let's add it to the card. we don't see any feedback. but if i could go to the card and refresh it, we see the product is added to the cost. okay, cool, that's fine. now how do we define the feedback when we say: then we return the json in here. now we should put another, if another, bin in here, that then this time we can grab the json information. you can say card. you can say anything like okay, just through an error, so we can see a response in here. again, the same as a path and if i consolelog response, let's see what will happen. it should response the card object that we have, the same way that you see in the api. they say: if you send this request, this is the response that you will get.

30 - Shopify Collection Sorting with Ajax Fetch

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 alphabetikally 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 windowsearch, 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 automatikally 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 autokomplete. 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 consolelog: 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 documentquery 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 def.

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 tikniques, 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 shopifydiff, you can do it and using a post request to the changejs. 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 tiknique 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 appjs inside this source directory. the only thing we have added was alpinejs, 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 windowsunrise 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 documentdispatch, 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 notike here, um, this is a cart updatedwindow. 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 sunriseremove 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 th.