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

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

Other schemas by author