3.2 Add components to your models

#Overview

#Adding the components to our models

In this step of the tutorial, we'll combine the models we created at the start with the components we created in the last lesson.

#Product

In this step, we'll add our Product Variant & Related product components to our Product model.

Let's start with Product Variant: We'll select the Product model on the Schema and add a Basic component field to it from the right sidebar.

We'll use the following information:

Click Add to save your component.

We just created a basic component field that will allow us to select a product type with its own set of fields to complete every time we create a product entry.

For our related products section, we'll add a Basic component field from the right sidebar using this information:

Click Add to save your component.

We just created a basic component field containing the Related products component we configured before.

Your Product model should look like this:

Finished Product model with fields

#Landing page

We're going to add a modular component to our Landing page, which we will later use to add CTA and Product grid as sections. Adding this as a modular component that allows multiple values will give us more flexibility in the future.

We'll select the Landing Page model on the Schema and add a Modular component field to it following the same steps as when we added a modular component in a previous lesson.

We'll use the following information:

Click Add to save your component.

Your Landing page model should look like this:

Finished Landing Page model with fields

#Included in the project

#Navigation

In previous lessons, we looked into the Navigation model. This model was missing something: We need to be able to add links in order to create our e-commerce website navigation.

Later on, we created the Link component, where we added a reference that related it to the Blog post, Landing page, and Product models. This is the component we will now add to the Navigation model, so we can create the navigation links later.

Let's get into the Navigation model and add a Basic component field using the following information:

Complete basic component

Click Add to save.

Now that our Navigation model is complete, it should look like this:

Finished Navigation model

If we go to the content editor, we can see that the Navigation model lets us add references from the models we configured in the Link component, and because we can add multiple values, we can simply add the component as many times as we need to build the list of links that we want our navigation to have.

Navigation content entry creation