E-commerce on the Jamstack with NextJS and Netlify

How to develop and Avalanche React present Are we all set up locally? Like you all have gone through the instructions, you have the repo. Did you click the deploying button on the getting started ReadMe? I want to know if there is anyone who isn't set up? You didn't set up yet, here. Well we dropped a link in the discord, I'm going to link the get started thing here. You'll be doing it as we go. And you know if you don't get all set up that's ok, everything is there. There's the main branch where you, is the completed, that's the completed project. For the most part, so, this workshop is supposed to be four hours but I'm going to try to keep it as close to two as I can. I'm going to be doing a lot of high level talking and copying and pasting so I encourage you all to copy and paste with me, or you can just kind of watch along and take notes it's up to you, but we will be moving kind of fast because there's a lot to unpack, and then I can get into the fancy Netlify stuff.

Alright, we're almost at 10 minutes, so I do want a few more people to join but once we hit 10 minutes I'm pretty much just going to get started. For those interested in getting set up and if you're having any issues, now's a good time to talk about where you're stuck. I'll help out as best as I can. Two minutes left. Y'all on the Discord too? Y'all paying attention to that? I'm going to just be dropping stuff in both. We met at React Native EU two years ago. That's awesome. Man, I feel kind of weird. I haven't touched React Native in a really long time. I still love it though. React Native is my first true love. I really like... I'm really all into the JAMstack right now. But I'm happy to see you here. Hello again. That was an awesome conference. No permissions. Hey, Lara, are you there? I guess... Yes, I am playing. Please tag me on the troubleshooting channel on Discord. It might be the link. Zoom chat and Discord. We're at ten minutes. How many attendees we got? Twenty three, that's not bad. I'm just going to go ahead and get started, if that's okay with y'all. No one told me that you're stuck or anything.

Hi. My name is Nick. I'm an open source maintainer who will be joining Prismic. I just signed the offer letter like yesterday. And so, today I'm here to talk about launching an e-commerce experience on Next.js and Netlify and two things I'm really excited to go over. I love theme UI a lot, and I'm also going to be sharing with you all... Thank you so much. I'm going to be sharing with you all the useShoppingCart library, which is a library that I maintain. It's a Stripe-powered shopping cart state and logic library. I'm really excited about it. Right now it's only available for React developers, but we have an update coming where it could be framework-agnostic. Today we're going to be using the React-only version for now, just because that's still in beta, but using it is more or less going to be the same. Also, I want this to be an interactive experience. I don't just want to talk to you all the whole, entire time, so if you have any questions, if you have the ability to unmute your mic, feel free to do so or just drop something in the Zoom chat or the Discord chat and I'll answer it as soon as I can.

I'm going to share my screen. I'm assuming that most of you are set up with the project and you did deploy to Netlify. Okay, no problem, will be here. This is also recorded. So let me know if you can't share my screen but this is the starting point. There's a branch that is specifically called Start. We have one part of it complete already. Just to repeat again, this is going to be a very high-level workshop. I'm going to be copying and pasting a lot of code. I encourage you all to do the same. There's a lot to get through until we reach Netlify.

We have this starter page here, like the landing page if you will. We have dark mode set up. This is being done by… Let me get you the repo link. I think I have it. It's actually in the Discord already if you scroll up a bit. There's the link. There's some instructions at the bottom that you can follow real quick. And you should be set up after you clone your own version of this. So yeah, I'm just going to jump into it. This layout was done by ThemeUI. We have a dark mode and light mode toggle. We've got a... Hey, what's up Alien Room? We've got some responsiveness going on, and we have Bill Murray. And so right now, we don't have any products or anything. I'll be showing y'all how to build out a products page with some dynamic routes, dynamic data, and integrating the used shopping cart library and hitting Stripe checkout. After that, we can move on to the Netlify features, stuff like split testing, which is really cool. Netlify functions for processing the Stripe checkout. And if we have time, I could probably go over Netlify authentication. And yeah, I'm really excited for this. I hope you all learned something. Again, feel free to ask questions along the way.

So right now, the page that you're looking at... So the reason why... One of the reasons why I like Theme UI is because, you know, it feels like one of the lesser opinionated libraries for, you know, styling. You get your generic box component and your containers and headings and stuff. But there's a really tight integration with those components and this right here, this theme object. And this theme object allows you to configure like a whole style system. The entire way that your site is laid out, the spacing, the colors and whatnot, they can all be defined right here in this theme object. So you can see I have colors, I've got fonts. This is actually the default. This is the default object that you get from Theme UI. And so I think there's like a configure page where you can actually create your own object. Let me get the link for y'all real quick. Theming... No, I can't find it right now very quickly. But yeah, they have a really cool page where you get to play around with the colors and this object gets spit out in return, you can handle font weights, there's like layout components and whatnot. And you can specify how you want your links to look and everything else. So just to show you what it looks like on that specific component, we have... So I made a layout component and this just wraps around everything. And I'm doing some inline styling here just you know, for the sake of the workshop, but nothing too crazy going on here. When we go to the index page, there's a few things that I'd like to call out. So first of all, as far as the dark mode stuff goes, so you can see here, we've got dark and light mode toggling, theme UI has a hook called use color mode. And so from here, I've got this button where you know, there's just some logic that toggles between default and dark mode using the use color mode hook. You could take this as far as you want. If you wanted like a bunch of different modes for a bunch of different like themed colors, this would be the place to do it, maybe have like some kind of array or object or something in switch case and whatnot. I just wanted to show the you know, the kind of standard default that we have here. So that makes it really easy. Another thing I want to point out is this array. This columns array, you can see that there's like one, two and three, and where they're placed is really significant. So you can see that this is responsive right now. If I bring it down to maybe tablet size, you can see the columns go to two. And when I bring it down to mobile, there's one column. This is my favorite. This is like my favorite feature. I pretty much haven't needed to write a media query, since I've been using theme UI. And you can do you can handle anything you can add this array in any Any CSS attribute, you know, whether you want to hide something or change colors or sizes or whatever. And so yeah, then it has like this card component. With some lorem ipsum text, you can see I'm handling the images the same way with the the The Once it goes, so I only have one and two. So this is for like mobile size, and then anything from tablet and bigger.

And so this ends up going into one column, which I have this little mistake here, you know, the, I probably could have done something to add the image to, you know, above, This story is great to keep it consistent. So, that's, that's my preference. This is my preference. It's built on top of styled system. You don't have to use theme UI like you can also use styled system directly if you want more, more hands on approach, and I think chakra is also built on top of styled system.

So your typical ecommerce store experience is the landing page and whatnot. So what we have here we click on products and there are no products here at all. And so this is where we're going to start doing a lot of copying and pasting. So the first thing we're going to need, so we need like a source of data. And so this should already exist in the repo in the startup, in the starter branch. And so we have this array and this array has two objects. We've got apples, we've got apples and bananas. And so using this source of data is how we're going to proceed with this workshop. However, keep in mind, you can pretend that this is some kind of back end, whether you're hitting a CMS or a database or something. We'll be using useShoppingCart and useShoppingCart needs this kind of structure to add things to the cart and interact with it. And yes, the grid component is really nice. I love it.

So, first thing, actually, let's go ahead and start off with the integration with useShoppingCart. So I think I have everything installed already. I'm going to go to AppJS and let me go to the repo itself real quick. So again, I'm copying and pasting. If you want me to drop the links for the pages I'm pasting from, let me know. But if you switch to the main branch, you can see the finished results. And so this is the app component. This is the initial app page. So Next.js, I don't know how familiar you all are with the Jamstack frameworks. It's pretty much standard for any file that's inside pages. It's going to create a page for that. So we have this app, which is like the app configuration itself. Index is basically the forward slash. We have a products folder in an index, which means that that's what created the forward slash products page. We could have also just made products.js, and it would have gave us that URL, no problem. But there's a reason why we're using products folder, and I'll get to that in a second. Let me first copy and paste this page real quick. We have app.js, so things might be a little out of order too, because I'm copy and pasting a lot, but I can actually go into detail on why things are the way they are. This is how you set up Ushop and Cart. Mind you, with the next update, there's going to be some breaking changes here, but for now what we're doing is we are initializing Stripe. If you want to process any payments with Stripe, you have to initialize the Stripe object that's tied to your, I said Netlify, that's tied to your Stripe account. So we have the environment variable set up, next public Stripe API key. We pass this to load Stripe and it gives you back that sort of authenticated Stripe object so that you can go ahead and process those payments. And so we're passing this Stripe object, oops. We're passing the Stripe object to Stripe. In the next version of UShoppingCart, you'll only need to pass the API key itself. You are required to use the Success URL. And here, Netlify offers a URL value so that this is always going to point to your website. But for here, for the workshop purposes, if the URL is not available, then we're gonna point to the success page. So this is what happens after somebody buys something, it goes to the success page. You can thank them from there. The Cancel URL. If that person ends up canceling their purchase, you send them to this URL. This is my Twitter account, I wanna know why they canceled, so I want them to talk to me immediately. You set your currency here. The allowed countries, which Stripe offers many countries, more than most payment platforms. Then we have two modes to use Shopping Cart, and if you wanna collect the billing address and whatnot. We have two modes that use Shopping Cart, there's Checkout Session and Client-side Only. We're gonna do Checkout Session today because I wanna show y'all how to implement Netlify functions and have a serverless approach to this stuff. Client-side only allows you to process the payments, but those products have to be created on the Stripe dashboard. And in my opinion, the Stripe dashboard is a little limited. If you need something really basic, that's okay. It is secure, but with Checkout Session, you have to take some security measures in your own hands. So yeah, we basically wrap this cart provider around... Well, we have the theme provider from Theme UI. Actually didn't show y'all how to set that up, but that's pretty straightforward. And then we have the provider... Oh, this is for Netlify authentication. But like I said earlier, things might be a little bit out of order with this copy and paste approach, but that's okay. So we have... Well, let me get rid of that for now because we're gonna get some errors. I'm gonna leave that like so. All right.

Great. So now we have the cart provider wrapped around the entire app. This means we can now start using uShoppingCart. But before that, it would make sense to kind of prepare Next.js to start dynamically creating routes and dynamically creating the pages. And so this is a big thing. This is like the big hype around the Jamstack and these types of frameworks is how much that they actually automate for you. So let me grab the code from this page. And I think maybe for this one, I'm going to, because this is really important, I want to copy and paste important aspects, like one at a time. So the start of this code. So first of all, and I think this is really clever. So we have this products folder. And what we're going to do is we're going to make a new file and we're gonna do a square bracket and we're gonna call this name.js. And the reason why we're doing this square bracket, we're pretty much telling Next.js that like this name is a variable and we want to have different pages with different names. And there's going to be a bunch of them. I think this is a really clever API that they did there, because it communicates a lot. The square brackets before you even get to see anything in action. So I'm copying and pasting this first piece here, we're importing uShoppingCart, theme UI components, and the products, JSON layout. I have the string here for slugifying. I'm sure there's better ways to handle this. But this is to make sure that the URLs are consistent and they would play well with the browser. And so the next piece is this really important function. So this is pretty much a life cycle method from Next.js, it's called getStaticPaths. And so the purpose of getStaticPaths is to gather all of the URLs that you're going to be using for your pages. And so we're mapping through the products, the products array that I showed you from that JSON file. And then we are returning name as the param. So this is going to be the name and and this is in reference to what we're getting back the sluggified version of that name. And this name is actually what is going to be that the dynamic piece of how we're going to name the pages. And so, yeah, we're returning the path. So we're giving it back all the paths that we want with the names that we want. And then the next half. So this is setting up the URL. The next half is actually setting up the data. To go with it. So getStaticProps is taking the params of the data that's coming from products. And we're kind of like mapping over it again and making sure that the product name matches the products that are in the that we're looping through right now with the filter. And we are returning a sluggified version of, we're returning that that product by, you know, making sure the sluggified version of the product matches the name of the param that's coming through. So these these two functions are sort of like aware of each other. I don't know if I gave the best explanation or if someone can explain it better than I But what we see here when what we're returning, we're returning a props object. The props that are going to be injected into that component, and it's going to be, well, we're getting back an array. And so it's going to be product data and the first element of that array. And that first element should be the only element that's in there. But yeah, for the most part, the idea is create all the paths, get all the data for said paths and sort of inject that into the props of the components. And so what else do we have? And so here's where the actual component comes through. So this is going to be a big paste. Oh, and let me know if I need to increase the the font size or zoom in or anything. So below that. OK, great. Awesome. Awesome. Yeah, so below that, we are then returning the. It looks like that. Oh, yeah. We're exporting at the bottom here. OK, just making sure so. So we have this product. And so remember, we're injecting the product prop to this, the components that it's creating. And so here's where we're doing stuff with we're getting the product data and we're providing it a function from you shopping cart called add item. And so we have the layout, you know, wrapped around it and then we have box. And so we're using the Sx prop and Sx is the prop that you need to refer to, refer to the theme that theme object with that has the styling configuration. That's how you access that stuff here. And you can see that I am telling it to look at primary. And if we go and look at the theme object real quick, you can see that my primary color is teal, you know, because Netlify. So if I change this to like red or something, it will reflect the names that I gave the colors here. That's another thing that's really cool about theme UI, you know, because it allows you to point to these kinds of variables so that, if Netlify decided to change their whole entire color scheme to like orange or something, you know, you update it only on one place and you don't have to worry about it anywhere else. And then outside of referring to the actual theme object. Otherwise, this just becomes inline styling. But I love the SXProp. It's my best friend. So here we're using theme UI image. I think next JS actually has their own image component, which is way better.

So just use that instead. And, you know, we're passing all texts in the source of the image. The rest is just more or less the styling. Oh, and you shopping cart comes with the utility function that handles formatting your currencies to be the way they should be. And then we have a button for add to cart. So actually, let's take a look at, so I think I need to restart the server. Y'all might have to do the same. Oh, I'm going to do Netlify dev. Oh, I'll use Yarn dev, let me see what happens. Okay. Any questions so far? Are y'all keeping up? Are y'all learning? How are we feeling right now? Am I too fast? Am I too slow? Okay, great. So, all good. All good. So, that was just sort of setting up the new pages. I think those pages exist, but the actual initial products page itself has no way to refer to that data. And so here you can see we're using get static props again. And what I'm going to do here is what I'm grabbing. I'm grabbing the products data again. And I'm going to make it presentable in this product's index. So, let me go and grab the code for that. Feel free to join me on that main repo. Did I link the main repo? Here. I'll just start. That's the main branch. The main branch has all the, you know, the finished results. So, let's just go back to. Yeah. So, hold on one second. I'm just going to, I'm grabbing the code right now. Again, this is going to be a nice chunk of code that I'm going to talk through. So, I'm going to paste. So, again, grabbing the product data with get static props. Passing it to this component. So, like wherever you do get static props, you can just refer to it in the component that you're creating. And so, from here, we are mapping through those products. And I'm using next link, which you need to pass like the A tag to it for the children. And I'm using the theme UI components under the hood. I'm using format currency string again, and the add item button. So now when you look at the products page, you can see we have bananas, apples, and we can add to cart which I'm not going to click quite yet. But if I click on one of these, you can see the layout of the component. And so if you want just to mess around just to show you all that this is like dynamic page stuff going on here. Why don't we just add something else? So i'm going to grab i'm going to make this. I'm going to call this oranges fruit 123, oh, whoops, three, I'm going to give it a different price as well. Let's say six bucks. I don't know, they're the best oranges ever. Oh, mind you. The slug data is actually in the product object itself. So just keep that in mind. Alright. Alright, so now we have oranges here. And if I click on this. We have the orange page, and the Add to Cart button refers to that and everything. So as you can imagine, you can save a lot of work with this kind of stuff. I only wrote it once. And so people when you're using your CMS, you know and you need to kind of provide this for a client who hasn't, who isn't very tech savvy. You can give them like something like sanity to build out their products and whatnot and you can just trust that everything is going to get rendered the way it should be. So there's something missing right we want to see, we want to be able to see where we have the, how many items are in the cart. And so one place that we can head to first is the header. Um, I think this is a matter of what is sanity? Yeah, so sanity is a CMS, and it's one of many CMS is that you can use. But yeah, it's, it's a CMS, there's a lot of times one thing that I see people do with the uShopping cart a lot, their clients aren't there they're like freelancing and their clients aren't very tech savvy but they want to still be able to contribute and add and take things away and add things to a website. And so what they would do is set up their. Yeah, you can definitely replace it with Shopify there's any any back end like Shopify has a developer account. We're not going to go into integrating a CMS however, the next j sdocs has plenty of references I'm going to link it to you all at the end of this. I got to mention that for Robinson he made a whole list of CMS is in tutorials on how to integrate with them. I'm going to remind me to link that at the end of this workshop, because I think that would help you a lot. So one thing that I have is this shopping cart icon. The shopping cart icon is this complete Yeah, it looks like it so I'm just going to import it real quick. The header. And so this is basically your typical shopping cart icon with, you know, at least a number that tells you how many how many items are in your cart and whatnot so components shopping cart icon, and then I'm going to uncomment this. Oops.

Alright so we see here we've got this shopping cart icon. And when we click on Add to cart, a number pops up next to it. and doesn't matter which one you click on it all adds to it. However, when you click on the shopping cart icon itself, nothing is happening. So, this is what we're going to work on next.

So I tried rolling my own sort of accessible modal. That was a horrible idea I'm never going to try that again. When you want to do anything with a modal I highly recommend using Reach. Their dialog component is perfect for this use case. So, if you head over to. Yeah, If you head over to the checkout modal and check out details. These components should already be built out. But these are what we're going to use to set up a modal. No, no, not at all. We're using next JS's router instead. I actually if you look at the way I what I imported. I literally only imported the component itself. So there's no reach router in here at all. So, with that being said what we have to do is we want this modal to be available in the entire layout. And so. Yeah, what I'm going to do here is I'm going to import Checkout modal from components. And I'm going to slap it on at the bottom here.

Thank you should read the question. I'm sorry. If you're recording the session, I think you should read the question. Wait, which, did you ask me something I'm sorry did I miss something. I don't understand. I wonder what why I feel like I've been answering all the questions, let me know what question I missed. Sorry. So anyway. You can see here that we have the checkout details. So the models popping up now when we click on So you shopping cart actually has a value for whether it should display what's in the details or not. So hold on one second. I just want to find it. So handle cart click. And so what's happening is this turn something. It's like called should display cart in this toggles that. So that's how that's working. Oh, got you. I'm sorry. All right. Yeah, so people were asking how to integrate the CMS. Somebody asked if the reach dialogue doesn't require a reach router. My bad. That's a good suggestion. Yeah, I'm gonna do that. I didn't think about that. Thank you. So, yes. So yeah, that shopping cart icon toggles whether the cart should display or not. That's why this works. We still don't see any of the data in here. And so that means that we need to. We need to add these. Well it looks like this checkout details is already here. Let me go and copy and paste this thing. I might have, I might have missed something with what I did just now so one sec. I have like an entire layout for the, for the things it shows. So, hold on, check out details. Oh, it's all just straight up commented out. That's what it is. Alright, so all this stuff is there already. Lots of copying and pasting and, and I'm commenting I hope that's okay with y'all. Why is everything so red. Let me get rid of. There we go. So yeah, just to show y'all how to like render these, these products. What's in the cart. So well let's just take a look at it real quick. Boom.

So we see bananas, apples, I thought I clicked on oranges. Oh, I guess it's only showing two at a time. I had to make it scrollable. Yeah, I actually never intended it on doing this workshop, with showing three items so. Yeah, nothing too complicated I'm not going to try to fix it live. Now, you can see here we have the oranges we have the apples bananas somewhere in here. We can, you know, use a drop down to add quantity. So yeah, let's, let's just go over that real quick. And then we'll have to talk about the netlify functions for hitting checkout.

So, yeah, so we're we're mapping through all of the cart details, so you shop and cart has a key called cart details. And this is basically all of the important information that you would want. When you're displaying what's in the cart. So you can actually if you go to the USHOPPINGCART documentation, and we go to add item. You click, Add to cart, and this is more or less what you're getting an object with the name of the product as the key and stuff like that. And so that's what we're using here to display what's going on. We're doing this with the table, you know, and and then yeah we then we have the handle submit function so I want to see if that works real quick. Because it's already set up. Oh, you know why because I never I never made the function. Oh, yes, I did. It's right here. All right, hold on. So what kind of error did I get. So, I just want to make sure that I run this. I think I need to run this with Netlify dev. So if you have the Netlify CLI installed if you do NTL dev. And so what's happening is, when you run Netlify dev it allows you to fire the Netlify functions locally. And I don't think I told you all to run with Netlify dev when we started so if you're running this project right now with yarn dev, or yarn start you're running it on next JS so spin down your server real quick and run it with Netlify dev instead. All right, let's see if this works. Now, Oh, because it's a different local host. So one thing about you shopping cart it actually persists to your local storage, because I have a new URL all the cart stuff is gone. But you can see once we hit Add to cart. And we refresh. Everything is still there. And we're going to try hitting checkout again. Boom. And now we're here at the tripe, the I said tripe, the stripe checkout experience. You know you can see the bananas the description. Somehow, the, the oranges are missing. Let me take a look at that that oranges. There's got to be something I missed with. Yeah, so there's no oranges here at all. I must have made, I must have made a mistake with the product date JSON or something. Oh, the two skews are 123 fruit 123. I'm going to do. Alright so this is going to fix everything. So fruit, XYZ. Yeah, I thought that was really weird. So, I'm going to actually clear local storage because it got messed up now. One sec. So now, there shouldn't be an issue 12. Oh, wait. I'm going to clear local storage again and then refresh because it's still persisted all that stuff. So skew is actually old? I'm skew is is the it was, it's called stock keeping unit. It, it basically was the ID for a stripe products. Last year, but stripe no longer uses skew with switch to ID now you shopping cart actually has a handler. If you're still using the old skew. It turns it to ID to help you set up so you could use skew I do not recommend using skew anymore. It's part of an older API. But you shopping cart takes care of it for you under the hood so you don't have to worry about it. Let's try this again, add to cart. Bananas, apples, oranges. Yeah, there we go. That's what I was expecting yeah that so that was my bad. So yeah, again, we can add whatever take away whatever. Let me put bananas back I want to make sure this is reflected in the checkout experience. It doesn't like it anymore. Hmm. Looks like we're going to have to do a little bit of troubleshooting still says there's two items in there which there aren't any more. Either way, I think the most important thing that we should talk about is, you know, the Netlify functions themselves, and setting them up. I know I just kind of breezed right through it.

Oh, wait a minute. Let me stick to apples and bananas for now. And so you could just fill out whatever in when you're using stripe. There's a test card that you can use it's for to for to for to for to. And so you can't for to anymore. And then you can just add whatever random numbers down below processing. And it takes you to a success page which I never made and we should actually talk about the success page, because one issue with this experience is that you can see the items are still being persisted to the shopping cart. And so, I have a little cheap way of handling that.

It's about to be one though it's been an hour so far. I wanted this to be two hours long, and I think I kind of went, I went way too fast so why don't we just spend some time, you know, trying stuff out asking questions. But let's take like a 15, a 15 minute break. Actually a little bit more. Let's come back at 115. It's 115 for me, I know it's like six, 715 for y'all.

How much can be charged for making an e-commerce with YouShop and Next.js? Oh, I mean, that's up to you. This isn't a consulting. I'm not some kind of consulting expert, but you always wanna make sure to ask your clients what kind of budgets they have and what makes sense for you. I'm not gonna touch that topic. I'm sure there's a lot of people who can give some nice suggestions on dealing with clients and stuff like that. That's a different topic. That's a different workshop. I wanna sign up for that workshop. But yeah, why don't we take a break? I'm just gonna leave my screen up like this sharing. I'm gonna shut off my video and mic, feel free to have some questions here. If you want, go grab a snack, go grab some water or something.

Tomato timer, what's this? Okay, that's pretty awesome. So for the break, all right. I wanna change this to, I guess, 20 minutes. All right. Oops, I started it. All right, let's just do a 25-minute break. This is really cool. So we'll do a 25-minute break. I'll be back in 20 minutes, if y'all are back too, then we can take it from there. But yeah, I'll see y'all. Thank you for the link. That's awesome.

Hey everybody, I'm back. I'm gonna cut this early. Yeah, I just feel like you know I was trying to keep this around two hours and taking like a 25 minute break, might have been too much. Also, I just realized there's a whole q amp a section on this zoom, and alien room asked asked what is theme JSS. Is it a library like Bhooma or bootstrap. So this is, we're using theme UI. And a big part of theme UI is a big aspect of it it uses styled system under the hood. This is like CSS and JS library. And this theme object, basically is a configuration for how you want your entire website to look. And so, you know, so we have this like, let's, let's just mess around real quick if I change this to coral. Yeah, I'll paste the library. I just said, I just want to said I want it to be coral. And now everything is coral from the text to the header to the pages, you know, I'm going to link the library right now think it's theme.ui.com. Black Lives Matter of course. And then when you go to. Yeah, so here's the homepage. So I just linked it in here, I'm going to drop it in the discord as well. And I think there's a URL themeui.com and then you put custom at the end. Oh no, customize here it is. So if you wanted to kind of make your own, your build, you like, this is a big ugly object, right? You don't want to make things like that. In here, you could actually go to this theme object. You can build a theme object here by messing around with the colors here and stuff like that. I'm not going to copy and paste this because this looks horrible. This is not accessible. And then you can hit copy theme and it gives you back an object with all that configuration. So it's pretty nice. I don't feel like I'm battling with the components they provide either. Are we all back? Am I good to go? Because what we're going to talk about next is actually implementing the Netlify functions to handle the server side stuff. Can I get like a thumbs up or maybe a shopping cart emoji? That's my favorite emoji now. Whether it's in the Discord or in the Zoom chat. Let me know if you all are ready. No? Ready? We got one. All right. Well, this is recorded. I already showed you all what it takes to go straight into checkout. There's a few things. There's things. I pretty much went over everything I wanted to, but there's things that we can go back and catch up on. And so the Netlify function is one of them. So if you look at the inside, is it inside? Okay. At the root level of this project, we have a functions folder and then we have this file called create session. Now create session, whatever you name your file, that's how you have to access it through fetch or Axios, whatever you use for your data fetching library. But one thing I wanna point out, it's really important, so first of all, you need your Stripe API secret key. So the publishable key allows you to process payments and stuff, but the secret key allows you to do a lot. You can do everything with it, so it's important that you keep this one hidden. We have this method from Ushoppingcart called validate cart items. Now the reason why this is important, if somebody were to go to your products, let's say they're like some kind of evil hacker genius, and they wanna get your oranges, they're like, These oranges are just way too expensive. I want this for a penny instead. They can manipulate the DOM with inspect, change the value, and if they add to cart, it'll actually get processed, and they'll be able to check out. And you'll be wondering why you are getting paid so little for such a high demand of oranges. This is something that you have to consider when you're going with this kind of implementation. That's why we made validate cart items. What validate cart items does is look at your product inventory, and then it takes a look at the cart details and maps the correct values to where they should be. I think we could maybe take a look at it real quick. No, no, that's too much. Sorry. Basically what happens is this ensures that your prices and your IDs and all the other really important information for checking out is where they should be. Validate cart items is really important.

Again, we're only using this JSON file for... We're only using this JSON file, but pretend like this is hitting an API. If you're using a backend like CMS, Shopify, Snipcart, whatever, make sure that you're formatting the data the way it needs to be for validate cart items. It should take the same shape as the products that uShoppingCart accepts, and it'll handle the security risk for you. If you're not using checkout, if you're... If you are using Stripe's dashboard for checking out, you could skip this. You could skip this, but it's more secure. And again, the dashboard from Stripe is a little limited in my opinion. So you have the mode which is a payment mode. This card and the allowed countries and stuff like that. So this is information that you have to put in the Ushop and Cart Library itself, but because this is serverless, it's not really attached to the library, you have to manually do it yourself. I'm working on ways to support this in the future. And so, again, Netlify provides the URL for you so you don't have to worry about setting the right environment variable. This is always going to point to your website, whether it's local hosts or some kind of domain. And then we have line items and line items is the result of giving validate cart items. This is what validate cart items returns. So, really straightforward. What you're doing is creating a session ID with Stripe, and then you're going to use that session ID to go to the payment, Stripe's checkout, Stripe checkout for a payment. Now, let's go take a look at how we are handling it. So, you can see right here I'm using fetch. And so, this URL we have.netlify functions, create session, it's a post method because we're sending the cart details data to this function. And we're handling the promises and stuff like that. And when we're done, we're using redirect to checkout. Redirect to checkout is part of Stripe's, the Stripe object. However, Ushop and cart actually has its own wrapper around to redirect to checkout. And what this wrapper does basically is checks if you're using this library in client only mode or if it's going to be serverless mode. And then kind of chooses what to do the appropriate steps after. So we're getting back from the response, the session ID. And that is, and that's what gives you this experience. This is how you get into the checkout experience. Let me know if you all have any questions about that. You can use as many functions as you want. One thing that's important that I should have probably pointed out the very start of this workshop, you see this file here? This netlify.toml. This is how you... This is what I'm using. So you don't need this toml file. You can go into the netlify dashboard and configure things the way you need to. You can tell it what to look at for your functions and whatnot. But I have here this path functions. And so this is telling it to look at the root level, look for a folder called functions, and that's how it knows what does toml. What does toml stand for? We're about to learn today. What does toml stand for? I have no idea. Tom's obvious minimal language. That's hilarious. Wow. So today I learned I had no idea what that stood for. I don't know if ya'll knew that but I never questioned it. I never asked. But that's pretty great. So anyway, another thing I wanted to bring up is a component for accessibility. Let's say your e-commerce site has a whole bunch of links in the header and you don't want, you know, people who are using the keyboard and screen reader and whatnot, every page they go on they're going to have to always go through what's in the header before they end up getting to the content. So we have this component called skip link, which allows you to skip straight to the content of the page versus going through everything in the header. So I'm going to I have this already imported, I think I'm going to uncomment it on layout. Yeah, so skip link is right there. Let me import it. So import skip link, well something's wrong. Oh, okay, so import skip link from components, skip link. Now what this does, if I were to use a keyboard, I just press tab and something pops up that says skip to content, and if I hit enter, you could see the URL updates with the main ID and the screen reader proceeds to go through everything, the main content. This is really important I think to always have like a skip link component available. I don't have that main ID, oh, it's just, I'm using main here. I wrap everything around main, so it'll always know to go over that content. So if I hit like products, I hit tab again, this way they hit enter, it goes straight to reading through the bananas and stuff. Are there any questions? Do you have any questions about, you know, I think now's a good time to open up for questions real quick. We can then get into split testing, but I just want to check if anyone has any questions or anything we more or less are, we're pretty much through the main content. Oh, the under, Oh, so why do you name AppJS with the, with the underscore? This, this just comes with, this might be a Next.js thing. When you spin up a Next.js project for the first time, this is what they give you by default. And then if you're not familiar you don't change it. There might be a really good reason why I'm not aware of that reason. So the next few things I can go over are split testing and split testing, and what's it called. No I'm not going to.

Oh I mean it's already deployed to Netlify. So I have this. So this is like the end result next-js. What? How's the name go? But next-js wanna make sure. I could've just clicked on this to be honest. Yeah. Yeah so, Netlify is really good at like, you know, your typical look at your branch and then deploy it based on the branch and whatnot. So that's pretty straightforward. I'm not going to go over that right now. You can even launch from the CLI itself. I did want to talk about some of the features they offer.

So there's split testing here. I have one branch that is named split testing. And the difference between this branch and the main branch is that one of them, the split testing branch, the theme color is coral like how I had it earlier. This is really significant for, you know, if you want to test a feature, if you think there's a feature that might make your website more money or something or you can hit certain metrics that you're looking for, this allows you to have different versions of your website. And you can see these percentages here. You can decide how much of your traffic gets directed to it. So here I have 50 to 50. So that means there's a 50% chance of getting a website with the theme being with the Netlify color or coral. So I'm going to drop a link. I'm going to drop this link for y'all. I have a feeling it won't change for me because I being cached under the hood. I want you all to click on the link and tell me what color you have. Do you have coral or do you have teal? Should be 50-50 between everyone. Let me see. Let me see. I'm going to keep hitting refresh on my screen to see what happens. Maybe it'll help if I… Oh, so you got coral. I think if I delete my local storage and keep checking, Antoine got teal. Yeah. I mean, so color. I mean, sometimes that's all it takes, right? Sometimes one color works for a checkout button better than another. For whatever reason, you might get more sales from teal than coral or whatever. So that's what split testing is for. You can have all your analytics set up. Marketing, people love this kind of thing. Netlify does come with its own analytics. It is a paid feature, but you basically don't have to configure it at all. It just starts collecting analytics automatically. If you decided to collect analytics right now, and those sites have been up for a couple months, it retroactively presents all the data that you would need for what you were trying to do in the past. Oh, and just to show you, when you click on Netlify Functions, the shopping cart items disappear. Interesting. With the split test, or... Mine are still there. Yeah, you can see the names of your functions, and you can see how much memory is being used and how long they take to fire. And, identity, Netlify Identity. I have here two user accounts. It's using both of my emails. Maybe I can quickly walk through setting up authentication, just to make sure that you know you can collect information on your users or save their data, or whatever. And so, a lot of this is... I'm gonna really like copy and paste a lot here, so just bear with me. But I made a context file, so, and feel free, this is all public. You can copy and paste this stuff if you need it in the future, but I made a context called identity context. I'm gonna drop the link right here. Okay, thanks Alien Room for following up on that. I'm dropping the link again. So I have a whole identity context file, and I'm just gonna copy and paste it real quick, like how I've been going through this whole workshop. I hope y'all have been finding this workshop helpful. If there's anything you feel like you haven't learned enough about, please let me know. So I'm gonna go ahead and make a folder at the root level. I'm gonna call it context. Wait, this should probably be inside source. Let me see where I have it. Okay, yeah, it's at the root level, just making sure. All right, so folder, context. And then we're gonna make a file called identity-context. And we're giving it a provider. So basically, all that's happening here, so it's called the Netlify identity widget. And what it does is, we're making a context for it, and this, you initialize Netlify identity, and it gives you, like, a pop-up to kind of link it to your repo. And then you just give it some of the functions it needs to do its thing.

So, you know, you call, you tell it what to do once you log in, and here we're setting the user. We get back a user object, and then we clear it at the end. So nothing really fancy here. And then we give this provider, and I know I deleted that provider earlier on App.js, so why don't we go and put that back. So import provider, oops, from context, where's context? Identity context. Yeah, I prefer the source folder. I always build with a source folder. I think by default Next.js doesn't do that, and so as much as I like having a source folder, I don't want to do anything, even though it's really small, I just feel like it might throw somebody off when they spin up a Next.js thing and they see there's no source. It works the same exact way, to be honest, I could've just done source and had everything the same and there would be no issue. Wait, what happened here? Can't resolve Netlify identity widget. Oh, I guess I need to install it. Yeah, I don't have it in here. So let me, I'm gonna spin down the server real quick. Yarn, add Netlify identity widgets. And we're gonna run Netlify dev again. There we go. And so we need to provide the login button on the header. So I'm gonna copy and paste the header I have on the main branch, just in case there's like extra work there that I haven't taken care of. So...

Oh, it's not on this branch. Wait a second. Okay, sorry, I don't think any of the identity logic is on here. For what? Yeah, so this is so that we can provide the... Well, yeah, you're gonna see in a sec. So we're making a wrapper around the app so that throughout the whole entire app, we can have a login experience and we'll always be able to reference the authenticated user. So I'm about to just paste a big chunk of code in the header.js. And let's see, what's it upset about now? Oh, so for this, we are introducing reach router for this because to handle the authenticated route. So let me just spin this backup again. Is it working? Oh, wait, actually no, I never used that. I feel like I am about to make a big mistake. But let's see here. So now you see this login, this login text right here. When we click on it, it says, it looks, yeah, it's letting us know that it needs the URL to the Netlify site. So let me do... Where is that? Sorry, I'm trying to find the link to my site. Oops. Next.js, ecommerce. Site.netlify. Okay, there we go. So I'm gonna link this. Bring up too many tabs, and Windows Open. Set the site's URL. And now we have... Oh, so what I'm going over right now? No, it's not Passport.js. It's Netlify Identity. Netlify provides their own authentication flow. So let's just do like a fake signup. So like fake signup.mail.com. Oh, wait. Oh, fake person. Fake signup.mail.com. Oh, at mail. Then I'm gonna make up some password here. Sign up. So a confirmation email was sent... Is sent to that email. It's a fake email, so we're never gonna see that. And let's see if we have them pop up on here. There we go, you see that? We have fake person at fakesignup.mail.com. They are now authenticated. And I think Netlify offers a really generous free tier for the identity. I think you could add up to like a thousand people before they start charging you. You can also set roles for the people that have logged in. And you could use the, you can, you could just use this whenever you're, you can have some kind of like database integration or whatever that, you know, refers to the authenticated user or whatnot. But no, we're not gonna get into too much of that today. So that's really cool. Does anyone have any questions around Netlify identity?

Oh, the form? Yeah, so if you wanted to customize the form, you have the option. So you, you, you can access Netlify's, Netlify identity, the API and stuff on your own. Oh, so somebody asked my bad, how does Netlify identity scale and what about the form customization? So yeah, you could customize it, like you would just have to not use the widget and you would handle these things manually. I don't know if there's a way to style the form, I actually have never checked, but, and then as far as scaling, I mean, Netlify, it's not something that you necessarily have to worry about, it, it's built for scaling, it's all on top of AWS anyway. So that's the way it works. So I mean, that doesn't really answer your question but I've never, I never, I don't feel like I would be concerned about Netlify scaling on the user login. How do I lock some routes URL for some users with the Netlify API? Can you describe what you mean alien room? I'm not, I'm not sure. Yeah, I'm not sure what you mean. Another really cool convenient thing that Netlify offers is Netlify forms. Oh, actually have a contact form for this project. Oh, let me go grab that file. So, yeah, so we're gonna show off Netlify web forms Yeah, you can add user roles. You can see right here some users have on my identity thing. This one, the fake person doesn't have a role set. I think I added, I definitely didn't do this manually. I know that I passed some kind of parameter to a role. But yeah, you can add roles to the users that authenticate. Let me get that form component, or I think it's a page. Pages. Contact. Okay so I'm gonna copy and paste this contact page. Let's see, pages. Contact.js.

Remember, you could either just drop the file straight in there or you could make like a folder and then give it an index. So yeah, I can collect so yeah if you have any questions about fruits at this amazing fruit store, you know you can say like, is it good though, and then hit send. I guess I didn't have a follow up page to show anybody after they submit anything. Let's see if that came through forms. These are some test results. I think because I haven't touched this in a while, maybe I'm not going to get the results, but Netlify forms makes it really easy. One thing I want to point out is you just set up your basic form and you got to make sure that you have data dash Netlify true, and it will be aware of the data that people send.

Oh, we got we got more questions. I have another question normally for eCommerce. There's also a need for metrics and analytics. How can we put in place something like this for an eCommerce based on next JS and Netlify. So if you want basic analytics, you could just turn on Netlify Analytics. You can see what pages are getting traction and stuff like that. It doesn't cover all of your needs. You will need to probably integrate something that gives you a little bit more control, Google Analytics or something like that. Or what's it from? Amazon, I think it's called pinpoint or whatever. So I think like if you want just basic metrics, who's visiting the pages, not who's visiting pages, but like, how much traffic is one page getting during a certain amount of time. That's great. Oh you want to lock links. I think if you want just basic metrics who's visiting the pages, not who's visiting pages but like how much traffic is one page getting during a certain amount of time, that's great. But definitely need you'll have to look for something for a lot more details as far as I know. Let's say user a basic user can't go user pro. Oh, you want to lock links. Yeah, so you could lock the routes using roles. You can lock the routes using roles, and for something like that, I, I use like reach router for handling that I don't know i mean it's it's it's really up to you. If you want to do like a single page app kind of approach, I don't know if Netlify directly offers something for hiding and showing pages based on role that's, that's actually a good question. But, yeah, normally, I would go for like a single page app router type system for checking the role and determining. Is that it. Is that the link I don't remember the link ending with tech. Oh yeah this is it. Yep. Yeah, so I would use this to sort of take that approach, like reach router would look for the type of role that's coming from the user object, the user object comes from Netlify identity. I would say, uh, yeah if this role exists then display that and display this, this kind of thing you know. Wow, these are great questions I didn't I didn't expect all this. Oh, and one thing I don't even have to mention but Netlify plugins are actually really cool. A couple months ago you had to use a plugin you had to actually go to the plugins directory and find a Netlify, I mean, Next.js plugin for Netlify to host. Next apps. You don't have to do that anymore. Yay. But you definitely check out the plugins that they have to offer they have stuff for accessibility. Algolia, checking links, to make sure they're not broken. There's testing plugins, caching, like whatever you could think of The possibilities are endless with the plugins. There's something for dynamic routing. Check those out.

No, that's great. No, that's great. Ask, ask away. Y'all can always reach out to me on Twitter as well. I also have a discord for you shopping cart. If you want to ask a bunch of questions about, you know, using the library. That's my fiance. So if you want to, if you want to follow me on Twitter, dm me. I'm going to link the you shopping cart discord as well, somebody is actually launching a course on building a shopping cart experience with HTML and JavaScript and CSS only. And they're using you shopping cart the beta version so I'm really hype about that I can't see, I can't wait until they release that. So let me get the you shopping cart discord link. If y'all are curious. Oh, I should actually get the link directly at my bed. Yeah, so any more questions, we're pretty much wrapping up here we still have like 10 minutes left. I'm down to hang around. Wow I got 109 members. Is there anything else you all would like to see. See me why questions around you shopping cart netlify ecommerce, whatever. I'll do my best. And also, if I can just get some feedback real quick for those who are still active. You know how was this workshop Did y'all learn a lot. You know, I'm sure they're going to follow up with some feedback after the. This workshop, you know feedback form or something on how I did but. No. Does that mean Yeah, we're gonna make hella money. Yeah, like if you get if you secure some kind of client or something. And you know, you want to start building some kind of e commerce experience with that for them. You want to use uShop and cart, feel free to jump right into the discord. There's me there's I'm always active in it, there's a whole bunch of people. There's a whole bunch of people in there that like to help as well. That. Hey I see some of y'all joining. That makes me so happy.

And feel free to turn notifications off you can get really chatty in there invalid invite. Here let me. I'm going to get a new link. Try this one. All right, I think you joined. It doesn't look like you all have any more questions or anything. I mean I could just kind of like hang around. Yeah. Yeah, so, actually, let, we could go over some next.js stuff so really, really, thank you so much for that feedback. So, next.js actually has a whole e commerce initiative. And they have. They have two integrations right now so here let's just pull this up on the screen real quick. The all in one starter kit for high performance e commerce sites clone deploy and fully customized with a few clicks. As far as I know there's only two integrations. So let's see. I don't want to do any of this right now. So you should be able to use. Big Commerce and Shopify. And so what it is, it's basically a Shopify. Look at look at all these good stats. Oh let me link this to y'all. This is, this is some good stuff. So next day as commerce. So it's a really solid template. It works with big commerce and Shopify you could use Shopify. Oh it also works with swell. And I don't know what the other things are salier. You can use Shopify as a back end. There isn't anything really solid for stripe right now that's because Stripe. They're not really focused on building the product building dashboard is really, they're just really good at making this solid. Their focus is all on the payments API itself, but I would definitely check this out you could probably learn a lot. We can see a demo site to hold on. I looks like they come out of the box with analytics and all that other stuff. Incremental static regeneration. All these big words. This is what the demo looks like. Got your hats and t shirts and stuff. And so, for me personally, this is a little. Or this right here I would love I love this, so a peril. Shop all they have the filters and stuff like that. I'm not sure if this is using BigCommerce or Shopify under the hood. I'm assuming Shopify. However, yeah shoes I love this layout I mean this is your standard e commerce experience. As far as the landing page, I probably wouldn't take this. I'd probably make some adjustments on it, but it's, but you know that's not the point. It's, you know, showing off this really awesome template with the whole back end, integrated. Does that answer your question, Alexandra. Yeah, take a look. Me personally. I'm just like working on the shopping cart library. I actually under not really a secret but I am working on a SaaS that kind of handles product building, but I want it to be on top of stripe I don't think there's enough integrations for stripe. You know, like, I feel like stripe, I feel like I want to build what I wish stripes dashboard handled. So, I'm probably going to release it in like a couple of months or something. But, until then, if I if I had to launch a shopping cart experience right now, I'd probably use Shopify as as a CMS with with this next integration. Any other questions? Five minutes left. How do we feel? I covered a lot. That was a lot in in two hours that again that was supposed to be a four hour workshop. All right, I'm going to give it a couple more minutes. I'm just going to hang out here. Yeah, feel free to stay or leave. Doesn't look like there's going to be any more. Much more questions. See ya. Yes, lots of magic. That's I don't even know who does more magic I think maybe Gatsby does more magic. But yes, these JAMstack meta frameworks are very magical places. Next.js is probably they're dominating right now probably because it feels closer to being a React app than anything. I'm, I'm personally a fan of Gatsby I like. I like Gatsby. I have a Gatsby version of this.

Yeah, I have a Gatsby version of this as well. And I think I enjoyed making a Gatsby more. But a lot of people don't like that tight integration with GraphQL. Especially in the pages. That's my favorite part too. Yeah, so get static props. Again, I don't even think I have the best description of it that I can explain it in the best way possible. So you want to know about the one that's in the index.js. Yeah so for the most part, from what I understand here we are basically giving the products to the component to the index to the products component. That index file is where we have all of the all of the products so we can get the URLs and stuff. And so what we're doing here is grabbing the data that we mapped in the name.js file and we're providing that to this component here. That's how I understand it. I actually could be totally wrong. Sorry. I know the Gatsby version of this is sort of like you're injecting it through GraphQL and then you make a GraphQL query up top and then it passes it straight to the product's component. This is the same thing except you're not using GraphQL. I hope that answers your question. I probably should go and talk to somebody who can describe it better than I can. Before my next workshop.

The map on that product data. Oh, I think I see what you're saying. Yeah, because I'm still doing it- I'm still mapping down here. I'm pretty sure, I'm pretty sure I talked to somebody about that, and they said this is what I was supposed to do. I'm gonna look into that though. It makes sense. Now, this was just useless. Now that I'm looking at it, but I gotta confirm. Thank you for the feedback.

Oh, the final repo. So the final repo... So Next.js Commerce is basically a template that... Hold on one second. Here you go. Here's the final repo that you asked for. And it's the main branch that has all the data. So Next.js Commerce is a really nice integration with the popular e-commerce tools, like Shopify, Swell, and BigCommerce and stuff like that. Yeah, no problem. I'm gonna investigate that. When I was doing the workshop, I felt like I didn't know what was going on here. And so I'm gonna double check because maybe we don't need this at all. Maybe the products are already getting injected somehow. So, it's just a demo. So when you asked the Alien room what Next.js Commerce was, the demo is the result of that template. So this is the kind of eCommerce experience that you could launch from the template that they just offered. Thank you for stopping by, everybody. Thanks for taking time out the day. to listen to me talk about things I talk about all the time. You're very welcome. Thank you for stopping by. Let's see. I'm gonna wait. I'm gonna wait. I don't want to leave while there's 12 people here. I'm gonna wait till the numbers start dropping. There we go. Haha. Yes, do that. Thanks for dropping by. And I love the energy from you, Alien Room. Lots of hype. All right, I'm gonna stop sharing. Seven people left. I don't know if y'all are actually here or not, but I think I feel okay with leaving. So again, thank you everybody for joining. I hope you learned a lot. I hope you had a great time. Please check out my library, uShopping cart, give it a star, and I'll see y'all in the Discord.