Custom Cart With Shopify Storefront API

hello everyone and welcome to the first of five very special learn with jason's we're going to do a lot today all right this is going to be this is going to be big so we're going to do this in five parts across two days so today we're gonna do the first three on wednesday we're gonna do two more and our goal is to build a whole shopify powered database backed command bar driven email notification sending error monitored e-commerce app and we're going to do it all in about five hours total and so so to help with that first and foremost we're bringing in shopify expert kelly vaughn kelly how you doing i'm great how are you oh you know i'm just uh signing up for a lot of pain [Laughter] i love it you know i love this kind of build like this whole like five part series because usually i hit part one i'm like cool good enough let's ship it you know so i get to see see things continue to happen but i don't have to write the code it's great but chat you're not gonna do that right like you're you would never leave us after part one you're you're hanging out you're here to the end ride or die that's right i'm seeing a ton of first-time chats which also what a cool feature from twitch to to show first-time chats welcome uh to everybody who's here i see francisco i see uh there's uh suraj zeelaflash uh sammy like what up y'all thank you so much for hanging out today this is gonna be so much fun i see a lot of familiar faces in here too um i am i'm pumped this is gonna be fun however we don't have any time to get this done so uh we we're doing this in an hour and what we have to do is we need to build out a full shopping cart experience and we we got to do it fast so kelly before we start why don't you give everybody a quick background on who you are and then we'll we'll jump right in yeah so my name is kelly vaughan i am the founder and ceo of the taproom and also very recently co-founder of govalo i have been a shopify partner thank you i've been shot by partner for a little over seven years now so i i live eat breathe sleep dream about unfortunately e-commerce literally all the time um i've been coding for almost 20 years and i live in atlanta and my house smells like countertops were just put in because countertops were just put in i'm really excited oh congrats on the countertops i'm thank you and uh thank you for the sub i see some subs coming in i saw ximena earlier i see uh mechanic now thank you thank you thank you let's jump over and start building this thing so um we're going to get right into this screen and i'm going to show you this is this is where we were going okay so there was a whole gimmick right like we were originally planning to do this live at jams.conf and we had this whole like funny idea of what we were going to do and we were going to build out this site and uh we were going to pretend that i had like forgotten to build it so that during the conference i was going to build the swag site to give away the swag as some of you may know we had the most like murphy's law of all things happen and a bird flew into a transformer and took out power for the whole neighborhood that we were trying to film in um which meant that we weren't able to do the live stream part because our hotspot just wasn't strong enough to do that effectively so we rescheduled which means that this is gonna seem a lot less uh funny i guess and and so we'll just you know what if we can't be funny we'll be useful right i guess that's i guess we had to optimize for one thing um but so here's what we have right now we have this cart kind of slide out deal we've got these two pieces of swag and these are set up where you can kind of choose the the t-shirt size but when you click these buttons nothing happens right they don't do anything you're not updating your cart so what i wanted to work with you on um and thank you all for the the bits and the cheers thank you all very much still seeing a lot of first-time chatters what up y'all uh somebody's watching from the chick-fil-a drive-through i have good choice props props xander gifting out a bunch of subs thank you very much welcome everybody make sure you use that boop emote because even though the background's a little bit different today it still works um okay so here's what we need to do we need to use shopify's uh storefront api because they have a new cart feature right so if i look at the reference we've got cart and this is the feature that we want to use i'll drop this in the chat for everybody to look at um but so the the way that i was thinking of making this work is this site is built in astro um and so if we look at the site itself we can see that we've got um we've got like a basic layout and our layout's fairly straightforward here we we have um like a head we've got our styles i'm not going to go into the css at all today i actually wrote all this ahead of time so that we we wouldn't have to focus too much on it so let me just collapse that but go check it out if you want to see it was fun to write i think there's some cool stuff in there um we have a header our header loads a client component this is a react component or a preact component strictly speaking that will load when the site loads so this is why we use this client load and that'll actually rehydrate um and then that's it we have the slot where the rest of our content goes and that's where this index.astro comes in so in index.astro again i'm going to collapse the styles we have our layout which is what we just looked at that wraps the whole thing and sets the title and then we have our add to cart button and that also is going to hydrate as soon as we get an idle uh it's like request idle callback i think is what it uses um and this gives us our two things so i pulled these in hard coded from shopify these are the variant ids for the jam stack comp slap bracelet and also for the swag pack and so these are set up in such a way that you can choose the size that you want and then what we need to make these do is if we look in this add to cart button um we like if there are options we provide a select and then we show a button and button on click adds to cart uh but that add to cart doesn't do anything right um so we need to make this add to cart button work and we also need the ability to load our cart where we have an empty and then um we need to be able to like display the cart itself because right now we don't have it right there is no there is no cart we're just setting it empty so that's what we need your brilliant mind for kelly cool just a couple things yeah just a couple things so the probably the easiest way to do this is going to be through network functions because we got to protect those api keys um and i have this set up already where we can run netlifedev and i'll show here that bada bing here it goes we already have all of the environment variables we're going to need so um we can touch lightly on how you would find those things but we're not actually going to like go get them today because we just don't have time um and we can also see that there are some functions here that i need to check and make sure i'm on the right branch so that we don't surprise we're done here we go so i i created them but they're all to do perfect that's what i wanted cool good so we don't have to do some of the the like really structural stuff so for example here's our create cart this has a like send to netlify or send shopify storefront request we don't have to write this right i wrote this ahead of time so this is just a fetch api this is the built-in kind of fetch api we're using node fetch to simulate the browser fetch api and we send off the graphql query and any variables as a post request using application json and then we send in our storefront access token which lets us actually make the request and then down here we're going to actually use that but right now we don't use it at all it's just here ready for us to use so that we can pull that around um load cart we pull in that send shopify storefront request so that we can use it and the same with add to cart we're pulling it in i could have set this up in like a utilities function i just didn't i don't know why um but yeah that's that's where we're starting that's where we're going uh should we should we build yeah let's build all right so what should i do first i was going to ask you the same thing um i do want to preface uh one thing so so as jason mentioned we're using the cart api this is brand new as of this month so if you already created a like a private api key to use a storefront api prior to october you need to go in and update to be on 2021.10 if you want access to the card api so just a heads up there um i just saved you a lot of stress and struggle waiting to find out why why nothing's working yes um and so let me make sure that i have the uh nullifymyshopify.com and that should let me get to the admin it does okay i'm gonna i'm logging in really quick so that i can do this off screen and then i will show everybody what we're looking at yeah here is our if you're unfamiliar with shopify's apis uh when we're when we're looking at shopify's apis there are two primary ones there's the admin api and the storefront app you have the admin api dirty hackers the admin api is uh usually used when you're like creating a like an application like a like a shopify app um whether it's a private app custom app or public app doesn't matter um you don't display this api key anywhere just never ever on the storefront api this is going to be anything that's front-facing so anything that happens either on the shopify storefront or if you're doing a headless build uh and it's actually okay to expose that key because you're not creating deleting customers products orders things like that it's just a manipulation of data that already is safe for the storefront yes now in this case we we are doing it i think in a serverless function so technically we aren't exposing that key um but you know we got options right solutions are always good to have yeah uh so so quick overview here we have the um this is like the netlify swag store and we've got a few things in here here's like old jams.com stuff here's the the swag bracelet and all that good stuff um but this is what powerswag.netlife.com um so if you're interested in any netify stuff you can you can go find it there but we have a couple things that aren't in there like this this uh the other jam stack conf thing where's the swag pack jam stack swag pack it's a good name uh but yeah so this is this is our swag pack that we want to be able to sell and that's what we're pulling in here um and when we look at this site this is what we're pulling in like this is the swag pack and the the slab bracelet that we're pulling in um so to use the cart api we need to go to apps and then we've got this like shopify graphical graphical is just for like internal if you want to like test on shopify so you have two options here if you're building like for yourself or for a client you can either go the private app route or you can go the custom app route private app isn't just if you scroll all the way to the bottom of the screen there's a hidden thing that says manage private apps down there you click on that to actually go through the process to create a private app if you're working with a merchant uh it's gated so the merchant has to allow the creation of private apps the other option would be to create a custom app which is an app you'd actually install on the store itself where you can build like a a user interface for the app if the merchant needs to you know manipulate any data and you create that from within the shopify partners uh portal so partners.shopify.com if you're not already a shopify partner it's free to sign up you should do it it's fun uh but whenever you're not doing anything that involves like an admin ui if it's purely middleware i recommend going the private app route because it's just a lot faster it is a lot faster this is my friend kurt hello kurt um okay so now that we've got so i basically if we if we click in here you can see your oh do i need to roll these now um yeah it depends just all you need to do is uh disable all permissions um the storefront api again doesn't matter um just make sure the app itself you don't have any admin api permissions enabled okay let me go double check that i did that so i'm just it is a curt with a k to answer your question [Music] um it doesn't hurt to also refresh out of you uh i don't think you're actually using it though i think you're just going storefront yeah i just got to make sure that i didn't like accidentally show a whole bunch of permissions to everybody because i don't know what these are set for i thought they would be hidden wait delete the store yeah get rid of it get rid of it uh load load oh no okay while we're waiting for that to happen um let's let's maybe write some code right so yeah let's write some code the first and foremost thing that we want to do is we need to what like actually create a cart yeah let's let's start with creating the cart okay we're not going to have any data to pull into it yet but you need it so you can actually see something's happening yes okay so the first thing that we want to do is uh to create a cart we need to like make a request for one so in here we have our create cart and i through the power of movie magic um i'm going to just have this query ready to go so let me set this in here so this is the query that we need to fire off right so to do that um we've got this send shopify request right so we we built that ahead of time so i'm gonna await fetch and then i don't know no you can just do it what am i i just said what i was gonna do don't redo your work what did i just say uh okay and then for variables do i need any variables when i'm creating a cart like do i have to tell it to do anything no you don't need any variables in this at this moment okay all this is doing is just creating a an instance of a cart there's nothing more beyond that all you're doing is getting a checkout url and an id so when you're doing a headless build and you're and you're going you're using this card api the checkout url is going to be your my shopify url with the appended unique id so you can actually go to shopify checkout okay great okay so then we can check so so because of the way that we set this we can see that it's like getting the result.json and then it returns that back it does a little bit of error checking if the request fails so what we're going to do is we're just going to check like if it's missing data then we will just return a plain old status yeah so we'll just 500 and say something went wrong with the server and we can json stringify a message and that message will say there was a problem creating a cart right that's a that's a useful ish message it's not a great message but we're gonna live with it and then if we if we do get this what we want to send back instead of this to do message is we can pop down here and let's uh let's let's send it back pass the card id and then check out url back through okay so we want a card id and a checkout url yeah all right so if you're the the uh response you get back is like several layers deep um so you're going to have to check for uh cart create is the first response cart create check to see if that exists a little question mark um and then cart a little question mark and then id okay and you'll do the same but for checkout url okay so same same this bit and then we'll say check out url okay and that should be the whole thing let me do a quick check yeah we're using es build here um and the reason that we're using es builds it lets us do a couple things with our our functions first and foremost we get to use the the es module syntax of like import export as opposed to like module.exports and it means that we can use things like optional chaining here which are in newer versions of node only um which this is very very nice it's beautiful it shortens it makes it makes life so much cleaner it really does um okay so we've got the function is running so let's just let's just hit it right like let's try hitting go to postman and i'm going to fire off a function call postman opened in the wrong monitor let's get it over here and we will say how about all of this don't save maybe just yeah stop helping i appreciate you stop coming all right let's do http localhost 8888 and then um did i set up a redirect on this let's see yes so we want it to be an api right so normally you to get to a function you would type slash.netify functions and then the name of the function but we want this to be like an api so we're going to do api and create cart and so by you putting the star in here whatever we put in the splat we're just redirecting any call to api to the netify functions call so what we can do in here is just go api create cart and we shouldn't need any parameters we should be able to just send it and it sends back a card id that's great that makes me really happy and uh and then we get back the checkout url so this is exactly what we want and now we can actually use it which we will do in uh this this cart component so this is like our our cart.jsx this is a preact component but it's it's react the only real difference is that we import our hooks from preact hooks instead of react uh otherwise it's functionally identical it just makes the app much smaller um so let's well let's see what do i need to do here i need to um yeah okay so we need to get the card so the first thing we can do is in here we need when we get a cart we want to that has to happen like after the components loaded so we can put that in our use effect and then that's gonna fire when just just when it opens just when it opens yeah okay so this empty array means that it'll only fire when the page first loads and then to do an async call which is what we're going to do to call this function we have to like define another function in here um but actually no no hold on we're getting ahead of ourselves really what we need to do is we need to like set up our local cart data right so we're gonna get cart and inside here we need to let local card data because like let's let's walk through how this is actually gonna work right so because of the way that astro is set up we don't share context across the app because each like the cart component is its own little mini react app and the add to cart buttons are their own little mini react apps and that allows us to ship so little javascript but it means that we need to actually keep some kind of context and we'll do that through local storage um so to do that we're going to just kind of like keep that data locally so what we need to do is like check for a local cart but we can do right so if we can if we can find an existing cart we will do that um yes right now we don't have that so let's instead just create one right yep and to do that we just call our function api create cart and then whatever comes back should be json right so we just checked that and it worked and then we can set our cart which is this function up here that's currently an id and lines and lines are like the items in the cart yes so i'm gonna set the cart and in it we want to set an id which will be local cart data dot cart id right because that's what comes back from our create cart and then we want to set a checkout url which will be local cart data checkout url and then there's a couple other things that we're going to need so we need to know how much the cart costs but we don't know that right now because we just created a cart and then our lines are going to stay as an empty array because this is a new cart there are no there are no items in that cart um and then we need to put it in the local storage so do you use local storage a lot yeah so we actually use it for um we recently released a a client site actually that has three different view apps built into like a quiz flow um editing what's in the the quiz results and then the card itself and so we're using local storage to communicate between those view apps as well and this is built directly into a shopify theme i cannot take credit for it my team is an absolute genius for figuring that one out i love it okay so so this is uh this is pretty cool here right so so what we are able to do here then is um we can do window.localstorage set item and that will set our cart so let's let's run this and see if it works so it's changed and now if we come out here we're at localhost 8888 i'm going to refresh and no no functional change but let's go look at the application and if i look at local storage in here we can see that hopefully oh guess what we forgot to do what do we forget to do we forgot to call the function oh yeah uh so now that we've actually done that we can go so here's the async function but note that it's gray because we've never called it so we need to actually call that thing hey small details just the little things so we would need to add code all right so now if i reload the page here we should see jams at conf and then we get our card id and our checkout url so those are all the things that we wanted they did what we wanted um i am a little surprised it didn't include the estimated cost or the lines though local cart data oh i know why i guess it doesn't matter right because we don't we don't try wait do we track those things i don't know i don't think we are right now okay we can we can leave it alone it'll be fine okay but if something breaks we can address it later yeah we can always fix it so here's a challenge so now we have our our card id so everybody memorize this really quickly because we're about to change it um so if i refresh the page okay everybody everybody memorize that one right you can see that this change is no longer the same id and same if i reload again you can see that these are these are changing back here it's easy to look at the end because that'll kind of show like right these are no longer matching keys which means that if i like leave the page and come back or even if i just refresh i don't have the same cart which means i lose everything and that's all a bummer so how do we fix that yes so we need to get the item see if the item exists in local storage and set the cart to that and if not then create a cart all right let's do it so i'm going to first and foremost uh i just lost everything oh my god where am i what day is it uh let's see shoot shoot where are you okay so the we need to check if we're writing local card data right now yes so we're gonna we're just gonna like try to get this data out so we'll do window dot local storage dot get item and inside of that we just want to check for the same key so i can grab this key and i can put that right here and whoops then here if we have local data we can say like if the data is set because it'll come back and all if it's not set in local storage then we can um we need to load that cart which we'll have to write in a second i was going to ask if we've written it yet okay but what we can then do is we can set the cart to be uh let's do id and i think we can just copy this out actually let's local card checkout url um and then we need to uh like get our estimated cost but this is gonna end up coming from the loaded cart right so for now we can set it to null and then our lines are the same thing that are going to come from the existing cart so let's just set it back to an empty array and we'll say like to do load these from existing cart right and then because we've done this we can return and so this should if we did this right when we reload the page our id shouldn't change anymore so let's try so it ends in zmx let's see what happens reloaded still zmx reloaded still zmx ha okay so that's great and then um i think the only other thing that we need to do then is is make sure that there's a way to clear this because if you want to get rid of your cart we want a button to make that happen um once you add something to your cart you can never get rid of it ever again [Laughter] so let's do that really quickly we'll uh we'll write this empty cart here oops so for that all you have to do to empty a cart is just remove the um remove the thingy the the window remove the thingy the thing is yeah just get the get the thingy so we can window.localstorage.remove item and the item that we want to remove is this one get out of here right perfect so that that okay i'm feeling good about that that seems good we should save that and then to actually call it we need to let's see here's a button and it looks like this button won't actually show up until we've got something in the cart so we'll deal with that we'll deal with that momentarily um so next we need to load the cart so let's let's do that let's go to um back to our functions here how are we doing on time uh we've got a half hour oh my goodness we are killing it kelly this is amazing beautiful how you feeling chad are you excited what's uh how's how's everybody doing i am i am very very excited about uh how far we've gotten in 30 minutes i'm not gonna lie what's the magical thing that's happening right here um okay so so in our load cart we get to use the same send shopify storefront request and again through the the power of movie magic i am going to um grab all the query and this one it's it's significantly more important to have that query going because this query is i don't know i want to watch you we have enough time just write the entire thing i know i know okay so let's uh let's just do a quick check on what this one does so this query gets the cart and so it sends the the cart query and the id that we pass it is a cart id which we'll pass in as a variable um that gives us back the checkout url the estimated cost which is like the subtotal of um how much our cart is gonna cost us and then it grabs the lines which are the items in the cart so we limited it to the first 100 um and then edges is like a graphql term for uh like the connections we're going data a node is an actual item so this will be the the line itself so we need the quantity like how many somebody wants the estimated cost of the individual item um and then the in the merchandise we want details so for the merchandise we get the product variant this this is for a um like a type subset so merchandise can return more than just product variants but in our case it doesn't so we get the title uh the product title because the title is the variant title which sometimes doesn't make any sense the product title is like the the overarching top title and then the price v2 because there's always a v2 dot final dot final dot actually final v3 um and then the amount in the currency code so that we can pull out what each of these things is worth so that's the query now we need to send it which we do by first getting the cart id so we're gonna have to to post to this function so that we can get the card id um and whenever you post to a function you get oh wait hold on we don't need to post we're just gonna send it in as a career recording so this is even easier so um we send it in as query string parameters so that we can do that and then uh once we have that card id we can again use our send shopify storefront request and we send in a query we send in variables now our variable is going to be the card id right and we have to match this name the card id needs to match this name that's how graphql does it so then you just drop this thing right in here right so let's ta okay all right one query done and done and now i'm gonna collapse it because it's it's just too much it's too much to look at um okay so then what i just um before we move on some some comments yes i believe that you're using git lens um for the previous the last time a line changed oh yes yes okay it just get lens and it is incredible um i think it shows me a bunch of stuff over here too it's wonderful i i can't live without it it's really great it's really useful for uh for blaming as well usually i'm the one to be blamed but yeah like you can see here that says that i made this change or like this one i did it three weeks ago uh before jam stack confidence and what pr yep yeah and it's very it's so cool i love it yeah and in terms do you know why edges is used instead of nodes in terms of the the graphql terminology yes so when you are looking okay so the short answer is graph theory um the longer answer is that when you are looking at like relationships between data in a graph you have your nodes and like if you're thinking about rest you kind of have a parent and then children but when you talk about graphs they're not there's not hierarchy like that there's just connections and so a graph is connected like nodes are connected along edges and edges would be aligned between two points so if you're looking at like complicated data like a a website will have posts and comments and authors and authors can have both posts and comments assigned to them comments can only have authors and like maybe posts can only have authors with a certain type of permissions and so along those edges sometimes you'll get metadata how many per page um you know is there uh what's like what else shows up in edges um you can put different like um just different metadata so it's not actually like nodes it's the oh uh cursor as well oh yeah cursor is another one like where you are in the list um and just a bunch of little pieces of metadata like that that that uh that can be about the data that's being returned but it's not like strictly nodes it's more like around the nodes and so edges is sort of the edges are the relationships and nodes are the items if that makes sense um but yeah if you if you want to fall down a rabbit hole go read about graph theory it's uh it's a lot it's your homework that's your yeah that's your homework chat get out there and get out there and learn um okay but so so okay so when we get this data back what comes back from a storefront request i think we can just return it json string of idea yep and i don't even need to send it as an object i'm just starting boom yeah it's already an object so we send that back now this should if i go back here and i grab out my uh where is it my jam stack conf shopify cart now i grab out my cart id and then i copy this and go back to postman and let's call this load cart are you frozen on me no it's because i'm editing the wrong field um and then i can go to my query params and i can say uh we called it card id alrighty yeah and the value would be this right so we can see what's happening here here's the card id here's the the parameter i'm gonna send it and it sends back my uh let's see all that good stuff can i make this be far too uh text the the type you have there um down in the preview below i'm looking right now where you see pretty yes there [Laughter] so here we have the the cart the checkout url estimated cost we can see that it's zero dollars um and then the lines we have our edges and so since there's nothing in here there's not a lot to see but we can see that that shopify is giving us back what we need um and that is enough for us to go back into our cart and actually load our cart which is the the part that we need to do here and we can do that by going to uh where is it here so we're touching the existing yeah yeah so we can just like get the existing cart and that's going to be an await of a fetch and what we're going to fetch is api load cart like we said and then we're going to send in a cart id and we've got this local cart data and we pass in the cart id okay so that should do everything that we want it to do and then we know it's sending back json so we'll res json and now we have an existing cart which means that down here we can clear that up and this is no longer to do so we can clear that up and we will say s or existing cart dot uh what what was it what dot cart dot cart yep submitted cost and then dot estimated cost okay and then for lines go existing cart i assume dot cart again and then dot lines dot edges dot edges okay and this is where graphql gets a little bit confusing because you would think like oh just lines right but yeah it's because of that metadata that can come along that sometimes you got to go an extra layer deeper and the number of times i forget that and i try to loop through the array that does not exist yes absolutely um so there's our lines and that should i think that's that's everything right that i think that should be everything so now if you refresh we should see the estimated cost and lines in there now okay let's do it let's let's do the thing i'm gonna here we go i actually don't think there's any way for us to see any of it until we add something to the cart so maybe what we should do i'm going to turn off this preview um what we should do then is what console logo click on click on the uh the local storage what we had on there well we don't we don't put that in local storage i don't think because we're only setting it in and that's because we always need to load the latest cart anyways right so there's not really a yeah yeah okay so then the next thing we need to do is we need to add an item to the cart so that we can actually see any of this stuff work so let's go up to add to cart and again send shopify storefront request uh let's head on up and and grab this query through the the power of is everybody sick of me making that power of movie magic jokes it's okay they can't tell you otherwise that's right chat you got to deal with me actually that's not true at all they can just stop [Laughter] please don't leave good point i need you stay uh okay so this one we are running a mutation so in graphql when you run a mutation that's when you change data and it gets a card id and a variant id the variant id is the one that we looked at in um this add to cart button no it's not it's the one that we looked at in here these are variant ids so we're going to send in a card id and a variant id and we want to add a cart line so cartline's ad we send in the card id the lines you get one when you click the button and we pass in the merchandise id which is our variant id and then what we return is the same thing that we need for the cart so the lines edges node and then we get back quantity merchandise product title so i don't actually think we even use this i think it's more just to verify that we got a response back yeah um okay so then to actually use this we head back to the add to cart button and we're going to start by pulling out the card id nope needs to be a const and we're gonna destructure this cart id and variant id and those come out of the uh we are gonna post this one so the it gets posted in his json so we need to parse it and that's the event.body so when we when we post we get event.body when we use get like a query string then it's event.querystring parameters um then once we have that we want to get our data and that's going to be again the send shopify storefront request that takes a query and variables and the variables that we want to send are the card id and the variant id and the query is going to be multi-line so we're going to use one of those grab this thing out and drop it in okay so we're we're close here we've got our data now what should happen when we run this is that data will change we'll put a cart item into our cart which should give us actual lines in the result um and when that comes back we're just gonna send back we don't really need the data we just need the cart to update right so we can tell it to update the cart yep um okay so then to use this we gotta add to cart 15 minutes left we can we're gonna get this done we got this we got this okay yeah so to add to the cart we are going to do to do if i can find first we need to get the card id from local storage yes so first we need to get the card id and we are going to do that in a where we're going to do this inside the yeah inside the add to cart function um we'll want to uh fetch the local cart data and this is gonna be like actually this is just gonna be copy paste so let's let's just copy paste um and it's gonna be under load or not under cart so if we were being more responsible we would probably abstract this out but you know we're we're going for shipped over perfect and then and here if we don't have local cart data dot cart id if there is no local cart id then we're just gonna error because there's no way that we should like something else has gone wrong if we don't have a card id by the time you click the add to cart button because as soon as we load the page it should check if one exists and create one otherwise so we can just say like there was an error loading your cart and we'll just like error out so not the perfect solution but it's a it's an okay solution and remember this happens on user interaction so the only way that you could theoretically break this is if you were like programmatically trying to add to cart because you'd have to get into a race condition with the cart creation um so then to do that we're going to use the fetch call and we're going to send it to api add to cart and this one because it's a post we have to like explicitly tell it to use post and then for the body we're gonna json stringify and we're gonna send in the cart id which is local storage uh dot cart id and then we need a variant id and that comes from here so we're going to use this id right and now that's set where do we set that we set it right here so we set it yeah okay so when you change one of those does that happen like right oh it also happens right off the bat so it defaults to whatever the variant id there's ideas the set id is for if you have options so if you if you're choosing from a drop down we need to update that when it happens um okay all right so we're sending in our variant id and what we get back uh we're gonna do a quick check if the result is not okay then we again just you know just log an error because that's that's how much time we have there was yes there was a problem oh boy there was a problem adding the item to the cart and this might be like the variant is out of stock and so there's no this but we're not we're not handling quantities or inventory right now okay which is a whole different beast so there's there's something else that happens here and and actually let's just try this first and we'll we'll see what happens so i'm going to jump out over here we have this this should work and we can watch it in the network tab so when i click this we should see the add to cart happen there it goes okay and we get back a response it sends back the variant id so that was a request payload am i doing something to filter go back to the code for a second and scroll up you may have had a no that looks local cart data card id that's correct cart id card id yeah yeah that yeah oh no no no that's not that's someone needs to change um on json stringify uh you're doing local storage.cart id that should be local card data you are correct thank you i read the chat okay so it goes add to cart and then response there we go there's our uh okay so that gives us back and if we look in here we can see like here are the lines and it gives us back our edges and then our node and in our node we get the id the merchandise and in the merchandise we can see the product title of the slap bracelet and all those things so that being the case when i go up here what happened that didn't work but if i refresh the page it's oh no we have a problem how does our cart know to update right that's the that's the challenge we have here um but we can now check if our empty cart works let's try oh no nothing happened wait if you refresh the page though oh god okay so we have an issue where we need our cart to be like checking if it needs to update and so because this is astro we don't have shared context and we don't really need anything fancy here we basically just need to like periodically check if anything has changed and so a very like quick and dirty way to do that is to literally just set a variable that says what is that item that was helpful thank you um we're just literally gonna set an item that says like what this what the status is so we'll jam that conf shopify status and then i'm just gonna set it to dirty like okay you're dirty um and then what we can do is we can go back to our cart and in the cart we can check if it's dirty by just like running a regular interval here so we'll go down under get cart and we'll like set interval and that interval will run uh so the the state is going to be like window.localstorage.getitem and we're going to get jam stack conf shopify status which is the the dirty or or the clean um and then we're going to say if the state exists and nope and if the state is dirty then we want to run get cart and we also want to window local storage set item and we're going to use the same key i like the suggestion in the chat of calling this function wash i do like that that's fun um and then we're going to run this every like 500 milliseconds um and i'm realizing as i'm looking at this what we also need to do is like uh return a function so like and what we'll do here is we'll return a function that once this um this cleans we want to like clear this interval so that it doesn't like that'll do some otherwise we might end up with a memory leak if this like loaded and reloaded run forever um so now every half second our cart should check whether or not there is new data and that should mean that if we run this let's get it in here and look i'm actually i'm going to turn this off so that we can uh we can look faster i'm going to click and there it is we didn't have to reload if i empty oh that one doesn't work let's go fix it so what we need to do with the the empty cart is we also need to set that state so i'm just going to go back to the add and no this one and i'm going to grab this and i'm going to move it over into our empty cart so same deal we're gonna remove the cart and then we're gonna check the status and so now if i reload okay let's add there's my cart item by empty it goes empty and we're in business yep except that one doesn't work oh we haven't have we did we wire that up i thought we did what did i do wrong let's try it again purchase it adds to cart oh but the lines came back as null what got sent card id variant id oh no did my variant ids all change i shouldn't have i wonder if somebody entered a product oh god oh god did somebody change my product let's go find out um where's my swag pack jam stack swag pack has zero oh it has zero stock set so let me just update the stock so that i can make these available more actions edit quantities we'll just we'll just make it available um i'm going to set all of these open bulk editor where is my quantity did you find it i'm working on it uh look here i'm pulling this over so that we can see so what i'm trying to do here is i've got my variance i'm going to check all more actions click on more options yeah edit quantities um you have to choose a location and we're just going to set like i'm just going to set one so that it actually works and then we'll apply to all save and now that we are doing that if i come over here and i purchase let me just reload real quick why do you know it's still not working yeah it doesn't did i actually save this show me show me the add to cart function again add to cart function okay you are passing quantity in there yeah we're passing in a quantity and so the last time that this happened it was because nothing was in stock but i've just set the variance as having a location which means i need to figure is it fetching the latest knowledge because that wouldn't really matter i'm i'm now relatively convinced that the variant ids got changed so what i'm gonna do is i'm gonna go in here to uh we might just have to do the quick we got four minutes all right we're gonna make this work so we're going to go into uh the graphical app and i'm going to do a quick query to get our variant ids um and then this is why the graph collapse so useful it's it really is yeah so i want the storefront and then i'm going to go in here and we want nope not that one where's my we want products and then we want edges you'll need to give it a number of how many like first 100 or something uh under products oh and then we want the variance and then we want something variants first 100 as well okay and i need the title so that we can see which one it is and then i need the i the edges and oops yeah oh my god node and the id hey okay we did it query what free cost oh you run this one there we go now if i sticker packs argyle socks lapel pin show me the jam stack oh no do i have to do like query this um what's the i think like the handle come on i need the swag pack nope can i do like first 50 is that under the limit let's find out i think cutting down the variants probably also helped swag pack there you go here's the swag pack here is our first variant id that's not the variant id i need let's see um other i think there's a storefront id as well like like like storefront okay yeah yeah adam and id storefront id um that's the the first id is the actual unique id for the very end okay so here is the variant id make this smaller so i can actually get to it all right so i'm going to change this one out for the extra small if i please let me select things what are you doing okay we'll clean it up it'll be fine that's not what you selected what are you selecting right now oh my goodness y'all what just happened swag pack storefront id copy paste hey hey there we go all right let's see if it's different yeah i i don't know what's going on and this was for which this is for the first variant i assume yeah yes so here we're going to add to cart no it's index um and then we want to search and that matches so this variant id matches go back to the product somebody just mentioned that it's in draft mode that it's not actually published that might be black oh that is absolutely what's going on so let's go back ah it's always fun when things change let's go uh swag pack here's our swag pack wait it says it's active um is it available on your storefront api yeah james.com yeah it's there it's there active sales channels um okay let's just turn it off and turn it on again and see if that makes a difference fingers crossed you know what if if all else fails uh we can just chalk this one up to me not knowing what i'm doing with the the comp swag itself and that let's go back here we know this one has one in stock and then it worked so okay so it was probably just some lag but anyways so now we have the ability to like if i go add another one of these it says 2x um and then if i add one of these it gives us the slap bracelet okay so we did it we did it yeah exactly in in exactly one hour so make one request one little thing to add um on the success function after adding a cart toggle the card open on the success function after adding two cards go out to the cart yep toggle the cart open now the way that we would do that is potentially more than we have time for oh okay because i just lived inside there you can just say that you just add toggle cart to the i guess if it was i well actually yeah i guess i could i could i could set open to true if it oh was it was toggle car not okay right so toggle card's here but if it was open and you added the cart right then it would got i got it got it you're right yeah there we go okay and that way because otherwise what would happen is if i added it would like toggle just talk a little yeah you're right you're right okay so we we did the thing we did it yes all right so kelly thank you so much for all of your help and guidance and making sure that i didn't get completely off the rails as we did an absolute speed run of getting a cart in place um everybody we're gonna do two more of these today so we're back in like 14 minutes i'm not even gonna turn the stream off we're just gonna we're gonna get kelly back to her day being a dual founder so thank you so much for taking a good time out i have some food here that i need to eat so that's what i'm gonna do next okay so you you go eat your food uh next up we are bringing on um rob sutter from fauna and we're going to set up some shopify coupon codes so so be back here in 13 minutes and we're gonna get up and running with rob kelly thank you so much we will see you all in exactly 13 minutes thank you so much enjoy the rest of your day

Channel: Learn With Jason

Views: 1,180

Keywords: shopify, Kelly Vaughn, headless e-commerce, Jamstact conf series part 1, learn with Jason

Id: FJOJmKFngLI

Length: 60min 23sec (3623 seconds)

Published: Thu Oct 28 2021