Product/Price document in Sanity

In this section, we create the schema for the product/price document in the Sanity Studio. The respective two (2) document is used to store the following information:

• The product document store the data for the course information.
• The price document store the pricing details for the course.

In our case, we create a separate document for the price even we can use the product document to store the pricing details. But the price document is used as a reference for both the product and subscription document. That's why we create a separate document for the pricing.

The schema for the Product, Price, and Content documents are related to each other as shown in the below image.

In the above image, we use a reference schema object to interconnect different documents.

For the product document, we can create the file at the below location:

• /schemas/documents/product.js

📁 studio
├── 📁 schemas
|   └── 📁 documents
|		    └── 📝 product.js
└── 📝 sanity.json

In the product.js file, we can paste the below code.

import { MdPages } from 'react-icons/md'

export default {
  name: "product",
  title: "Product",
  type: "document",
  icon: MdPages,
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "slug",
      title: "Slug",
      type: "slug",
      options: {
        source: "title",
        maxLength: 96,
      },
    },
    {
      name: "image",
      title: "Image",
      type: "mainImage",
    },
    {
      name: "exerpt",
      title: "Exerpt",
      type: "bodyPortableText",
    },
    {
      name: "productPrice",
      title: "Product Price Reference",
      type: "reference",
      to: [{ type: "price" }],
    },
    {
      name: "body",
      title: "Body",
      type: "bodyPortableText",
    },
 
  ],

  preview: {
    select: {
      title: "title",
      media: "image",
    },
  },
};

To add the product document in the Sanity Studio, we can update the code in the /schemas/schema.js file as below:

The product document preview in the Sanity Studio is as below:

As defined in the schema, the product document has the price document as a reference. The price document does not exist yet.

For the price document, we can create the file at the below location:

• /schemas/documents/price.js

📁 studio
├── 📁 schemas
|   └── 📁 documents
|		    └── 📝 product.js
└── 📝 sanity.json

In the price.js, we can write the code as below.

export default {
  name: "price",
  title: "Price",
  type: "document",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "content",
      title: "Content",
      type: "reference",
      to: { type: "content" },
      },
    {
      name: "price",
      title: "Price",
      type: "number",
    },
    {
      title: "Currency",
      name: "currency",
      type: "string",
    },
    {
      name: "priceID",
      title: "Stripe Price ID",
      type: "string",
    },
  ],
  preview: {
    select: {
      title: "title",
    },
  },
};

To add the price document in the Sanity Studio, we can update the code in the /schemas/schema.js file as below:

The above code preview in the Sanity Studio is as below:

In the Price document, we insert the price data from the Stripe dashboard as shown in the image below.

We use the reference schema in the price document to link the content document in the price document.

The main idea is that a user can access the content document data when the payment has been completed.

Finally, we need to add the reference link in the product document for the price document. For that, we can update the code in the schemas/documents/product.js file as below:

Now, the Sanity Studio documents preview as below: