fields builds the sidebar controls on a section, block, or part. Each key in defineSection({ fields }) is the prop name render receives, and the same key in defaults is the starting value.
fields: {
headline: fields.text({ label: "Headline", ai: { rewrite: true } }),
},
defaults: {
headline: "Your headline",
},label is the sidebar name. ai: { rewrite: true } marks copy Lockii may rewrite. ai.description is a short hint for that rewrite.
fields.text is one line. fields.textarea is a paragraph. fields.richText is formatted copy stored as HTML and rendered with SiteRichText.
headline: fields.text({ label: "Headline", ai: { rewrite: true } }),
body: fields.textarea({ label: "Body", ai: { rewrite: true } }),
story: fields.richText({ label: "Story" }),fields.number accepts min, max, step, and unit.
fields.boolean is a toggle. Default it to true or false.
fields.select and fields.radio take { label, value } options.
limit: fields.number({ label: "How many", min: 1, max: 24 }),
showPrice: fields.boolean({ label: "Show price" }),
align: fields.select({
label: "Align",
options: [
{ label: "Left", value: "start" },
{ label: "Center", value: "center" },
],
}),fields.action edits a label and a destination. Pass it to SiteButton as action.
cta: fields.action({ label: "Button" }),cta: { type: "browse", label: "Browse gear" },Destinations:
type |
Extra fields | Where it goes |
|---|---|---|
browse |
Booking browse | |
book_product |
productId |
Checkout for that product |
product_page |
productId |
Product page |
location_page |
locationId |
Location page |
collection_page |
collectionId |
Collection page |
category_page |
categoryId |
Category page |
page |
slug, optional sectionId, pageId |
A site page, or a template when templateType is set |
account |
Customer account | |
sign_in |
Sign in | |
search |
Site search | |
cart |
Cart | |
external |
href |
Another website |
phone |
phone |
A phone link |
email |
email |
An email link |
product_picker, location_picker, collection_picker, category_picker |
A picker for that catalog |
Every action includes label.
fields.image stores { src, overlay }. src is an image id. overlay is an optional palette wash: lightest, light, accent, dark, or darkest.
photo: fields.image({ label: "Photo" }),<SiteImage
alt=""
imageId={siteImageSrc(photo)}
overlay={siteImageOverlay(photo)}
/>fields.icon picks an icon for SiteIcon. fields.themeColor picks one of the five palette colors.
fields.product, fields.location, and fields.collection pick one record. The value is that record's id. Load it with useProduct, useLocation, or useCollection.
fields.productFilter, fields.locationFilter, and fields.collectionFilter pick a set. Pass a product filter to useProducts.
const products = useProducts({
mode: "static",
ids: ["prod_123"],
limit: 6,
sort: "name",
});mode is all, collection, dynamic, related, or static. dynamic follows the collection on the open page. related is other products in the same collections as the product this page is about. sort is sortOrder, name, or price.
fields.object nests a group of fields under one prop. fields.list is a repeatable list. summaryField is the item key shown when a row is collapsed. defaultItemProps fills a new row.
items: fields.list(
{
title: fields.text({ label: "Title", ai: { rewrite: true } }),
body: fields.textarea({ label: "Body", ai: { rewrite: true } }),
},
{ label: "Items", summaryField: "title" }
),defaults: {
items: [{ title: "Delivery", body: "We bring it to you." }],
},fields.slot is a region that holds nested blocks. allow is the list of block ids the picker offers. Page sections usually keep copy in flat fields. Use a slot when the merchant should drop blocks inside the section.
content: fields.slot({ label: "Content" }),