Get help on Discord

Managing order references in Sanity schema for API integration.

5 replies
Last updated: Nov 1, 2021
user M
and
user A
i have a 2 category like logo and web but my problem during the checkout 2 different form fields on conditional base see my form fields below link can you elaborate me how to manage in order schemalink1
https://logozila.com/logo-questionnaire/?id=6964&customer_email=test%40gmail.com&customer_name=test&amount=60&package=Start+Project&currency=USD link 2
https://logozila.com/logo-questionnaire/?id=6965&customer_email=test%40gmail.com&customer_name=test&amount=169&package=Start+Project&currency=USD
AI Update

Based on your question, it sounds like you need to handle different form fields in your order schema depending on the product category (logo vs web). Sanity's conditional fields feature is perfect for this use case!

Here's how to set up your order schema to show different fields based on category:

export default {
  name: 'order',
  type: 'document',
  title: 'Order',
  fields: [
    {
      name: 'orderId',
      type: 'string',
      title: 'Order ID'
    },
    {
      name: 'customerEmail',
      type: 'string',
      title: 'Customer Email'
    },
    {
      name: 'customerName',
      type: 'string',
      title: 'Customer Name'
    },
    {
      name: 'category',
      type: 'string',
      title: 'Category',
      options: {
        list: [
          {title: 'Logo', value: 'logo'},
          {title: 'Web', value: 'web'}
        ]
      }
    },
    // Logo-specific fields
    {
      name: 'logoStyle',
      type: 'string',
      title: 'Logo Style',
      hidden: ({document}) => document?.category !== 'logo'
    },
    {
      name: 'colorPreferences',
      type: 'string',
      title: 'Color Preferences',
      hidden: ({document}) => document?.category !== 'logo'
    },
    {
      name: 'logoInspiration',
      type: 'text',
      title: 'Logo Inspiration',
      hidden: ({document}) => document?.category !== 'logo'
    },
    // Web-specific fields
    {
      name: 'websiteType',
      type: 'string',
      title: 'Website Type',
      hidden: ({document}) => document?.category !== 'web'
    },
    {
      name: 'numberOfPages',
      type: 'number',
      title: 'Number of Pages',
      hidden: ({document}) => document?.category !== 'web'
    },
    {
      name: 'features',
      type: 'array',
      title: 'Required Features',
      of: [{type: 'string'}],
      hidden: ({document}) => document?.category !== 'web'
    },
    // Common fields
    {
      name: 'amount',
      type: 'number',
      title: 'Amount'
    },
    {
      name: 'package',
      type: 'string',
      title: 'Package'
    },
    {
      name: 'currency',
      type: 'string',
      title: 'Currency'
    }
  ]
}

The key is using the hidden property with a callback function that checks the category field value. When category is set to 'logo', only logo-related fields will be visible. When it's 'web', only web-related fields will show.

If you need to make certain fields required only when visible, you can add conditional validation:

{
  name: 'logoStyle',
  type: 'string',
  title: 'Logo Style',
  hidden: ({document}) => document?.category !== 'logo',
  validation: (Rule) =>
    Rule.custom((currentValue, {document}) => {
      if (document?.category === 'logo' && !currentValue) {
        return 'Logo style is required for logo orders'
      }
      return true
    })
}

This approach keeps your schema clean and provides a better editing experience by only showing relevant fields based on the order category. The conditional fields feature has been part of Sanity Studio since v2.17.0 and works seamlessly with the document editing interface.

yes i have 2 order form in 4 site but problem how i mange the order reference for the schemaexport default {
title: 'Order',
name: 'order',
type: 'document',
__experimental_actions: ['create', 'update', /*'delete',*/ 'publish'],
fields: [
{
name: 'order_item_name',
title: 'Order Item Name',
type: 'string',
},
{
name: 'order_item_type',
title: 'Order Item Type',
type: 'string',
},
{
name: 'order_id',
type: 'reference',
to: [{type: 'order_item'}]
},
],
preview: {
select: {
title: 'order_item_name',
},

},
}
yes i have 2 order form in 4 site but problem how i mange the order reference for the schemaexport default {
title: 'Order',
name: 'order',
type: 'document',
__experimental_actions: ['create', 'update', /*'delete',*/ 'publish'],
fields: [
{
name: 'order_item_name',
title: 'Order Item Name',
type: 'string',
},
{
name: 'order_item_type',
title: 'Order Item Type',
type: 'string',
},
{
name: 'order_id',
type: 'reference',
to: [{type: 'order_item'}]
},
],
preview: {
select: {
title: 'order_item_name',
},

},
}
Hey User, so to clarify, are you trying to create a reference using the API based off of the input from this form on your frontend?
yes
user M
Ok, thanks for clarifying. I was finally able to wrap my brain around this. Using the API, you need to set up a reference object. This takes two properties: 
_type
and 
_ref
. 
_type
will always be 'reference' and 
_ref
will be the document you're referencing. In your case, you would have to add this:
order_id: {
  _type: 'reference',
  _ref: '<id-of-the-order-item-document>'
}

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?