headless shopify demo with Nuxt imgix Vercel

hello everyone tom dale here we're going to be building a nux project using a headless shopify setup so i'm going to go ahead and start building this right now and then we'll talk through what the rest of the project is going to be as we get the building going on just here we go so this is going to take us through the questions here for creating a next app the one thing is i am going to be using tailwind css i won't be using any of the modules or tools i will use universal and jam stack hosting and the js config since i'm using the vs code editor so the the reason i wanted to build this was because uh you know learning more about headless commerce brought up this idea of shopify can do a lot of things well they can do the the checkout process well manage your inventory images you know place to manage your images that kind of stuff but the performance on the shopify front end isn't very good but this idea that i could use something to bring in all of that all of those items from shopify to my actual um kind of jam stack project that'll be faster intrigues me a lot so that's why i'm wanting to show how to do this here so the first thing i'm going to want to install is the next shopify sdk it's going to have integration with shopify to bring in you know the images to do um you know checkout process all that kind of stuff so let's go ahead and start to install that now um once it's installed we are going to update the nux config over here with the these module exports next let's create our shopify account all right we're going to go ahead and get started here and just create a free trial on shopify so let's go and enter our info here alright so in order to get an api key going we're going to have to go down to the apps and we're gonna manage some private apps all right um let's enable it here so to go ahead this with shopify you do need a api key so we're going to go ahead and just do our next front end we've got a little email here so we do need the storefront api and we're going to want to turn on all of these here let's create the app so now that the app has been created uh you'll just scroll down and you'll see there'll be an api key here and that's the api key we're going to want to use in the dot env file that we're going to make okay so now that we have our code editor open we're going to go ahead and go to our nux config and be adding in the modules here so under modules we're going to add next shopify then we're going to be adding uh the shopify after that we need domain and storefront access token now we're going to use a emv file to pass these so i'll name it shopify domain store front access token now just as a reminder in shopify there is an api key but that's not what we want we want the uh storefront access token even though i'm going to name this whatever but just want to make it clear use the right one right and unoptimized true all right now we're going to i need to use this now we're going to add that dot env file right here so we'll create a dot nv file and we named them shopify domain equals and then for the uh storefront access token uh yeah it's called storefront access token but again what did i call it i called it shopify access tech and there we go and then we'll get that from the shopify page but i'm going to obscure that now okay now that we've set up our env files i'm going to go ahead and start messing with the index page here so a lot of this stuff here let's just go ahead and get rid of it all i think and start from scratch so i'll get rid of all of this i'm not going to need this container you can actually get rid of all the styling because i'm going to use tailwind okay so inside of this div i will not do that there we go now for tailwind if you're unfamiliar with it you're just going to enter items in the class section and it's going to be kind of shortcuts for a couple different things so here's a saved one i have here and this is going to add you know like a margin of 6. then we're going to start using grid grid columns and uh identify at which sizes we're going to use how many columns i'm using kind of custom named sizes so i'm going to go ahead and build that out in tailwind as well so let's make a tailwind config dot js all right so i'm just modifying the theme that comes standard by identifying uh certain columns right so essentially what i'm wanting to happen is uh when we are oh yeah you can see the preview right here okay so when we're 1290 pixels and larger on our browser i want to view three three columns one where between 850 and the 1290 i want to see two columns and then anything else do one column aka below 850 pixels so that's what i've identified here all right do one more so i'm gonna want to create a i keep doing this a component in this section and that's where i'm gonna like set up the the images and the and everything um i don't really want to use i just want to put placeholders just to see what it looks like so i'll still make the component but again we're not going to use any of the api quite yet i have some more tailwind stuff i'm adding a border rounding it adding a little gray background a shadow hover okay so for my component let's call it a product widget right and that's fine for now so let's go ahead and make that component all right so i named it product widget oh product widget dot view set up a little template here i don't need this style all right so we're going to make another div inside of here oh my goodness why do you keep doing that okay this is i'm gonna put the image inside of here so image and just have a source equals close the image down here we can also do i'm going to crop it and do margin auto let's just set a fixed width and height of 380. might as well do lazy loading whoops yeah all right and uh below it i'm gonna want a title and a description so let's go ahead and make another one right here i'll use a h4 it doesn't really matter i guess and uh this is product title and we'll go ahead and throw in a little description too and let me add a little more i just have all my css saved over here in the screen so writing a little margin for the title something about the font and the text we're truncating it all right and for the description i'll leave it in the same overall div um [Music] make this smaller uh keep the same color i was using is a gray 700 there we go product description [Music] there we go so we are looking at the image right here right here we're doing okay perfect yeah i think all i need to do i don't even think i need to do this but we'll name it okay so let's go ahead and put a placeholder image in here i'm going to use a phil murray okay uh let's go ahead and start up the server here and see what it looks like there we go so we've got uh we wrote in the production power description that phil murray it's uh give a good project widget here it is hovering when i go over it so it's good i think next we are going to want to add a couple products actually into shopify and then let's call them using uh this nux shopify sdk we set up to actually see what the json response looks like and format it all to work in next okay so let's add these products so i'm going to go into the add products section here and let's see what we have let's go ahead and add a hoodie put some price in here okay so we have three products now and we should be able to call these via sdks so let's go ahead and set that up okay so i'm gonna need to add in a fetch for the sdk the shopify to get the response just to kind of test out what we might get i'm actually just going to quickly create a little place where i can maybe show uh the json so i'm going to make a little list here real quick let's go ahead and give it a little margin and put the text in the center shopify json response and then we'll put a list in here we will need to do a v4 i'm going to call it product so let's do product in products we need a key i'm going to use the id so product dot id json response so let's make make that real quick right here um might as well register this component and the name as well um index page components product widget not view and then import product widget from yes yes yes yes um i did the components wrong didn't i yeah all right and the next step is going to be this should be right here the the async data so i went and copied this so i got it from here right so if you go into uh the next steps here for components you're gonna see they have an option to do a fetch i wanna fetch all but this is a this is fetching a specific id and you can keep going through and you'll see here here's a fetch all so uh async async data shopify uh constant products is going to await the sdk fetch to shopify.product fetch everything because i just want to see what it looks like and then return it all as products so i should be able to go up here and right here now just put uh product and we should see a json response let's see here here we go okay so this is showing everything that would come from that fetch all um so you can see it's it's broken up by product because you can see here's that blue hoodie i made and we should have uh yep images we can see there's a url in here it's under source okay so we can use all this info um so like for example if i wanted to get this source right here right i could do product dot images dot sources zero to show the first one so let's let's see that idea this and it should show each one for each product right and the dot zero is because you could put multiple images for shopify so it's showing the first one the primary right here we go so one two three we have the blue hoodie the holographic sticker the gamer jersey so if i replace this into our image source then i would probably i should see three different widgets come through with this image right so let's try that idea i'm going to go to my product widget right here i actually also before i do that i need to identify that product it's going to equal product when i go in there okay okay i just remembered that i need to actually add in this v4 stuff i did here before the product widget as well so let me go ahead and add the same thing here i'm going to need to do a v bind as well yep okay this is just to bring it into the component and then uh for the component i need to also identify uh the product as a prop right props it's going to be a type object default is null okay so product is yellow this purple is all matching up okay uh okay so now we're going to replace this image like we said with the product dot images zero dot source we are going to need to add a uh colon here to make it register there we go let's see yes okay so we have the uh three images here now you can see they are yep this is coming from the shopify right uh okay perfect now i still have just the default description title in here so we can also replace that pretty easily product.title and then this one [Music] product.description you can imagine you could bring in anything price who knows right yep sticker blue hoodie it's all here these are all still working this is perfect i think the yep okay so now the next obvious thing is it's pretty heavy right 10 megabytes um this is probably all coming from the knox side so when we uh do a build then it's gonna uh lower this drastically right and we'll go ahead and test that out soon uh one last thing i want to do is we need to add a little more optimization to the images i want to make them uh look similar in size next to each other and i also don't really want to use the shopify materials i'm going to use imagex urls so let me show you how i'm going to go ahead and go about doing that okay the first thing i want to do is install a view imagex plugin [Music] so here the github link to it so npm install view imagex let this run here next we will be adding a view imagex.js file in the plugins folder view imagex.js and i have this already copied here but we're going to import view from view view imagex uh wherever you use then you list your domain any any default parameters so for the domain uh let's go up here and see how i do that so with your imagex source i'm going to choose a web folder and the web folder is going to point at a domain and replace that portion of the domain and cname it to this right so this is my imagex domain and i'm pointing it at whatever shopify is pointed at so if you remember these are what my urls look like from shopify so it's cdn.shopify files and then we have these unique ids associated with my account and products so these will always be the same for my image products and your numbers will change certainly right but i'm copying this portion and putting it as a web folder here that okay um let's check on this do an npm fix all right next it wanted us to also oh and register the plugin on the nux config right [Music] here we go um i don't want me to do it on squiggly plugins okay plugins view magix.js yep that is good go ahead and rerun our environment here okay so i'm going to go back to my product widget where i have my source now i'm inst i need to bring in the source but the one thing about this imagex plugin is i declared the domain here so i really just need to bring in the name of the url or the name of the file right um because if i just pass in directly the product images source it's going to kind of like double in code right so i'm going to create a new source and then just do do a slice so let's do that in methods here i'm going to create it call it image source uh return this dot product dot images xero dot source dot slice okay so i'm gonna want to slice the beginning of it here so essentially all of of this right um i believe uh the number is i think it's 57 characters now i also want to go the other way i want to drop these ones back here as well i don't want the v equals um it's it's not needed if i'm going to change the url i'll just use a different one or i'll purge it using imagex so i i don't need this versioning record that shopify is using so take 57 off the beginning take 13 off the end and let's see what this looks like so now i'm going to pass this in here and i do need to change up this to make it ix dash and then i'm calling in that view sdk from imagex i'm gonna declare this as fixed i think we could be there i want to add some parameters as well but let's just see uh what we're doing now okay so let's see what we've done here it is working ix blue hoodie it's got all these these parameters here uh obviously it's blurry these are too large or you know where i can change the parameters that's fine you can see i i generated a 1x 2x 3x kind of a dpr variable here device pixelation variable so depending what device pixelation your browser is it'll automatically choose the right one and it'll also lower the quality as the dpr value increases because when you add more pixels you can compress it more and it's okay um but yeah i'm loading in at 214 wide which is the problem here and so let me add some index parameters to get the effect i want so i'm going to pass in something called imagex params i'm going to need to add it to the props too so let's add that real quick we have product okay so it's going to be a string i'm going to put the colon here so what i'm going to want to use are different fits so i do fit fill meaning force it to be a certain uh size and then uh if there's but don't crop it don't lose any part of my my picture right but i want everything to be the same size the 380 by three despite of the aspect ratio and then if there's extra whites or space left around let's fill that space uh with a color and the color is going to match the background so it won't look odd the color i used is this i'm also going to do a trim auto so if there's any random unnecessary white space try to minimalize it to zoom in on the product but again don't crop any of it out okay let's see how that there we go okay so this made them all the same size they're no longer blurry um i mentioned this idea of so this is obviously a different aspect ratio than these right when i'm dragging the image away you can see there's space on the top and bottom and it centered it but that space in the top bottom isn't noticeable because it's the same color as this product widget background right so it's not really noticeable like if i were to change the color you'll notice uh right away let's go with the white see you see it changed slightly i mean i guess we could get more drastic yeah so i'm filling in that extra space maybe i'll show this trim works as well there so you see how these when i took pictures of them i had unnecessary space all around them when i took the photo and and i want to instead eradicate the unnecessary space so that's what this tremado is doing and here's the right color here yeah great now what i'm inspecting again you can see all the parameters here are working it is doing the different device pixel ratios it's doing uh intelligent formatting and you know reasonable compression to ensure they look crisp and good okay perfect all right i'm liking what's happened here you know not only did i switch out the shopify urls um because i wanted them to be optimized more but i also wanted to add this kind of smart trimming around them and also adding in the background color and making sure they look a little more in sync with each other great well i think uh that is it i think i have everything i wanted to do i'm able to bring in obviously a lot more things as you can imagine you can continue to use the next shopify plugin to you know easily do the checkout process using next you could easily create dynamic pages when you click in each product takes you to the product page um i am using a fetch all right now but i only have three products and i'm on the main page so i'm fine fetching all the products but again when you would click into the product page you wouldn't use the fetch all you would use the specific fetch of the parameter of the product which you know again it's easy to do dynamically with next okay the last thing we're going to want to do is publish this to versil so i did mention the idea that i was gonna host it uh do some jam stack hosting and i wanna have it reflect uh the universal ssr so in order to do that um resell is really one of the better ones to do that with so let's create a vercell.json file uh i'm gonna add this in so it's just the builds to help tell it to run off the next config when doing the versailles builder this is very simple next i'm going to open up my github desktop let's add a local repository i should commit not private and the show if i test zero here we go new project it detects my new one i just did now i'll import it um so i am going to want to add the environment variables right so the items that you put in your env file put right here and then you're going to deploy that should be that the final thing you need to do okay i have added both values and uh one thing to note is in the dot env file i would put the values with the parentheses but here i didn't need to do that but let's go ahead and deploy okay seems like we have success let's visit it here we go so uh inspect this it is looking the way we are expecting the page is about 582 kilobytes now remember i did want to set up that this the universal ssr the reason i wanted to do that is because uh when i make a change in shopify i want it to reflect here without having to redeploy so to show that idea let's just change um this description right here everyone need to have okay so let's see it should take just a little moment to update that let's also test the page speed score for this site great 98 on mobile desktop 100. love it and there we go you can already see i just refreshed again and this is already updated didn't have to redeploy anything didn't have to set up any web hooks it's just running off of that next shopify sdk we set up again thank you so much talk to you all soon

Channel: Lets Go Headless

Views: 319

Rating: 5 out of 5

Keywords: headless, imgix, nuxt, vercel, shopify, headless-commerce, vue.js, web-performance, pagespeed

Id: vI_JpzCTUX8

Length: 38min 28sec (2308 seconds)

Published: Fri May 21 2021