Create a Product Category Graphcms Schema to Manage Product Groupings
We are going to create a schema as we did in lesson 2, but this one is going to be for our Categories at the bottom of the home page. This will be slightly different because we are going to add a Reference field. This way we can create a reference between our categories and our products.
Then over in the content tab, we will add our existing products to an Apparel category, an Accessory category, and a Featured category.
Instructor: [0:00] Back inside of our application, we have our products set up, we have our home page set up, and we even have pages for those products, but we want to give a better way for people to discover each of our products, the things that they want to be able to find.
[0:13] For instance, while some people might want to look at the accessories that we provide, others might want to find the apparel, such as this awesome Space Jelly Cosmo T-shirt. To do that, we're going to use categories where we're going to create an apparel category and accessories category. We're going to also create a featured category, which is how we're going to manage this section on the home page.
[0:33] Back inside of our GraphCMS dashboard, the first thing we're going to want to do is create a category schema. If we head over to the sidebar and find schema, we're going to click Add Model, where we're going to add our category model. We can click Create.
[0:47] To start off, like every other model that we've created, we want to add a single line text, which is going to be our name, which is going to be the name of the category. We want to also use as title field like we typically do and click Create.
[0:59] Just like our products on our pages, we want to make sure each category has a slug. We're going to call this slug. Then we're going to go ahead and generate the slug from template like we typically do. We're going to use the category name, which is going to turn it into a lowercase value as well to create that slug.
[1:15] For each category, we want to associate it with a group of products. To do that, we want to add relationships between that category and products. Over inside of Add Fields, we're going to scroll all the way to the bottom, where under the Relation, we see Reference. We're going to go ahead and click that.
[1:29] Now we could see that our field configuration is a little bit different to some of the other things that we've seen. The first thing we want to do is define our relationship where we only want to allow one model to be referenced, first of all, but under model of reference, we want to select our product model.
[1:45] We can choose the reference directions, and we want to make sure that we create a two-way reference so that they can reference each other.
[1:52] Finally, for this particular definition, we want to make sure that not only can we map many-to-one, we want to be able to map many-to-many. If we see how these checkboxes are configured, we see allow multiple categories per product, and allow multiple products per category. Then we can click Continue.
[2:09] At this point, we're going to configure how our products are displayed inside of our category. We can see that it's prefilled with products, and we're going to just leave that as is and again, click Continue.
[2:20] Finally, on the flipside, because we chose that we want two-way relationships, we want to be able to configure how our categories are shown on our products. We can see it was prefilled with categories, which we're going to leave as is and again, click Create.
[2:34] Finally, I always like to leave my slug at the bottom. I'm going to move my products up inside of the middle here. Now we have our category model ready to go, so we can go ahead and add some categories, and we can add products to those categories.
[2:47] Over in the Content section of GraphCMS, we can see we have our default views, where I'm going to select Category, which is already selected because it's the first in that list. We're going to go ahead and click Create Item.
[2:58] As I mentioned before, one of the categories we're going to create is Apparel. I'm going to add Apparel as the name. We can see that the slug is automatically generated, but now we can add products to this category.
[3:11] Once I click Add Existing Products, we can see that all those products are loaded inside of this table for us to view. If I scroll over inside of this table, we can see all the names where we want to add things like our hooded sweatshirt.
[3:24] I'm going to scroll over, and I'm going to check that one. We can keep scrolling down. I have my regular sweatshirt, not my hooded one. We have my kids T-shirt, regular T-shirt, and V-neck. I'm going to also select those bottom three items. We can see that once we do, we now have five items. I'm going to click Add Selected Products, and we can see all those products listed inside of this new category.
[3:46] Like usual, I'm going to save and publish this new category. I'm going to head back over to my category list, where I'm going to click Create a New Item, where this time, we can add accessories. Once I have those products selected, I can click Save and Publish as well.
[4:01] The last category that we're going to create is our featured category, where this category really isn't going to be different from any of the other categories we've created. It's just going to be how we use it that's going to be a little bit different.
[4:13] What we want to do is add a few items to the featured list. It doesn't have to be these first four because this is literally the first four products in the list. Once I add all those products, we can even rearrange them to see how we want them displayed.
[4:25] For instance, I do want my hooded sweatshirt to be at the top, but maybe I want my pillow to be the second slot. I want my trucker hat to be the last slot. We can see this is the order that it will show up right inside of our UI.
[4:36] Now we have all of our categories in place that we want to use for our application. The next step will be querying it and adding it to our app.