Hooks from @lockii/site-sdk read the company catalog, the open page, and the visitor's browse session. Call them inside render. They already run in the site providers.
useProducts(filter) returns SiteProduct[].
const products = useProducts({
limit: 6,
mode: "all",
sort: "sortOrder",
availableOnly: true,
});| Filter | Meaning |
|---|---|
mode: "all" |
Every product |
mode: "collection" |
Products in collectionId |
mode: "dynamic" |
The collection on this page |
mode: "related" |
Other products sharing collections with this page's product |
mode: "static" |
The ids in ids |
sort |
sortOrder, name, or price |
limit |
Maximum rows |
availableOnly |
Drop products that cannot be booked |
categoryId |
One category |
locationId |
One location. The open location page and the visitor's selected location also apply. |
useProduct(id) returns one product, or null. useProductAvailability(productId) returns the availability for the visitor's dates and location.
Each product has:
| Field | Meaning |
|---|---|
id, name, description |
Catalog identity |
href, bookHref |
Product page and booking link |
imageUrl, imageUrls |
Cover and gallery |
priceLabel |
Display price, including a From prefix when the catalog uses one |
priceAmountLabel |
Amount only, such as $49.00 |
priceSubtitle |
Period hint, such as per hour |
priceInCents |
Amount in cents, or null |
category, categoryId |
Category name and id |
locationIds |
Locations that stock it |
availability |
{ kind, label, units } |
availability.kind is unknown, stocked, available, limited, or unavailable. label is the text to show. siteAvailabilityBookable(availability) is true when the kind can be booked.
useLocations() and useLocation(id) return locations. A location has id, name, address, hoursLabel, href, bookHref, lat, lng, and sometimes availableProductCount.
useCollections() and useCollection(id) return collections. A collection has id, title, description, href, imageUrl, productIds, and sometimes productCount.
useCategories() and useCategory(id) return categories with id, name, href, and sometimes productCount.
useSite() is the company, theme, nav, and page.
const site = useSite();
site.company.name;
site.page.type;
site.page.slug;site.mode is edit, preview, or live. site.company includes name, currency, logoUrl, contactEmail, and contactPhone.
usePageEntity() is the product, location, collection, or post the template page is about. useCardProduct() is only available inside a product.card part. On a product template, take the id from usePageEntity() and pass it to useProduct.
useSiteOptional() returns the same value, or null when there is no site provider.
useSiteBrowse() is the visitor's cart, hire dates, and selected location.
const browse = useSiteBrowse();
browse.dateRange.from;
browse.dateRange.to;
browse.locationId;
browse.cart;locationId is "all" or a location id. useSiteBrowseOptional() returns null outside a browse provider.
Inside a product.card part, useCardProduct() is the product that card is rendering.
const product = useCardProduct();