25 - Shopify Ajax Cart with Dynamic Cart Data Updates

hey, welcome to another video. in this video i'm going to show you a tiknique 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 corejson, 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 autokomple. no, it cannot autokomplete, 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: documentqueryinr 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 documentquery. we don't have this id, but instead of documentquery, 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 automatikally 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 o.

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.

More:How Much Money Do You Need To Start With Shopify

Shopify Theme Build: Theme Cart JS Intro - Episode 6

hey everybody, i'm sam webb and this is part six of my shopify theme build series. we're getting really close to finishing up some of the simple templates and we're starting to get to a point where i'm going to want to add a bit of javascript to to kind of take it to the next level. one of those areas is the cart, and today we're going to be adding a library that shopify built called theme cart, to help with that. the first thing we want to do is we want to go over to npm, which is a package manager for javascript, and we want to look up shopify. so we're gonna, if you look at his name right here at shopify slash theme hyphen cart, and this is shopify's javascript library made for interacting with the cart. now, before we get into implementation, let's just have a quick look at this documentation. so we've got the getting started here and we'll be looking at that in a minute, but before that, let's let's scroll down here and look at some of the different methods we have available. we've got this get state function- that that just gets the state of the cart, so it gets all the information about the cart, and then, further down, we've got add item. we've got update item and remove item, clear items, and so these are just a bunch of different functions that will allow us to either update the cart or get information about the car. so if you ever have any questions about how any of this works, make sure you come back to this. now, all these things that are in red like key here, these link out to somewhere else, right, so get item and it says pass in key, which isn't explained here. doesn't make sense, and so if we click key really quickly it takes us to the object documentation for a line item, and so this is why i was so big on a previous video about this object page is because a lot of things end up coming back to just looking at the objects and and getting understanding about what properties are on these objects. going back to that theme card documentation, scroll back up to the top to getting started so that we can get this added into our store within our project. in the terminal we need to add: add this package with yarn add and then, within the files that we're going to use it, we need to import it. first things first, let's do the yarn ad at shopify slash theme cart as we see we've got, we got our successes there. so you see that it's been installed, we see that version 4.0.2 has been installed and now we're good to go. we're not really going to be making any changes to the front end right now. i just want to get this added for later use, because when it comes to adding products to cart, updating our cart and just different things that i'm going to be doing with the car, in the long run we're going to work, we're going to end up needing this librarian, so it's good to get it installed early, open up, inspect. we're going to be looking at the console and we're going to be doing most of our most. most of today is going to be within the console and within the code. now, before we write any code, i want to mention that before, before you're going to be able to do this, there needs to be an update to the workflow. now, if you're start, if you're, if you're using workshop and you're using this specific workflow, if you, if you're creating a new workflow after this video, then you shouldn't need to do this step. but for anybody who already started working with their workflow before today, you're going to need to to make a quick update. and so let's open up workflow and let's go into tasks and theme, and so there are two lines that you need to update: line number. so line number four, where we have this const resolve and then everything else. we're going to need to add this line and then, within plugins- before this was an empty array- we're going to need to add this resolve function here and what this will do is it will allow- it will allow the workflow to resolve any node modules that you're using. if you have a shopify plus and you do have checkout enabled, then you'll also want to do that same exact thing within checkout. and also, if i actually stop running this for a second, you're going to need to. you're also going to need to install this, and so, the same way that we just installed theme cart, we're also going to need to install this. so i already have it installed. but what you would do is yarn, add and then paste that in, and then you, if you want this to be a dev dependency, you can do dash dash dev. and if we look into packagejson, you'll see that we have a plug-in node resolve at version 11 within dev dependencies, right, and you'll also see that within normal dependencies we have a shopify theme card up here. so now, moving on to actually implementing this, we can go into source and let's open up scripts and themejs, but what we're going to do is we want to test cart now. in the long run we're going to get more into javascript later on and into how you should be formatting your javascript and how you should be structuring these folders, but for now we're just gonna do everything within themejs, just because we're just testing this out, but we're not actually using it yet. so if we go back to the documentation, we have the import star as cart from shopify themed cars. let's copy that and paste it in here. and before we save this, let me yarn, start again, just to get this back to watching file changes. and so now i want to see if, if this works at all. so let's say, consoleinfo, cart, refresh the page. now we see we've got this, this object here that comes after the example code, and so that's all the functions that come with theme card. and so let's try one of them and i'll say, uh, cart, dot, dot, get state. now run that function. now, before i run this, this is a promise based library, so what we're going to get back is just a promise, refresh that. you see it says promise and status is pending, and so this isn't the proper way that you would want to to display the information from this. instead, what we would do is if i get rid of this and i say cart dot, and now when i do cart dot, you can see that i get these, this information about the different functions that are on it, which is pretty handy. so i'll pick git state then, and then we just say data, consoleinfo, data, right, refresh that, and now we see an object. that is all the actual cart data. so we've got our attributes, which we don't have any on our cart right now. we've got any discounts that are applied and since we have- uh at this, today we have i have a black friday, cyber monday sale running and so we've got this 15 percent off sale here that you can see that that's added to the cart. if we go down here, we see item car, item count two. so we got two items in the cart and you could see, we can see all the pricing and and all the different information on the cart. one thing you may run into is third parties who who need to add products to cart for whatever reason and you don't want the process to be difficult, right, and so, to make it easy, what you can do is you can expose this library to the window. so right now, if we go back to the code, right, you'll see that we have this cart object that has a bunch of information on it. but if i were to type cart in in here in the browser, we get an error, a reference error. card is not defined, it doesn't exist, and that's because the way this workflow works, it does a bunch of different things to transpile the code and it bundles it up into this one kind of large function and then all that information within that function is kind of contained within it. right, you can't reach into it to get the information, but there are ways to to reveal things: window dot, cart. i'm going to do a capital c equals cart. if i save that and go back to the front end, first i'm going to go window that cart, just to show you that it doesn't exist, right, and then, but if i refresh the page, do the same thing. now we have the same get state and now you can run tests within the browser. you actually don't have to put window, you can just do cart dot get state data. there we go that, get state about that, then it states a function and then dive.

More:The ONLY Dropshipping Guide That You'll EVER Need - (LEARN IN 20 MINUTES)

Shopify Theme Build: Simple Cart Page - Episode 8

hey everybody, i'm sam webb and this is part eight of my shopify theme build series. today, we'll be building a simple cart page. so let's get started now. where we left off last time was setting up this, uh, this product page here, and we have this add to cart and when you click it, it adds the product to cart and it takes you to the cart page. as you can see, we haven't set anything up for the cart page, so although the items are in your cart, you just can't see them. so we're going to change that today. similar to other features we've built, we're going to need a few pieces of shopify documentation. first, we'll need the cart object, which is the object associated with the cart page automatikally, and if you look at the things that are covered on this page, you'll see that we have a cartitems value, and that value returns a list of cart items, also known as line items, and so the second piece of documentation we're going to need is line item documentation, and this object contains all of the information associated with a partikular line item. so this is similar to other pages. right, we get the documentation that's associated with that page or that's associated with whatever we want to build on that page and we just keep these open so that we can refer back to them when we need to. the last piece of documentation isn't an object, but it's the actual documentation about the cart page. there are some things that are specific to the cart page and we're going to want this documentation open just so we can easily refer to some of those things as well. so the first thing in here is: we've got the template that we need to use is called cartliquid. if we go over to our code, you'll see that in templates we already have a cartliquid file and i have that file open. also, since i know that i'm going to use a separate file to to contain the html for line items, i've created a snippet called line item. so to start out, let's add a little html and so if we go back to that cartliquid documentation and we scroll down, we'll see right here that we've got this form and it's a pretty simple form. it's just a form that submits back to the cart page and it's a post method. and you see, they've got this abbreviated code here where you'd be looping over the cart items and then after that you would have a submit button. now, in this case, i've already written all this code, and so instead of going through and writing every line of it, i'm just going to paste it in and i'm going to explain what's happening. so we start out with that same form that we just saw in the documentation. it's got the action that submits the cart, and it's got a post, and then we just gave it a class- uh, just for our own styling purposes. and then down here i've got this div that has this, that same loop right, it's looping over car items. and then we've got this line item snippet which is currently, which is currently empty, and it takes in the line item. so that's going to list out all of our line items. and then down here we have the total right here, which just shows the total price. and then we've also got two buttons right: one button for updating the quantity and one button for checking out. as you can see, both of these buttons are submit buttons. the only difference is the one for updating quantities doesn't have a name associated with it, and the one that is supposed to take you to checkout does have a name and the name is checkout. so if i go to the front end and i refresh the page, we're not going to see the line items because again, that line item file is empty. but we will see the update quantities button, checkout button in that total price. so now let's get the line items displayed. so in the line item file, similar to the other file, i'm just going to paste in all this code and then i'll walk you through it. and so i've got this split up into kind of the left side and the right side of the line item. so if we look at the left side, that's where pretty much all of the information about the product will be. so first we've got the image and we can pull that using line itemimage, similar to how we can pull an image from sections, how we used before, or how we would pull the featured image from a product, something we used before. so it's, it's the same thing, this, just it's called image on the line item. and then down here for the title, we're using lineitemproducttitle and so the line item keeps a reference to the product and the variant that added it to cart. and so when we do line itemproduct, this product is the actual product object and then we could go back to the product documentation and use anything from from that documentation. in this case we're using the title. next, we're looping over the line items options and we're using options with values. here, and what this will return, or what options with values, is it's a list of all of the uh option and value, uh connection, those key value pairs. so, right, it will be. you know the name, size and the size of the item of medium, right? so the option would be size and the value would be medium, and so we loop over that and it gives us an option object, which then we can pull optionname and use that and then optionvalue. so then down here we've got a line itemfinal line price, and that's the price of all of the items, like the entire quantity of that. so say that you have an item in your cart and it's 30 and you have two of those items, then you know this price would be 60 instead of you know that 30.. and then, finally, on this left side, we have this input here, and so let me go back to the documentation, and this is the documentation on updating quantities. so, on the line item, we're going to want to put this input here, which the important things here are: the name, and the name should be updates, with the square brackets after it and then the value needs to. you want that to show whatever the current quantity is. and there's a second thing that's needed. uh, we need a button for updating the quantity and this and this. this uses the input as the button. you're also able to use the button tag, which is what i'm using on the site. so back to the code. looking at, we have that name updates and then we have that value which is linearquantity. if i close the left side and open up the right, now in here we've got the remove button and this requires this specific href here. so slash card, slash change with a question mark and then line equals and this is going to be whatever the line number is. so usually you'd be looping over with a for loop and it would show the index. now, since we're inside of this, uh, the snippet, this for loopindex won't work properly and we'll get to that in a minute. but then we also want to pass in the quantity of zero, which will remove it from the cart. so what we're doing is we're updating the quantity of a specific line item to be zero, which means it's removed from the cart. now the fix for this: we're going to go back out to cart dot cartliquid and we're going to add index equals for loopindex, right, because this file is where the for loop is happening, not within this file, and so i just want to make sure we have that index. we'll update the comment as well as add that in here, and there's documentation for this as well. so let me show you that if we scroll up a little bit, it's right here. shopify is omitting, you know, the actual line item code here. but but in your line item code you would add this anchor tag with the, you know, with this specific information, and then clicking that will remove that item from your card. so now let's have a look at the card and let's test it. if i refresh the page now, you see that we've added all that and i've gone through beforehand and added a bunch of styles of this just so i don't have to do that during this video. so, as you can see, here's the product we just added a little right at the beginning of the video: this heather girlfriend material crop sweatshirt and let's let's look at updating the quantity. so let's update that to three and then hit update quantities and, as you can see, the it refreshed the page and

Shopify Theme Build: Simple Product Form - Episode 7

hey everybody, i'm sam webb and this is part 7 of my shopify theme build series. today we'll be building a simple product form. so let's get started. as you can see, i've already set up a really simple product page layout, with the product image on the left and the title and description on the right. if we look at the code, you'll see that i'm using a lot of the same things that we've already gone over. so you see, here we've got this product object that's available because we're on the product template, and from that object we're grabbing the featured image attribute, the featured imagealt attribute, which is just the alt text of the image, the dot title and dot description of the product object. going back to the product page, you'll see we have a size guide here which shows small, medium and large. what we want to do today is allow a user to select their size and be able to add that product to their cart. before we write any code, there's a new liquid tag that we're going to need to use, and that tag is the form tag. if we go to shopify's theme tags documentation, we'll find the form tag on this page and basically what it is. it's a tag that will build out all the different types of shopify forms that you might need on different pages, and looking at shopify's first example of using the form tag, you'll see that they have the new comment form. the purpose of this form is to allow users to add comments to specific artikles. now it doesn't necessarily have to be used on an artikle page. you just have to have access to an artikle object to be able to create this tag. now, scrolling down, you'll see that there are a bunch of different types of forms that you could use, but what we're looking for is the product form. so let's get to there. here it is, and looking at their example, you'll see that this is what we add to the site and then this is what will come from that. so by using shopify's liquid product form tag, what we'll get back is html, will get a form element with a method of post and an action of slash card, slash ad, which is the url that you would submit your form to to add a product to cart. now this gives us some really basic information about how the form tag works, but if we want to learn a little bit more, we've got this note down here with a link to building product templates, and i already have that open. it takes us to productliquid templates page, and if we scroll down on this page right near the beginning, we'll find a little bit more information about how this product form works. so there are three inputs that we can add. we can add the product variant input that will have the name id. we can also- and that one is required- we can also add the quantity input with also the attribute name of quantity, and then we can add as many line item properties as we want. finally, we want to add a submit button so that we can submit our form. now, if you want to learn more about what's special about the product template, i'm going to link this documentation below, as well as the theme tags documentation. but for the sake of this video, let's go ahead and get into the code now. you can see i've got this comment here to show where we're going to be adding this product form. the first thing we need is the form tag. so that's form and inform, and with the form tag, as we saw, you have to tell it what type of form it's going to be. so this is going to be a product form and then after that we want to pass in the object that relates to that form. so we're going to pass it in the product object. now, to give you an idea of what the html looks like, i'm just going to really quickly add an h1 here and save that. we're going to look at the code for this form now you can disregard this h1. but the rest of the form is: you know, we've got this form, we've got a post, we have a method of post, we've got that same action that we toked about of slash card, slash ad, and then it gives it an id and a acceptable character set and it adds a class to it: shopify, product form. and it's got those two inputs. we toked about those hidden inputs of form type and the uh and the character set. i'm going back to the code. get rid of this. so, as we saw from the documentation, there are three things that we can add here. we can add the variant, we can add the quantity and we can add as many properties as we want. so let's start by adding a way to select the size. so let's create a div just to contain this and then we'll have a label called size. let's give this a 4 of product form size and let's make a select, it's going to have an id. that's exactly the same as before. product form size. it's going to have a name of id, right. so if we go back to that documentation, we we said we needed the product form input, but the attribute name for that is id, and so we give that select the name id, and then we need our options. so let's loop over the variance. we're going to create an option that has a value of the product or the variant id and then what it's going to. so it's going to have the value of a variant id. but that's not what you're actually going to see on the front end. what we're going to see is just the name of the name of that variance. we're going to say variance dot title and we save. we'll see we've got size down here and then, if i click it, we have small, medium and large. now this gets us halfway there. we still need to be able to add one of these products to cart. so let's go back to the code and within this form tag we'll just add a button tag with a type of submit. now we've got this add to cart button here and if i hit medium and click add to cart. what this is going to do is going to take me to. it's going to add this product to cart and then it's going to take me to the cart page. so let's add that to cart. so it's taking us to slash cart. if you look at the url here, slash cart. we haven't built out the cart page. we're going to be doing that pretty soon. but if you remember from a previous episode, we do have the cart javascript added already. so we can take a look at this. if we hop into the items of the cart, we open up this first item down here under title. we've got black girlfriend material crop sweatshirt dash, medium, right, so that's what we just add to cart. and if we want, we can go back and just- uh, you know, double confirm that it's working well. this time we'll add a large and click add to cart. and now, if we look at the cart, now we've got two items of cart. if we look at the first one, which would be the most recent one, and we go back down a title, we see black girlfriend material crop sweatshirt, large. now i want to mention that this is the simplest possible way to add products to cart. now this method can be used no matter how many variants you have, but it's best if all your products only have one variant type. okay, so in this case, this is a black sweatshirt, and the only thing that a customer can select is the different sizes. right, there's not different colors to this sweatshirt, but if i go to the all products collection and i pick something that has multiple colors- maybe the you are what you listen to- what you'll see here is we've got one drop down that has a black, extra small, extra small, black, small, black, medium down, true, royal small, and all the sizes in this one drop down. so for this, maybe you wouldn't want to use the word size here. maybe you'd want to use something like make your selection. for now, i'm going to stik with this really simple method, but in the future i plan to do a much more in-depth custom product selection that heavily uses the theme card javascript that we added in a previous video. i also want to do a video where we convert the product image on the left into a carousel so that people can swipe through all of your product images. so let me know in the comments below if those are videos you're interested in seeing, and also let me know if you have any other product page, specific things that you want to see, and with that i want to say thank you for watching. if you enjoyed the video, make sure you like, comment, subscribe and hit that notification bell and i'll see yo.

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.