✨Discover storytelling in the AI age with Pixar's Matthew Luhn at Sanity Connect, May 8th—register now

Discussion on content modeling for a product component with specs and block content in Slack.

6 replies
Last updated: Aug 25, 2021
Hey all, I wanted to get some feedback on what I’m trying to do.
I have this component that I want to hydrate with sanity data.

I’m calling this a product and the product has specs which is an array of spec objects. A spec object has a name (tab) and block content. I’m guessing I need to add a serializer to consume the block content and turn it into the html shown in the list. I was attempting with unordered lists like
• laptop
◦ The machined kettle has a smooth black finish and contemporary shape that stands apart from most plastic appliances.
Is this the right way to go about this? Any tips here? For the block content I have the simplest form

{
  name: 'content',
  title: 'Content',
  type: 'array',
  of: [{ type: 'block' }]
}
Is there a way to guide the user to input the correct format for the block content?

Any tips are greatly appreciated. Also, if there’s a better channel for this please lmk
🙇‍♂️
Aug 25, 2021, 4:55 PM
Hey Sean! Quick question: does the description of the spec need to be rich text in this case? I was thinking through this and it may be better to make this an array (
specs
) of objects (a single
spec
). Each
spec
would have a title (i.e. ‘laptop’) and a description (i.e. ‘The machined kettle has a smooth…’). In terms of schema, it would look like this:
export default {
  name: 'product',
  title: 'Product',
  type: 'document',
  fields: [
    {
      name: 'specs',
      title: 'Specs',
      type: 'array',
      of: [
        {
          name: 'spec',
          title: 'Spec',
          type: 'object',
          fields: [
            { 
              name: 'title',
              title: 'title',
              type: 'string',
            },
            { 
              name: 'description',
              title: 'Description',
              type: 'text'
            }
          ]
        }
      ]
    }
  ]
}

Aug 25, 2021, 5:58 PM
user M
Thanks for your reply!I like your solution for this. Although it might end up being something like a spec has a title and an array of detail objects that have a title and description. Because the spec title is for the tab so “Uses”, “Functionality”, etc.

What I didnt include in my original question is that I also want to be able to display in this format as well. I was thinking rich text would give me this flexibility.
Aug 25, 2021, 9:58 PM
maybe I could have an optional image field
Aug 25, 2021, 10:05 PM
Looking at that, I’d also have this be an object and really like the idea of the optional image field! In my opinion, it’s a cleaner content model to store these things in arrays of objects and then handle how they’re displayed on the frontend.
Aug 25, 2021, 10:17 PM
Perfect. I’ll go with that! Thanks so much
Aug 25, 2021, 10:18 PM
Of course! I could talk content modeling all day 😎. Feel free to keep your questions coming!
Aug 25, 2021, 10:19 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?