Build a Product Page with Shopify’s Hydrogen Framework

A good global representation here. So, without much further ado, I will hand it over to David. David Witte is a Developer Advocate here at Shopify. He's going to walk us through getting started with Hydrogen, how to build our product page, and then the last 30 minutes of this 90-minute session will be for questions and answers, and he's going to do this with his fellow teammates from Shopify.

So, David, over to you. And all the best. All right. Thank you, Mercy. So, welcome everyone. Welcome to this workshop. Thank you for joining me today. My name is David Witte, and I'm joining you from sunny Seattle, Washington. If you're not aware, my state is currently on fire, so the air quality is really bad and it's affected my voice a little bit. So, I apologize if my voice goes in and out of it. I'm going to try and talk at a little bit of a lower register, but hopefully I can make it through this hour. With me today, we have Brett, we have Daniel, and we have Matt, who are part of the Hydrogen team. And they'll be fielding the Q&A at the end of this workshop. But we're going to start with 60 minutes of an interactive workshop where we together build a product display page. So, let's get started.

So, a little bit about me. My name's David Witt, and I'm a developer advocate with Shopify. I've been with Shopify since the end of July, so I'm relatively new. But I've been working on learning Hydrogen, and I'm really excited to teach Hydrogen to developers like yourselves today. Pictured here is me with my dog, Lucy. She's sitting on the couch, and I'm sitting on the floor, and to her, that is the rightful place of where things should be. So, if you can relate to that, send me a pet pic over to my Twitter handle. I'd love to see and share pet pics with you.

So, let's talk about the workshop. Today, we're going to be building a product display page in Hydrogen, and we'll talk about what Hydrogen is and how it fits into the Shopify ecosystem. But this is just a preview of where we're going to end up today. All of this data is stored within Shopify, and we're going to use an API to query that data and build a custom website where we can interact with it and buy a product, which will take us to Shopify's checkout. So, let's dive in. If you want to follow along, head on over to this URL, shopify.github.io, slash workshops. These workshops will be available after the event, too, so if you'd just like to listen and follow along as I do this, that's fine. You can try doing it in your own time, or if you do want to follow along, you can go at your own pace and catch up at any point. I'll try and pace this out so you should be able to follow along. But I understand that there's a lot of information coming to you all at once. So it is OK to take a step back and do this in your own time. So I'm gonna exit out of this and switch on over to my workshop page. And in the workshop page, we'll see that we have a bunch of different workshops that are available. I encourage you to explore those within your own time. There's a lot of interesting stuff that we're trying to teach, and this is a new method that we're going about teaching, so please let us know what you think of this. But the workshop we'll be starting with is the Create a Product page with Hydrogen workshop. So I'll click Start and we're gonna start at step one. So we'll take a step back and just talk about custom storefronts for a moment. So when you think of Shopify, most people think of the headed solution where a user signs up for an account, they're able to select a theme and select some apps and, you know, configure some styles and markup, and then Shopify serves them that storefront. That's one way to use Shopify. And it's great because it provides a lot of structure, and you get a lot of really nice things out of the box. But we wanted to provide an option for something that might break outside that box. Or maybe you just want to bring your own head to an API-based storefront.

And so custom storefronts allow you to do that. So hydrogen is really just Shopify's opinionated way of building one of those custom storefronts. So we'll talk a little bit more about what hydrogen is in just a moment. But I want to get everyone started with the project that we'll be working on, which is a StackBlitz project. So in Step 1, if you click on this link, that will open up a StackBlitz project for you. And then up in the top left corner, if you click on the fork button, that will give you your own instance of this starter project. So over on the right-hand side, I'll see that my booting web container is stuck. So if I refresh my page, that should get me unstuck, and I should be able to see that the start command runs, and I'll see a preview of my app over here. So if you're not familiar with StackBlitz, it's a code editor that serves everything from within a web browser. So it's a really nice way for you to play around with hydrogen and get started with just the click of a button. So over in the left-hand panel, we have File Explorer. The center panel is going to be our code editor. Down at the bottom, we have a terminal, and on the right-hand side, we have our preview window. So it's everything that we need to get started and build with hydrogen. So I'll pop back over to the workshop and just talk a little bit about hydrogen. So as I mentioned, hydrogen's Shopify's opinionated way of building a custom storefront. It's designed to be a great developer experience, but it's also designed to make your sites really fast. And under the hood, it's using React server components, which allow for using components both on the server and on the client, and it provides streaming server-side rendering. Hydrogen's also really fast in that you can run it at Edge servers, so you get a really fast time to first byte. Hydrogen is great because it comes built with a lot of components and tools that make developing really fast and really efficient, and we'll explore some of those tools in this workshop. So I'm going to head back over to my StackBlitz project and the first thing I'll do is just show a couple of configuration pieces that get our storefront started. So I'm going to open hydrogen.config.js and this is going to be where I configure which storefront my project is referencing. So this is kind of how we set up our API. So I just specify the domain, a storefront token and an API version. For our purposes, today, we just have a demo store workshop where we'll be querying data from. So once this configuration is defined, it is consumed over an app.server.jsx, which is going to be kind of the core root component of our app. And so you'll see that our entire app is wrapped in a Shopify provider component. And that provider component is going to consume the config file and then give us hooks so that we can query the storefront API. So that abstracts some of the some of the pieces away from us and gives us a nice interface using the provider and hook paradigm.

So I'm going to move us along to step two and and we're going to talk about file based routing. So hydrogen uses file based routing and if you've used Next JS or Next JS or some of the other popular frameworks out there, you might be familiar with how this works. But basically it is a nice way to set up a site and to set up your URL routing, so it's very similar to a file browser tree.

So we're going to create a product display page. So we're going to create a folder for slash products, and then we're going to create a file for slash whatever our product name is. And so that brings me to the first point I want to bring up about hydrogen and React server components. And that's the concept of where you want your component to render. And so we use a simple naming convention to help us understand and to help key the framework on where these components should render. So a file ending in dot server.js x will render on the server. dot client dot j s x will be run on the client, and dot j s x will run on either the server or the client, and that will depend on where that file is included and rendered. And there are certain rules that go along with deciding if you want to use a server or a client component. But I'll only mention two rules that we need to worry about for the purposes of this project. So the first one is that all of our file all of our route based file components, those need to be server components. And then anything that's going to manage user state should be a client component. And there's more information on some of the the rules and guidelines and best practices on the Shopify.dev website.

So let's create our first static route. So back over in stack blitz, I'm going to open the routes folder. And I see that I already have my index server dot j s x which is rendering Hello World. I'm going to create a new folder called products. And inside the products folder. I'll create a new file called example dot server dot j s x. And so this is going to be a react component. So I'm going to export default function example. And I'm just going to return some j s x. So this is going to be hello example. And just to give us something that's a little bit different from hello world. When I hit save, this is going to register my app with or register my route with my app. So I'm able to navigate to it immediately. So I'm going to come over to my preview window and go to slash products slash example. And we'll see that I now have my hello example component being rendered as a page. So that's great. And so now we have a really simple way of setting up a static route. So static routes are great when you know what that full URL is going to be. So slash about us slash FAQs or slash cart. That's a good instance of using a static route. Because we're building a product display page, we're going to want a dynamic route. So we're going to want slash products slash whatever our product handle is. And that's going to be different for each product page. So instead, if we wanted to use a static route, we would have to add a new component for each product handle. That would be a little silly. So instead, we can use a dynamic route in order to make all of those products be rendered within a single component. So let's convert our example component into a dynamic route now. And I can do that by renaming the file. So instead of being example.server.jsx, and that will register this file as a dynamic route. So I can look over my preview window and still see hello example. But if I change my route to say hello example one, I'll see that it's still rendering the example component, or example two, still rendering an example. So that kind of shows and proves that we now have a dynamic route and anything under the slash products URL fragment is going to be rendered by this component. So one of the things we'll need to do when we actually interface with our storefront is we'll need to make an API call and we'll pass this handle over to our server to make sure we get the right product. And so we can extract that handle from the URL relatively easily because our server component has passed in a few props that we can use. So we're going to grab the params prop from our route component.

And then from that params prop, I'm just going to destructure the handle property. And so then let me print this out to the page just to make sure that we have this correct. Okay, so over my preview, I now see example two, and I'm going to go back to my original example and we'll see that we have the handle. So that's a nice and easy way for us to grab that handle. And then in the next few steps, we'll talk about how to make those storefront API queries.

So the next thing I'm going to do is I'm just going to make things look a little bit nicer by importing in a layout component, and that's already built for us in our components folder. I'm going to grab it as Layouts.server. And then I'm just going to wrap everything I have so far in my layout component. Okay, so now I see a nice little header and that has set me up for a success here. I did want to go over one instance of breaking the server. And so I'm going to introduce a syntax error and hit save. And that's actually going to break my server. So we'll see that I can't refresh anything anymore. And so if you run into that, you can usually use undo to get back to where you were before, or if you know your error and you can actually see, some of the code that spit out will help you find the error, you can go ahead and fix your error. I'll hit save and then down in my terminal, I can just hit the up arrow to run, to show me the previously run command, which is npm install and yarn beat, and I can hit Enter and that will rerun my server for me and bring me back to where I was before. So I'm gonna go back to slash products slash example, and I'm back to where I was. So if at any point you accidentally introduce an error, that's gonna be how you get your server back up and running. So that takes us to the end of step two, we have a few steps where if you get stuck along the way, we provided a full code block at the bottom of the step, and you should be able to copy the entire code block over to your clipboard, paste it into Stackblitz and you should be back on track.

So next up, we're going to take a step away from our Stackblitz project and talk about the Storefront API. So Shopify Storefront API is a GraphQL API that's developed by Shopify and helps to support building of custom Storefronts. And so one of the nice things that Hydrogen does for us is it provides us with a tool so that we can test and make GraphQL queries using a browser tool, called GraphiQL. So I'll show what that looks like now. Back over in Stackblitz, I see up in the top right corner, I have a button to open our project in a new tab, and I'm going to do that. And what I want to do is I want to go to the host URL and then slash GraphiQL, which is G-R-A-P-H-I-Q-L, and that will open up the graphical interface. So if you're not familiar with GraphQL, I'll make a couple of sample queries, and that will hopefully give you an idea of how we can use GraphQL to query for data. So this interface here is pretty common for GraphQL interfaces, where the left-hand side will be where we write our query, and the right-hand side will be where we see the results of our query.

So I'm gonna get rid of these comments for now, and let's just make a simple query. So we're gonna call our query, shop, and then to figure out how to start my query, I can open the documentation and click on the query route and see what I can query for at the top level. And this is a lot of good information, and it's all strongly typed, so it's really helpful. I could also start typing, and I have auto-complete that's available to me. So I'm gonna query for some basic shop data where inside of the shop, I can look for the ID. I can look for the name, and we'll just say the description. And I'll hit Control, Enter or this pink play button to start my query. And we'll see over in the right-hand side that I have a data object that matches the shape of the query I have over here. And so that's one of the really nice things about GraphQL is it gives you a hint at what the shape of your data will look like when you build your query. So that's just a really simple example of how to query data and what the shape of that data will be.

So let's get rid of this and let's actually focus on product data. So I'm gonna call this query product details, and inside of my product details query, let's just look for some products. So I see that I have a couple of different product options I could use. I'm going to use products plural which gives us a product connection, and I'm just gonna start by looking for the first 10 products. And so this is how you specify which products you wanna look for. And so this is going to give me a child object of edges and on each one of those edges, I want a node. And so if you're not familiar with that terminology, that's just graph data structure terminology. I won't go into that but the autocomplete will help you to figure out where you need to dive in to get to that actual product data. So for a product inside of my node, let's just get the ID, the handle and the title. So thank you, autocomplete. I'll hit Control-Enter and I should now see that I have an edges array where each node is gonna represent a product. So I see quite a few that I can reference and for the purposes of this demo, I'm gonna be using snowboard as my handle. So I'm gonna copy snowboard to my clipboard and I'm now gonna rewrite this query so that we can focus on just a single product. So I'll get rid of everything I have so far and just type in product and when I open up my parentheses, I see that I can query a product by ID or by handle so I'm gonna make it by handle because I know that in our app, we already have the handle from the URL. So we're gonna make sure that this is the snowboard handle and I now have access to the product data. So again, I can do ID title, I want to handle and then we'll just say description. So if I run that, I should now see that I have a single products data and that'll be nested inside of the product object. So this is great, we're getting much closer to what we would use inside of our app. The only thing we need to do now is make this dynamic. So rather than having a hard coded snowboard handle, I'm gonna extract that from my query, and I'm gonna instead create a query parameter for GraphQL. And I can do that by setting this up much like I would for a JS function. So up at the top of my query name, I can define a new parameter by using the dollar sign syntax and then specifying a type. So I'm gonna make this a string, and then I'm gonna add an exclamation mark to make it mandatory. And then inside of my query itself, I can use the dollar sign syntax again to reference that variable. So now we've made this dynamic. So if I go ahead and click Play now, I should see an error because I haven't actually specified a handle for our query. And so, we do get the expected errors that give us an explanation and can help us to correct this by making sure that we pass in a variable of handle. So I can do that inside of GraphQL. I'm sorry, GraphiQL by opening up the variables tab and this variables tab at the bottom expects a JSON input. So I'll create an object and I can just start typing handle cause that's what it expects. And then I can paste in the snowboard handle from my clipboard. So if I run this query again, I should now see that I have the same data that I had before. And we have success. So this will be the query that we use to render the data on our product display page.

So that was just a really quick primer in how to use GraphiQL and GraphiQL comes bundled with hydrogen. And it's also got all the configuration set up for you. So it knows which storefront query and you don't really have to worry about it. So really nice developer experience to get you building your sites quickly.

So if you've been following along so far, we'll be at the bottom of step three, and we're gonna go back to our project for step four, where we move this query over into our component. So as I mentioned earlier, the Shopify provider gives us access to hooks within our app. And one of the hooks that we're gonna use is the you shop query hook. And that allows us to make those storefront API queries. We're also going to import the GQL, GraphQL Tag Library to give us a syntax highlighting for our queries. That's not gonna work inside of StackBlitz, but it is a nice best practice for when you are working in a code tool that does provide that highlighting for you. So I'm gonna copy this to my clipboard, or we just import those two tools from Hydrogen. And then over in my handle.server.jsx component, I am going to import those two tools, and then I can start building my query. So I already have the handle, and so I need that handle before I make my query. So underneath I'm gonna start building my query. So I know the query is gonna return an object, and I'll come back to that in just a moment, but I'll start typing in ushopquery. And then I'll open up my parentheses, and that will give me the function signature. And I see all of the type hints that are helpful to help me build my query. So ushopquery expects an object, and it expects certain parameters. So what we're gonna focus on today is the query parameter and the variables parameter. But there are lots of other things that you can do with ushopquery to optimize your API calls, such as caching and preloading. So I'm going to open up that object. I'm gonna get rid of this, and I'm gonna start typing query. And so that will be the first thing that I do. So I'm gonna eventually make a constant of query, and I'll build that in just a moment. But the second thing I wanna pass in is variables. And for variables, I want it to match whatever I set up down here. So we're gonna make this a plain JavaScript object with a handle key, and then the value of our handle as the value. And so we can do that in JS with the shorthand syntax by just passing in handle. So that's functionally identical to handle colon handle. And so we can just use the shorthand here. So you use shot query is going to return an object for us. And we just wanna pull out the data from that query for now. So I'll console.log that just to make sure that I did this correctly. And then the last thing I need to make sure I do is define that query constant. And I'm gonna move this to the bottom of my page, and that's because these queries can get really long. And so it's just a nice way to make it so you don't have to scroll past that really long query whenever you wanna work on your JSX. So I'm gonna create a GQL string with backtricks. Head on over to graphical, use this button to copy the query to my clipboard and paste it in here. So that should be all I need to do to move this GraphQL query over to my server component. So let me open up my preview again. And I should now see in my terminal that I am returning an object with product colon null. And that's because I don't have a product with example as the handle in my storefront. So let's update that handle to be snowboard. So when I do that, I should see that I'm rendering the page for snowboard and my terminal now shows me a data object with product data, and I can see the ID handle title and description. So that works for now. So I proved that this works and I'm now gonna copy out my console log statement, but feel free to leave that uncommented if you wanna reference the shape of the data. So I'm gonna head back over to the workshop. And if you got stuck at any point or your query isn't working correctly, you can copy everything from this block into your handle.server.jsx component and that should get you back on track. So I'll pause just for a moment to let everyone catch up.

All right, I see some questions in the chat and I see people are answering them.

We are gonna have time at the end for more generic questions and if you wanna ask questions that are not specifically related to this workshop, we'll have plenty of time for that at the end.

Okay, so let's move on and talk about our first client component. So our server component that we've worked on so far is going to be handled and rendered at the server, but we'll eventually need to provide a way for a user to make a selection of their product options and that's gonna be managed with user state and we want to have a client component to handle that for us.

So let's create a client component now. So in my StackBlitz editor in the file browser, I'm gonna open the components folder and just create a new file called products details dot clients dot JSX. And again, this is just gonna be a react component, so we'll export default functions, product details, and then I know I'm eventually going to pass on a prop of that product object. So let's go ahead and add it now, and then I'm gonna return some JSX.

So I'm gonna cheat a bit and I'm gonna cut this out from our server component, move it over to our client component, rename this just so we know that it works, and then we don't have access to that handle property anymore, but the product object that we're returning does have the handle. So we can just change this to product.handle. I'll save that. And then over in my server component, I'm gonna import my client component. This'll be product details from our components folder..client, and the.client is important. And then I'm going to render that components and make sure I pass in my prop, which is going to be data.product. All right, and over my preview panel, I should now see hello product details with my snowboard as a product property. So we've now refactored the message just a little bit. So the details on our page are gonna come from our client component. So that's all we need to do to set ourselves up for eventually having that interactive piece on our product display page. So that was a quick step, and now I can move us over to step six.

So now we're gonna get into some of the fun bits of Hydrogen and some of the really nice ways that Hydrogen has been set up to make building e-commerce features really fast and seamless. So we've already talked about the Shopify provider component, but there are several other providers that are included with the framework, and we're gonna be using the product options provider. And so what that does is it gives us access to a data model of product options data, which will help us to manage the rendering and selection of a specific product variant that will be within that options model. So let's start by importing the product options provider to our client component. So I'll copy this little line to my clipboard, head over to productdetails.jsx, make some room at the top, import it, and then I'm gonna wrap everything in my app around, or everything in my component around that product options provider. And so I'm gonna hit save here and this will format, but I'm also going to get an error in my preview, and I'll talk about that in just a moment. So it's giving us an error that it can't read properties of null, and it's looking for a variance object. So we'll eventually need to pass in a data object to our product options provider, but we're actually not querying the right amount of data for our product right now. So if I go back over to our graphical interface, I'll see that I'm only querying for some basic product data, and I'm not querying for the variant data that I'll need for that product options model. So I could spend a while building that query for you, but we're gonna fast forward ahead just a little bit because this isn't entirely focused on GraphQL, so I'm gonna copy this to my clipboard, head back over to my handles server component. I'm gonna replace the basic query with a more robust query, and then I'm also going to do that over in graphical just so we can see the shape of the data. So we have the same data that we were asking for before, only now we're getting the description HTML, we're also getting some media data, so specifically some images for our product. So that's great. I'm gonna collapse that, and then we also see that we have variance data, so each one of those variant nodes represents a shoppable and orderable product variant, and so we'll need these IDs in order to make sure that we can buy the correct product. And so this object is gonna get consumed by our provider, and it's going to give us a nicely built and accessible product options model where we can render and update the options data to make sure that we get the correct variant ID based on our selected options. So our query is updated in our server component, I'm gonna save that, and then in my product details client component, I just need to update the provider to make sure that I pass in the product data. So I can just pass in the product object directly and it will know how to consume it. So that gets rid of our error and we now have a product option model that we can access and we can build details for. So we're setting ourselves up for success where we're not actually building the options details yet, we'll do that as our last step, but for right now, we have all of our stuff set up so that we can render some more details to our product display page. So let's do that and the next two steps.

Another really nice feature of Hydrogen is it comes with a lot of utility components to make rendering particularly data from our storefront API really nice and easy. And one good one is the media file component. So not only does the media file handle the rendering of images, but it can also do videos and 3D models. So let's see how we can use that. So I'm going to make sure I import the media file component from Hydrogen in my product details client component. And then I'm also going to destructure a couple of pieces of data from our product objects. And that's just gonna make some copy paste work and a little bit easier and cleaner. So then down below our message, let's just render our media file components and make sure that we pass in our data object. And that data object is going to be the media object. And we just need to pass it in one of the nodes. So it would be media dot nodes and we'll just pass in the first node. So I'll hit save. And then over in my preview panel, I can see the hydrogen snowboard and I could play around with this to see, which images are available to me. And on a fully featured product display page, we could probably loop through this and render more than one image, but this will just be a demo. So we'll just render the first image. So I'm going to show you one really nice feature of the media file component by opening up a full page and inspecting the product image. So I see that my image components is not only rendering the image and the URL, but it's also automatically making this lazy loaded and it's providing a source and then several source sets as URLs. So the browser will know which product to, or which image to load based on the browser width. So we kind of get all of that built for us because the Shopify CDN can automatically resize our images for us.

So really nice developer experience because we didn't have to do all this work manually. And it's a really nice shopper experience because they will get an optimized image and that is gonna ensure that their site they're using is fast and performant. So really great experience for everyone out of the box. Tip my hat to the Hydrogen team for making that so easy for us.

So that's one example of a really good component that we can use. We're gonna talk about the other pieces that we can use after we add in some styling to our product display page. So our project came built with Tailwind already configured for us and so we'll be using that for this project and Tailwind is not required. It's not tied to Hydrogen, but we're using it in this project just to make the building and rendering of some of our components a little easier to where I don't really have to write CSS for this demonstration.

So rather than typing out a lot of these utility classes, I'm actually just gonna copy and paste and I'll talk about the structure of this display page. So if I copy that section to my clipboard and then get rid of everything inside my product options provider, I'll paste this in and just quickly reviewing this, my section's going to create a grid for me and then that grid will have two columns. The left column is going to be a MediaFile component, which we just showed and the right column is going to show the Title of the product, the Vendor of the product and then we're going to render that description HTML as actual HTML using this function. So I'll save that, open my preview again and I can now see that I have a really nice rendering of my image and some product details. In the full page preview, I can see that this is a nice two column layout. So we're well on our way to building a really nice looking product display page.

So this wasn't really a hydrogen specific, so we just gonna kind of blow through a couple of the tailwind and markup specific pieces of this demo, but we're gonna add a bit of interactivity in the next step. And to do that, we're gonna build a new product form component and we'll just add that to the bottom of our product details file, but we're gonna use a new hook. And so that is the use product options hook. And we'll be able to use that because we've set up our product details form component with that product options provider. And so if you look at our demo code here, we're going to pull out the selected variant from that use product options hook, because we'll need that variant ID so that we can pass it over to our buy now button to make sure that we buy the correct product.

So I'll copy this line to my clipboard, actually I'm gonna copy this whole function to my clipboard just to save a bit of typing. Down at the bottom of my product details file, I can place this in. I need to make sure that I import use product options from hydrogen. If you accidentally save your file here, it may try and pull this from a different source and that might break your app. So just make sure that you're pulling it from app shopify slash hydrogen. And then let's just print out the selected variant. So I'll just make this a selected variant that ID. And then I just need to make sure I render this product form, which I will do by including it just under my description HTML. And we don't need to pass it any props because we're using hooks instead. So since this is a descendant of the options provider, we can use that use product options hook. So if I save that, and then show the preview on my page, down at the bottom, I now see the product variant ID. And so that'll be what we pass into our Buy Now button. So let's add that Buy Now button now. So back up in my import statement, I'm gonna import the Buy Now button, which is built for us and hydrogen. And I'm also going to import the money object, which gives us a really nice way of rendering a price object into a shopper friendly currency string. So I'll show you how to do that as well. And again, this is gonna get a little tail windy. So I'm gonna do some copy pasting. But it's relatively straightforward. So inside the form, we're going to render our Buy Now button and the variant ID prop we've already figured out can come from selected variant that ID. And then inside that button, we're going to render a span that basically creates a black background with a white text button. We're gonna render a Buy It Now string and then the price of our currently selected variant by passing in the price V2 object into a money component. So really nice component features that make building out some of these features really fast. So if I paste that in and let auto formatting take care of this for me, I should now see that at the bottom of my preview that I have a Buy It Now button and it is 600 Canadian dollars for this selected variant. If I click on this button inside of StackBlitz, it's probably gonna give us an error. So instead, I'm going to do that over in my full preview. And this is linking out to a demo storefront which is password protected. So there's a chance that this will actually get blocked and ask us for a password. But it looks like it's gonna actually route us to checkout. And we'll see that our product is added to our cart and we're ready to make our purchase. So what I mentioned a moment ago isn't gonna be an issue for a production store.

But when we do our development on demo stores with a password protection thing, sometimes the handoff from the app to checkout will require us to enter in a password. So we've added some interactivity to our page and we're able to buy a product. The problem right now is that we can only buy whatever selected variant is available for us when the page loads. So our last bit of interactivity is going to be adding an option selector. So let's do that in the next step.

So again, we're gonna skip forward a little bit and just show you a product options component that we've already built. But it uses the same principles of our product form where we're using that Use Product Options hook. So let's take a look at how that was built. So product options is a separate component and we'll see that the Use Product Options hook is being used and we're pulling out all of this data. So we have an options array, we have our selected options and we have a function called Set Selected Option where we can update our data model with a newly selected variant option. So when we return our JSX, we're gonna iterate over each of the options and then we'll pull out the name and the values. So if the values' length is equal to one, that means that we can't make a selection so we'll just skip over it and not render it. Otherwise, we're going to render a flex grid and for that grid, it will have a legend where we render out the name of the option and then we're going to iterate over the values of that option. And for each value, we're going to render a radio input. And so a radio input is a nice native way of ensuring that we only ever have one option selected at a time. And so the radio input also provides us with an onChange callback function. Inside of that callback function, we can run the setSelectedOption function, which again, we grabbed from our UseProductOptions hook. So that is going to update our data model and we pass in the name and then the value of this specific option. And the last bit of markup tail windy goodness is that we're going to render a box for each one of our radio inputs. And if that input is checked, then we'll have a Border Gray that renders underneath it. So a little bit of iteration and looping, so this is more React code than it is Hydrogen code, but I did want to highlight the Hydrogen pieces, which is the hooks and how we update our model right down here. So let's head over to product details and import this ProductOptions component. So import ProductOptions from, and we're already in this folder. So let's just make sure it's ProductOptions.client, if I can spell. Okay, so ProductOptions is what we're going to render, and we'll render it inside of our form just above the buy now button. And again, we don't need to pass props to this component because we're using hooks. So this is going to be a descendant of the ProductOptions provider, so we can use those hooks. So down, over in our preview, I now see that I have an options selector where I have size, binding mount, and material. And just to prove that the data model will update for me if I make a selection, I can see the price for my variant right now is 600 Canadian dollars. If I select a different size, I'll see that my price updates. So behind the scene, what's that doing? The setSelectedOption function is running, that updates the data model, and then React will be cued to re-render the descendant components that need to be re-rendered. So all of that is taken care of for us in a declarative way using the providers and hooks programming pattern. So, really nice way to render out our options for us and the Hydrogen hooks and provider components made that really fast. So I can, once again, try and test this out by selecting a different product purchase and I'll see if I can purchase this product. And so I did get the closed store bug. So that won't be a thing with a production store, but, you know, we're coding on a demo store. So that's it for the first piece of this workshop. We built a functional product display page, and there's a lot more that we could do with this and a lot more that we should do with this if we wanted to make it production ready. And so you have quite a few options of where you can take this for a next step. So we have a lot more that you can explore with our docs, or you could try extending this workshop by improving upon it and fixing bugs and adding new features, like disabling the buy now button if a variant is unavailable. You could also try displaying a message on that route component if a product isn't found. We also have a really nice SEO component that will handle the rendering of stuff like title and meta tags. So that's really nice to explore. And then you could also try building out a fully featured cart, but we're going to do that in the next section and we're going to jump to that right now. So you have the option of building out a full fully fledge cart with our build a hydrogen storefront tutorial on Shopify.dev. But we're just going to do a really quick version so that it fits in within our time block here. So I'll close out of the first workshop and then jump over to the second workshop where we add a cart page to our hydrogen project. And so if at any time you want to jump in to just this project, you could fork the completed project that we have here in a link. But since I've already built out our project and stack splits, I'm just going to continue with my existing project. So much like we did with our previous project, we're going to start by setting up our route component.

So I'm going to make sure that I kind of build this in a way that's similar to our product display page where we have a server route component, and then the majority of our details that are rendered to the page are going to be handled inside of our client on it. So I'm going to create a new cart details client component. Just paste that in, and again, it's just a simple message. And then I'm going to also set up a server component and it's going to go in the slash cart route. So in our routes folder, I can add a new file and that will be cart.server.jss. Paste in this data. And again, we're just rendering the layout and the cart details. And then I can go up to my preview and go to the cart route just to make sure I did that properly. So that works for us, great. And I am going to be going through this at a really fast clip because we are limited on time. So I apologize if this is a little too fast for you, but you should be able to follow along if you do this in your own time. So, because we need access to cart data, we're also eventually going to need to set up a provider. And so we're going to do that in this step. So in addition to Shopify provider and the product options provider, we can make use of another provider that's built for us, and we have a cart provider. So I'm going to add this to our app.server.jsx component. First I need to make sure I import it. And then in the Shopify provider component, as a direct tile, I'm going to render the cart provider component. And that means that my entire app will have access to cart data. So I'll hit save here, and this is actually going to cause an error, but this is really just a framework-y error where all I need to do is stop and restart my server. And that will get us back to a running cart. So we will now have access to the hooks, like the use cart hook, in order to access data anywhere within our site. So the first thing I want to do is update my header so that I have a mini cart bag icon, and I can click on that to navigate to my cart route page. So we're going to introduce both the use cart hook and the link component. So what we're going to set up is a link component that's just going to work with our router to direct us to the cart page, and then inside that link component, we'll just render an SVG bag, and then as a little bonus, if we can pull out the total quantity from the use cart hook, we can render a little notification dot with our total quantity just rendered as a little bubble. So I'm gonna copy all of this on my clipboard and create a new component called cart link dot client dot JSX. I'll paste that in, and then I'm gonna bring it into my layout component. And then let's render this directly underneath our hydrogen workshop text. Okay. Sorry, my zoom is in the way. So I should now see that I have a bag icon down here. These don't look quite right, right now. So let's make sure that those are vertically centered and I can do that by updating my header classes so that this is now a flex container. And then we can make this vertically centered with items center as a class. And that should now make it, is that right? It's item center. Item center is what I wanted. And so now both of these visual elements are vertically centered inside of my header block. So I can now click on this bag icon and well, let's make sure that, let's go to the products, let's, Snowboard products. And so I could click on this bag link now and I head over to the cart details page. Okay, so that link is working for us. Now we're gonna update the product page because so far we're able to render a cart page and to go to our cart with a link, but we're not able to add a product to our bag. So, we need to be able to do that. So, we've already set up the buy now button and we also have an add to cart button that works much the same way. So you pass in a variant ID and it will take care of adding that product to the cart for you. So, let's make sure I import my add to cart button and I'm gonna do that inside of my product details client component. And then again, this is going to be a little tail windy. So, what I'm gonna do is replace the buy now button and this will be exactly what we did in... This is exactly the button we built in the previous section. The only difference is we're wrapping it in a flex container and then we're adding in the add to cart button below it. So these two buttons will flex against each other. So, back down to my product.

So back down to my product form, I'm gonna replace the buy now button I have here with the flex container that includes the buy now button and the add to cart button. So, let's go back to our product snowboard. Oh, that's wrong. There we go. Back to our product page. I now see that I have a buy it now button and an add to cart button. So, if I click on the add to cart button, that should take care of adding a product for us. And now I see up in my header, I have a little bubble notification with A1.

So just to give you a really quick peak under the hood, let's take a look at what is happening on this page. So I'm actually gonna go to a different product just to make this look a bit different on our cart page. We'll go to the hosted snowboard. I'm gonna open up my dev tools inspector and navigate to the network tab. Clear out my existing requests and then I'm gonna click add to cart. So what that will show is a graphql.json request. And if I inspect that a little bit more, I can see that that was initiated by the cart provider. So it's making the API call for our product. It's making the API call for me. And if I look at the payload, I can see that what it's passing is a query that is a mutation, which is a fancy way in GraphQL of saying edit or update data. And we're going to pass in some data to a cart line add mutation. And that variable data is all this information here. But the add to cart button and the cart provider are taking care of formatting all this data for us. So all we really needed to worry about is that merchandise ID, which we passed in as a variant ID to our component. So all of that is kind of handled for us and abstracted away. And what we get back from that GraphQL mutation is we get new cart data. And so the cart provider will be updated with this new cart data, which includes information like the total line quality, which is what is updated here in our little bag icon. So all of that has been abstracted away from you. So you can just use the providers and hooks and built-in components to make those API calls for you really nice and seamless. So, again, thanks Hydrogen team. You've designed this so we can build things in a really fast and intuitive way. So once we're actually able to add some products to our cart, let's go ahead and render some cart details.

So, again, this is going to be a little heavy in the JSX. So I'm gonna do some copy paste work, but we'll talk about what we're using from the Hydrogen Framework. So again, we're using that Use Cart hook. We're also introducing a new provider. So the Cartline provider is gonna be a provider specific to that Cartline item. And that will give us access to data from that specific Cartline. We're pulling in the image and the link, which are components we've already covered. And then the Use Cartline hook is going to be available to us once we use the Cartline provider. So we're gonna export a default function where if there are no Cartline items, we just render a no items in cart message. Otherwise, we're going to iterate over the line items and that's gonna return JSX where we set up a Cartline provider where we pass in that line object. And then for right now, we're just going to render the JSON of that line. And then down below, I've set up two utility components for us to help us out when we actually expand the functionality of our Cart Details page. So I'm gonna copy all of this to my clipboard, head on over to Cart Details and replace what I have so far. If I head over to my Cart page, I should now see that I can see JSON for each one of my Cartline items. And this is all the data that I'll need in order to render a Cart page. So, super helpful. Let's go ahead and get rid of our pre-block where we're JSON stringifying our line data. And instead we're going to render some markup for each one of our line items. So, let's go ahead and first pull out some data from that Use Cartline hook. And we already have a component that was built for us.

I'm actually gonna delete that and un-comment this. And so for each line item, we're going to return a bit of JSX. So let's first pull out some data from each one of those cart lines. And then let's render some data. So we've already used a couple of these components before, but they should be familiar to you now. We have a link component, which is going to direct us to our product display page for that product by handle. Or render an image of this product line item. And then we're also going to render the merchandise title, which is also in a link component. And then rather than rendering the merchandise product title, below it, we'll render the merchandise title, which is a differentiator to help us understand what selected variants we have for this product that are configured on our product line item. And then lastly, we'll render the quantity for each one of our line items. So I'll go in and I'll paste in my return JSX with our additional data. So we should now see in the preview panel that we're rendering a product image, the title, the variant data, which is that merchandise title, and the quantity. So we're now able to see the cart data on our cart page.

And the last thing we need to do is add two pieces of interactivity to it. So we'll add a remove button for each one of the line items, and then we'll add a button so we can go from the cart page to the Shopify checkout. So let's do that in our next two steps. So we're going to add a remove button, and that remove functionality is going to come from the cart provider. So the cart provider gives us access to a line's remove function, and that line's remove function gives us the ability to remove one or more line item by ID. So let's first grab this from our use cart hook. We need to make sure that that is imported, and it is, great. For our cart line item, we're going to grab the line's remove function, and then we're going to add a button below our quantity field, so that when we click on that button, we run the line's remove function, and then pass in that line ID. So again, there's a little tailwindy goodness here, where I set up a couple of classes that make this a white button with black border and black text, and then in our onClick handler, save this, onClick handler, we run the line's remove function, and again, we can remove more than one line item, so this is actually going to be an array of line item IDs. So this is usually a common typo here, where you think you just pass in one line ID, but it's an array of line IDs, and now we're set up to actually remove products from our cart. So if I click on this remove button, that should remove it from our cart, and we'll see that our total quantity updates and we only have one other product in our cart. So that's a great way to add that remove functionality. So again, under the hood, if I run this line's remove command, it's running a mutation on our cart that will remove that specific line item for us, and then return a new cart state with all the data we need to render that data on our page. So again, a nice and simple way for us to declaratively state what the state of our app should be using providers and hooks.

So the last thing we'll do, and this will be the end of our workshop, is we're going to add in a checkout button, and we are just gonna render a simple link component, but we need to get a checkout URL that is specific to our cart. And so this is gonna vary for each person. So your URL for your cart is gonna be different from my URL for a cart, but we're able to access that within the framework very easily by pulling it from the use cart hook.

So inside of my checkout actions component, which is just kind of a placeholder component I have right here, I am going to use the UseCart hook to pull out the checkout URL, and then inside of the return.jsx, we'll render a link that's going to point to that checkout URL. So again, more tail-windy goodness where we set up a black button with white text. We've got two return statements. Don't want that. And so this link is just gonna point to our checkout URL. So now I see that I have a Continue to checkout button. And again, I don't think this is going to work from within StackBlitz, so I will head over to my cart page. And if I click Continue to checkout, that will take me over to my checkout page, just like it did with our Buy Now button. Our products are added to our cart for us and I'm ready to move along with my checkout flow.

So that's it in the span of a little over an hour, we have built a pretty feature-rich product display page and a functional cart page. So I'll leave you with a couple of bits as a conclusion. The first one is I mentioned at the end of the last workshop is we've dug into quite a few bits and functions and patterns of hydrogen, but we haven't shown all of it. So there's a lot more that you can explore and build with hydrogen. And in order to do that, you just have to dive into the docs to learn more. You could try extending this workshop to add in a Quantity Selector for each line item. You could try adding a Shop Pay button to your Checkout Actions component. Or if you want an extra super challenge, you could try rendering all of the cart details in a slide-out mini cart component. And we do have a full tutorial that covers that on shopify.dev.

As the last bit of communication, I'll leave you with a link to our Discord server where you can join at that link. And we have a Hydrogen channel where you can talk with other people that are using and building with Hydrogen. So with that, I want to thank you for following me along in this workshop. And we're gonna open the floor up for questions. And these can be questions that are about the framework or about Shopify. And we have people on our Hydrogen product team. So I'm just a developer advocate. I'm here to facilitate communication between the developers that build with Hydrogen and the product team that Hydrogen, the product team that actually builds Hydrogen. So with me today, we have Matt, we have Daniel, and we have Brett, who are the engineers that actually built Hydrogen for you. So I'm gonna shut up now. I'm gonna let my voice rest and I'm gonna turn it over to the Hydrogen team to handle the Q&A section. So take it away, guys.

Hey, everyone. Brett actually had to step out, so it's just me and Daniel here today. I'm seeing no Q&A answers or Q&A open questions so we'll just give folks some time to fill those in or if it, yeah, if anyone has any questions. I also just wanted to plug the discord as well as a place to, you know, if you have a big of questions after this workshop or maybe you fell behind and you're still working on your storefront, then the team's always monitoring that and it's a good place to kind of field your questions later on if they come back at you later. Yeah. And it's also a great place to check in for news because Hydrogen's always got new things that are being published. So bug fixes, new features, as the framework evolves, you'll be able to talk with other devs and see those news updates inside of Discord. So it's a really nice community space to make sure that, you know, you're up to date on everything Hydrogen and you can talk about how everyone is building with Hydrogen. So it may be a shy crowd today if we don't have all that many questions. So if you'd like, you can take a few moments while either of you have the audience and just talk about some of the features of Hydrogen you really like, or what you like about Hydrogen's current state and its future. Yeah, I can talk about it. So for example, the demo store that you can actually check it out that hydrogen.shop. I don't know how to write it here. I'll see if I can pull it up. Yeah. Like- Here we go. Yeah, like this demo we were able to build it in around two, three weeks with a lot of components that we had already done and it has a lot of things. I mean, we had all the products, we have a cart that opens and closes in the variants. And I think what a lot of people are doing is just going there and copying some of the components that we build there. But yeah, like hydrogen. So what we are doing now is like, we are like also trying to separate these components so that they could be reusable. And not necessarily with hydrogen, but it's a cool thing that we also recently saw some area store. What's the name? Atom. Did you see that one, David? Maybe we can open that one. I think it was atoms.io, or something. Atoms.io. Oh, the.com, atoms.com, I'll put it in the chat. Yeah. And that was impressive.

This was done by one developer in around three months. And I think that the average time for building headless storefronts it's around 12 to 18 months. So it's very fast for somebody to build something like this. And as you can see, I think the main difference is how custom you can make this compared to yeah, like a liquid storefront will allow you to, okay, we have this things. It will be easy. There's no development maintenance, which is great. Like I've given to some friends that and they have never touched it. I never had to touch it and they just do their thing. And sometimes they ask me if I should install an app or not. If I were going to do this, I would have to probably touch it if they have any questions, but you know.

Another example, but butcher box, maybe I can show a butcher box really quick as well. I don't know, is there, but. Yeah, yeah. So what's interesting about butcher boxes that they have a very specific cards where they, depending on what you choose, you can like build a box with a different set of things, of meat, and so I think this is the sort of situations where maybe, yeah, like a custom solution will make sense.

Yeah, I don't know. Those are just my experiences. Yeah, yeah, it does kind of unlock a lot of different possibilities. Sorry, go ahead, Matt. I was gonna say it's exciting for us to see these things come out as far as we work on it. And like for example, the atoms.com one, we didn't have any involvement in that. It just came across our radar, and it's cool to... I mean, it's a really slick looking site, which is nice, but it's just cool to see people use their stuff and build things easily and quickly and without any bounds really, cause it's just React and API's and headless commerce is pretty powerful, so. Yeah, I think it's great that if you think about Shopify development, a lot of it is, it feels really custom. Like there's a lot of internal knowledge you need to figure out with working with Liquid or working with apps. And so, you know, we kind of have a different paradigm with hydrogen where it's like, if you know, React and you understand a little bit about GraphQL API's, you know, you're everything's unlocked for you. It's all there. And so TypeScript helps us with, you know, type pinting and making sure that we have the right parameters and inputs and properties. And, you know, use the tooling that exists in the community and you can build and iterate really quickly.

Yeah. I guess in terms of some other features that we provide and that we want to continue to build up is we do have a CLI that can help you spin up an app really quickly. Choose between a few, like choose between the demo star template, and also a bare bones, like the most minimal version of a Hydrogen website that you can provide. So we have those two options as templates, and then we also have a support for both JavaScript and TypeScript. And the CLI can also help with building and deployment and other things, just like common CLIs with other framework. So this is something that we're building up a lot recently as like a lot of the CLI work at Shopify has been ramping up and we've been a part of that. So that's just a shout out to some of the other tooling that you will have available to you if you choose a Hydrogen route that wasn't so much demoed in this workshop because of the nature of using stack votes, which is great. So if you do wanna pull down something and start hacking in your own VS code or whatever, then there's the CLI and the docs for that. Yeah, great. I think shopify.new will also get you a quick way of, I'm sorry, hydrogen.new, if I can type it, will also kind of get you to a nice starting point where you have a template already set up and you can just start building a site really quickly. So a lot of different options to get you up to speed and playing with hydrogen as a framework in a short amount of time. That's definitely something that we wanna give you in a short amount of time. So great job on making everything super easy and available for everyone. Yeah, I will start usually if I wanna play with something and try something and go to the API of Shopify and see if I can fetch something or try. This is the quick way without having to download the repo. So yeah, I recommend that one. Yeah, it's a great time to be a developer. So I can just type something into a URL bar and I have an IDE and a side already built for me so I can start hacking away. Yeah. And we also support, we have specific links in the repo for each of our templates. It was, I mentioned earlier that we'll actually produce a stat lets for that specific template. So we want to even start with something that's not TypeScript or TypeScript or the more minimal template I mentioned earlier, you can actually do that as well, which is pretty cool. Yeah, these editors like stat lets are just doing insane things, like it's so cool to watch and just like how it lowers the barrier to entry for kind of getting things up and running. Even just with helping us in support, like it's so nice when people just post the stat lets URL to their bug or to their issue that they're facing that they need help and we can easily just see it, it's so nice to have that available to us. So really excited about that. Like I think in the next, like, I mean, we're seeing it right now, it seems like every day things are releasing when it comes to like stat lets, code sandbox, gitpod, that kind of things, but I think the next couple of years are gonna be really exciting in that world as well. Yeah, for sure. We do have about five minutes left. I don't know if there's anything you wanted to shout out in the Hydrogen community or in the React community at large, we have a captive audience, so feel free to speak your mind. I don't really have anything. Daniel does have a workshop or a lightning talk. What is it on Friday, Daniel? Maybe you want to plug that so people can catch it.

Yeah, right. I have React Advanced London this Friday. I have a talk about server components and I explain a little bit about them more. Yeah, what are the advantages, disadvantages, and our experiences, because I guess they are not like officially out and like some of the meta frameworks are still kind of releasing them. So, there's some discoveries, of course, from our side since we've been, since we launched Hydrogen in June. And so I just kind of do a lighting talk around them.

Yeah, I don't know where's the address? I really don't know how to use this interface. Let me get it for you, but I'll send it in a second. Great, thanks Daniel. I have a question for all of you since you're here. Matt, Daniel and David, there's wind up. Well, what's your favorite, or what's newsletter or reacts blog is your go-to at the moment? So, I'm like not active on Twitter like many devs are. And probably less than, but many mostly even on the team and things like that. So, I actually am very into consuming, but kind of keeping up to date with the community news via newsletters and podcasts. I really like a lot of the podcasts I've been coming out lately that are just like really specific to Dino, which is just a project that I've been following along with a lot. So I think this one is just like Dino news or there's only like a Dino Weekly or something like that, that I follow along more recently, but a lot of the classics like Syntax.FM, Chat Talk Show, JavaScript Jabber and Front and Happy Hour, I use those probably for a lot to keep up. And in terms of newsletters, I just really like the standard ones like the ESNext one and the React Weekly one, like I'll pick the weekly, like ESNext Weekly and React Weekly, I don't read everything obviously, I scroll past a lot and kinda just whatever headlines if there's something interesting that somebody is talking about. And then the other one that I kinda like lately, it's like UI.dev, I think it is. That's like kinda funny. I think that's what it is. And they have a newsletter. I was gonna say, that one. I was gonna say that one. That one's my favorite, it's hilarious. I don't know who writes it, but he writes so many jokes. It's a great, it's like Bites, your weekly dose of JS is called. Yeah, that's the one. Yeah, that one I really thought, it stands out and I tend to like, read it all a bit more reliably than some of the other ones, which are just like lists. But you know, more distracting. Great comedian. Recommend it. Ooh, I'm gonna have to subscribe cause this isn't one that I subscribe to. So that's great. Yeah. The other one that I provide that wasn't mentioned is I follow Kent Dodds on Twitter and he's got a lot of great content. Some of it's specific to React, some of it's specific to Remix. And then he's got another channel that's just web specific. And I think he started a newsletter recently and Kent does a really great job at teaching and instructing. And he's got high quality content with great diagrams and pretty much everything he puts out is solid gold. So I love to learn from him. Lovely.

All right, cool. So I think that wraps it up really well. Davey, great job. Thank you so much for running it. Daniel, Mudd for your insights and for answering questions and to everyone who's hung out with us till right now, we appreciate you. Thank you very much. If you will be in-person at React Advanced London this Friday, like Daniel has mentioned, he's going to be there. So go say hi, but also go and see the lightning talk. It will be at 3.30 PM, local time. But we truly appreciate you. So thank you for joining and enjoy your day. Take care. Thanks, Rushia.