Commerce — `@sonordev/site-kit/commerce`

Products, services, classes, events, and checkout flows — all managed from the Sonor dashboard.

Components

Component	Purpose
`OfferingCard`	Card display for any offering type
`OfferingList`	Grid/list of offerings with filtering
`ProductPage` / `ProductDetail`	Full product page with gallery, sizes, variants
`ProductGrid` / `ProductEmbed`	Product showcase widgets
`SizeChart`	Clothing size chart display
`EventTile` / `UpcomingEvents`	Event display widgets
`EventCalendar` / `EventModal`	Calendar view + detail modal
`EventEmbed` / `EventsWidget`	Embeddable event components
`CheckoutForm`	Payment checkout flow
`RegistrationForm`	Event/class registration
`CalendarView`	Date-based calendar component

Usage

import { OfferingList, ProductPage } from '@sonordev/site-kit/commerce'

// List all offerings
export default function ShopPage() {
  return <OfferingList type="product" />
}

// Single product page
export default function Product({ params }) {
  return <ProductPage slug={params.slug} />
}

API Functions

import {
  fetchOfferings, fetchOffering,
  fetchProducts, fetchProductBySlug,
  fetchUpcomingEvents, fetchNextEvent,
  fetchCategories, fetchServices,
  createCheckoutSession, createPaymentIntent,
  validateDiscountCode, registerForEvent,
  fetchShippingRates, validateAddress,
} from '@sonordev/site-kit/commerce'

Offering Types

type OfferingType = 'product' | 'service' | 'class' | 'event' | 'subscription'

interface CommerceOffering {
  name: string; slug: string; type: OfferingType;
  description?: string; featured_image_url?: string;
  price_type: 'fixed' | 'variable' | 'quote' | 'free';
  price?: number; compare_at_price?: number; currency: string;
  track_inventory?: boolean; inventory_count?: number;
  is_clothing?: boolean; size_chart?: SizeChart;
  duration_minutes?: number; capacity?: number;
  location?: string; is_virtual?: boolean;
  schedules?: CommerceSchedule[]; variants?: CommerceVariant[];
}

Per-category styling (`data-category` / `data-offering-type`)

Event and offering surfaces expose the offering's category slug and type as data attributes, so sites can theme categories with plain CSS — no custom components needed. data-category is only present when the offering has a category; data-offering-type is always present.

Elements carrying the attributes:

CalendarView / EventCalendar — .site-kit-calendar-event chips (both title and image display modes) and the image-mode wrapper
EventTile (both variants — also covers UpcomingEvents and EventEmbed)
EventsWidget — .site-kit-event-card in list and grid views
OfferingCard (all variants — also covers OfferingList / ProductGrid)

/* e.g. two color schemes on one calendar: PTO vs school district */
.site-kit-calendar-event[data-category="pto"] {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}
.site-kit-calendar-event[data-category="school-district"] {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

Size Charts (clothing products)

interface SizeChart {
  unit: 'inches' | 'cm'
  fit_note?: string                // e.g., "Runs small. Order one size up."
  measurements: string[]           // ['Chest', 'Length', 'Sleeve']
  rows: Array<{
    size: string                   // 'S', 'M', 'L', 'XL'
    values: number[]               // Primary unit values
    values_alt?: number[]          // Auto-converted alternate unit
  }>
}

Commerce — @sonordev/site-kit/commerce