Page Templates

Introduction

Page templates allow to configure a set of predefined slots for a pageType.
Each slot is a fixed part of the page with a name, label, min and max number of blocks and allowedBricks. It can be editable or not and have its default content, defined by the getDefaultContent function.

Templates are ideal for pages like e-commerce product details, where you have fixed sections that may fetch data from external APIs, as well as more flexible areas for content editors to customize.

Properties

Each template object has the following shape:

type TemplateSlot = {
  slotName: string
  label: string
  min?: number
  max?: number
  allowedBlockTypes?: string[]
  excludedBlockTypes?: string[]
  editable?: boolean
  getDefaultContent?: () => (string | IBrickStory | IContentBlock)[]
}

Properties definition

Property	Definition
slotName	The name for the slot, unique for the pageType.
label	Label for the slot showed in the editing interface.
min	Minimum number of bricks
max	Maximum number of bricks
allowedBlockTypes	The bricks allowed in this slot
excludedBlockTypes	The bricks not allowed in this slot
getDefaultContent	Function that returns the default content for a new page of this slot. If the function returns a string for a block, it should be a brick name: the default content for that brick will be used to populate the block. In case of an IBrickStory, a particular story of the brick is used to populate the block. In case of IContentBlock you can provide the exact content block (id, type and props).

Usage example

const pageTypes: types.IPageType[] = [
  {
    name: 'product',
    pluralName: 'products',
    defaultStatus: types.PageStatus.Published,
    template: [
      {
        slotName: 'heading',
        label: 'Heading',
        min: 1,
        max: 1,
        allowedBlockTypes: ['product-heading'],
        editable: true,
      },
      {
        slotName: 'content',
        label: 'Content',
        min: 0,
        max: 4,
        allowedBlockTypes: [
          'text-image',
          'product-info',
          'carousel',
          'paragraph',
        ],
        editable: true,
        getDefaultContent: () => ['product-info', 'carousel'],
      },
      {
        slotName: 'related-products',
        label: 'Related Products',
        min: 1,
        max: 1,
        allowedBlockTypes: ['related-products'],
        editable: false,
      },
    ],
  },
  ...
]

Rendering single Slots

Once you define slots on a page template, you can also render single slots instead of a full page. Rather than using <PageViewer page={page}>, you can render a single slot using the <Slot> component:

<Slot page={page} name="heading">