Booking Directory Block
A special directory block that displays booking types and claims child routes for individual booking detail pages.
Directory BlockThis is a directory block - when placed on a page, it claims child routes. For example, if placed on a page with slug book:
/book- Shows the booking list (this block)/book/muay-thai-class- Shows booking detail page/book/muay-thai-class/checkout- Shows checkout page
Preview
Grid Layout with Categories
Booking types grouped by category
Book a Session
Browse our offerings and find the perfect class for you.
Group Classes
Train with others in our group class sessions
Fundamentals Class
60 minutes
Build your foundation with basic techniques and proper form.
Private Sessions
One-on-one training with our expert coaches
Youth Programs
Classes designed for younger athletes
Flat Grid (No Categories)
All booking types in a simple grid
Our Classes
Fundamentals Class
60 minutes
Build your foundation with basic techniques and proper form.
List Layout
Compact list view
Properties
| Property | Type | Default | Description |
|---|---|---|---|
title | string | - | Optional heading above the list |
description | string | - | Optional intro text |
source | 'all' | 'selected' | 'all' | Show all booking types or selected ones |
selectedTimeBlockIds | string[] | - | IDs of specific booking types to show |
layout | 'grid' | 'list' | 'grid' | Display layout |
showCategories | boolean | true | Show category filters |
groupByCategory | boolean | true | Group items by category |
Route Claiming
When this block is placed on a page, it claims child routes for the booking flow:
Page slug: "book"
├── /book → This block (listing)
├── /book/[bookingTypeSlug] → Booking detail page
└── /book/[bookingTypeSlug]/checkout → Checkout page
The page slug becomes the namespace for all booking routes.
Data Dependencies
This block pulls data from your space:
interface TimeBlock {
id: string
title: string
description: string
slug: string | null
coverImageSrc: string | null
shortDescription: string | null
lengthMinutes: number | null
categoryId: string | null
}
interface Category {
id: string
name: string
description: string | null
timeBlocks: TimeBlock[]
}
Usage
// Full directory with categories
<BookingDirectoryBlock
content={{
title: 'Book a Session',
description: 'Browse and book your next class',
source: 'all',
layout: 'grid',
showCategories: true,
groupByCategory: true,
}}
timeBlocks={bookingData}
categories={categoryData}
/>
Comparison: Booking vs Booking Directory
| Feature | Booking Block | Booking Directory Block |
|---|---|---|
| Claims routes | No | Yes |
| Detail pages | No (links to /book) | Yes (/[pageSlug]/[itemSlug]) |
| Category grouping | No | Yes |
| Use case | Quick listing/preview | Full booking experience |
Best Practices
- Use for main booking page - This should be on your primary booking page
- Choose a clear slug - "book", "services", or "classes" work well
- Only one per site - A site should only have one booking directory
- Enable categories - Helps users find what they're looking for