Everything *[NYC] 2026: see what we announced.

E-commerce alert banner schemas and GROQ query

By Bryan Robinson


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

Bryan Robinson

Sr. DevRel @ Algolia

United States

Visit Bryan Robinson's profile