Slot catalog
Generated from @mercury/collection-sdk 0.1.0 (collection-kit/sdk/src/slots.ts). The slot name is the stable public key; adding a slot or an optional prop is a minor SDK release, renaming or removing one is a new major. Read the Collection Kit overview first.
UI slots (31)
Svelte components wrapped with defineSlot. Each receives its props and ctx.
Layout
| Slot | Props (plus ctx) |
|---|---|
layout.page | { mode: "column" | "ribbon" | "mobile" } |
layout.header | { zones: HeaderZone[] } |
layout.filters | { mode: "column" | "ribbon" | "mobile"; facets: Facet[] } |
layout.grid | { items: GridItem[]; columns: number } |
layout.footer | {} |
Header
| Slot | Props (plus ctx) |
|---|---|
header.title | { title: string } |
header.count | { count: number } |
header.body | { html: string; readMore?: string } |
header.breadcrumbs | { title: string; handle: string } |
header.searchInput | { term: string } |
Filters
| Slot | Props (plus ctx) |
|---|---|
filters.group | { facet: Facet } |
filters.value | { facet: Facet; value: FacetValue } |
filters.active | { active: ActiveFilter[] } |
filters.sort | { options: SortOption[]; current: SortKey } |
filters.clear | {} |
filters.priceRange | { min?: number; max?: number } |
Grid
| Slot | Props (plus ctx) |
|---|---|
grid.item | { item: GridItem; index: number } |
grid.empty | {} |
grid.loading | {} |
grid.error | { error: unknown } |
Product card
| Slot | Props (plus ctx) |
|---|---|
card.product | { product: Product; index: number } |
card.image | { product: Product } |
card.badge | { product: Product } |
card.title | { product: Product } |
card.vendor | { product: Product } |
card.price | { product: Product } |
card.swatches | { product: Product } |
card.quickadd | { product: Product } |
Merchandising
| Slot | Props (plus ctx) |
|---|---|
merch.tile | { tile: CampaignTile } |
Pagination
| Slot | Props (plus ctx) |
|---|---|
pagination.loadMore | { hasMore: boolean; loading: boolean } |
pagination.pages | { page: number; pages: number } |
Logic slots (7)
Plain functions the kit calls. Return the same shape the default returns.
| Slot | Signature | What it decides |
|---|---|---|
data.buildFacets | (input: { raw: RawFacets; active: ActiveFilter[]; collection: CollectionResult; config: KitConfig; }) => Facet[] | Build the client-side facet tree from the raw API facets and the store mappings. |
data.buildQuery | (params: Record<string, string | string[]>) => QueryClause[] | Serialise URL params into the |
data.pageSize | (input: { layout: Layout; breakpoint: Breakpoint }) => number | Page size for the current layout and breakpoint. |
merch.sortOptions | (collection: CollectionResult) => SortOption[] | Which sort options to show. |
merch.placeTiles | (input: { products: Product[]; tiles: CampaignTile[]; breakpoint: Breakpoint; }) => GridItem[] | Place campaign tiles into the product page for a breakpoint. |
merch.arrange | (input: { items: GridItem[]; breakpoint: Breakpoint }) => GridItem[] | Final say over grid order for the page. Identity by default. Client-side pin/boost hook. |
merch.badges | (product: Product) => Product["meta"]["badges"] | Badges for a product. |
The ctx every UI slot receives
| Member | Type | |
|---|---|---|
ctx.slot | S | |
ctx.props | SlotProps<S> | |
ctx.state | ReadonlyState | |
ctx.actions | Actions | |
ctx.config | KitConfig | |
ctx.utils | Utils | |
ctx.render | { /** Mount another slot (default or override) into a target. Lets a card delegate its price, etc. */ slot<N extends UiSlotName>(target: HTMLElement, name: N, props: SlotProps<N>): SlotInstance<N>; } | |
ctx.emit | emit(event: KitEvent): void; | |
ctx.sdk | { version: string; major: number } |