We see, we will see later for the single product that we use another method that is simpler but that cannot bring additional data. So we get our collections to have the titles, the handle and the description and we get all our products and we filter them by collections and by the handle to be for example, woman or jacket. The limit is a number of products we want to paginate and this is where I put it, items for page 50. So here we don't have pagination but if I put 10 for example, we will, and every launch, we will have 10 products only, so we can do that also.
Okay. As you can see now, we have only 10 products, but we have a page 2 here, okay? So let me know if you have questions. No questions? I go on. No. Okay, so next we're going to create the Product Card, so we go to Brand 3, Create Product Card. First, we are going to create an image component that uses Gatsby image. So Gatsby image come from Gatsby Plugin Image, and it makes a really optimized image, and it has several parameters, several props. Loading that we put by default lazy, but if an image is on top of the page, we put ingest so the image will load faster. The image, so the image uses Gatsby Image Data, and alternative text, and props. Then we create, I will show you where we see Gatsby Image Data. Then we create the product card components here. And two components. Yes, I have to change range. Okay, if we go to, okay, here is my image component, and here is my product card. So, I bring this image component and here's a prop, this product, and from there, I get my title, my handle, my variant, my feature and image. So, the handle I make the link, and the image is a featured image from the product. So, let me show you where is it in GraphicQL. In GraphicQL, so, in my product, if I put my featured image, here we have Gatsby image data, okay, and this is how it looks. So, it brings different sizes and re-optimizes the image. So, here is our product card and then, of course, we add the product card to the collection templates, so we import the component. Also, we need to add the fragment, who's the page query, I will need to show you that, and we include the component in the collection template. And also, we need to correct Tailwind because Tailwind by default has only two pages and components and we need to include templates here. So, let's look at this, so if I go to my collection now, template collection, I bring my product card here and I map around my products and here I pass my product and as see I pass my product handle and I put all the data I need here in my page queries so I need the titles, the handles, the featured image, gatsby image data and from the variants I need the price and then in Tailwind here, I put my templates and now if we go to our portal, God, I hate this toolbar, I don't know what to do with it. Somebody knows how to hide it, tell me because I'm used to several screens and oh, it disappears if I do that and I really feel bad with one screen. Okay, so you see now we have our collections. Okay, and the price title but we need to do the single products because we have done it and for the moment it leads to the four page. So now we are going to create the single products on branch four, create single products and here we are going to use the other method which is the file system with API to have the documentation and guides here if you click. And for that, we go to pages and we create this file like that Shopify product.handle because the handle will define the URLs. So if we go in GraphQL you can see that in, Shopify product, Share, Handle, okay. Yes. We have to enter it by product. But if we go to old Shopify products and then we will have the URL. So here's in old Shopify product, now then, handle, okay. So that will be our URL. So it's Shopify product.handle here my page is, so I go to branch four. And so if I go to my pages here, I have my products. So here I do a page query and I filter by the handles of my Shopify products and I query the data that I need. So the title of the description, the featured image again, the price from the variant and yes, I have two times a featured image. So this is the one we have to remove, I think. And so I get this data here and I destruct it and I get my title, my description, my variants, my featured image. And from there I build my product. So here we take, we have only one variant in a more advanced, and we real world shop, we will have several variants for the colors, the sizes, et cetera. But for this workshop, we keep it simple and we do only one variant to take. So first of the array with the price. Okay, so now we should see our single product. So, and while I sort the image, the title, the price, and the description.
Comments