E-commerce alert banner schemas and GROQ query
alert.js
export default {
name: 'alert',
title: 'Site Alert',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'string',
description: 'For internal use only.'
},
{
name: 'text',
title: 'Alert text',
type: 'text'
},
{
name: 'callToAction',
title: 'Call to action',
type: 'object',
options: {
columns: 2 // Puts the fields side-by-side
},
fields: [
{
name: 'text',
title: 'Link text',
type: 'string'
},
{
name: 'url',
title: 'Link URL',
type: 'url'
}
]
},
{
name: 'style',
title: 'Banner style',
type: 'string',
options: {
// Creates a dropdown to select the strings
list: ['Sale', 'Promo', 'Breaking']
}
}
]
}siteConfig.js
// This file contains any global site config
export default {
name: "siteConfig",
type: "document",
title: "Site configuration",
// https://www.sanity.io/docs/experimental/ui-affordances-for-actions
fieldsets: [{ name: "footer", title: "Footer" }],
fields: [
{
name: "title",
type: "string",
title: "Site title",
},
{
title: "URL",
name: "url",
type: "url",
description: "The main site url. Used to create canonical url",
},
{
// Gets a singular alert from the list of alerts
name: 'alert',
title: 'Global alert for site',
type: 'reference',
to: [
{type: 'alert'}
]
},
// ... Anything else you need globally
]
}GROQ Query
*[_id == 'siteSettings']{ // Get the siteSettings Singleton
..., // Get all data
alert->{ // Get the data from the alert reference, and project the data we need
text,
callToAction,
style
}
}This is a companion snippet for this YouTube tutorial. Watch the video for a full walkthrough.
This set of schema builds the data necessary to do a global "alert" banner for any type of application. Typically, this would work well for an e-commerce website.
The alert.js file builds the data necessary to allow editors to add as many alerts as they want. In the siteConfig.js file, we add a reference field to allow them to choose which alert to show on the site. Finally, we can query this with the attached GROQ query.
Contributor

Bryan Robinson
Sr. DevRel @ Algolia
United States