Discussion on content modeling for a product component with specs and block content in Slack.
6 replies
Last updated: Aug 25, 2021
S
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
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
🙇♂️
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' }]
}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
specwould 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
S
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
S
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
S
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.