Product list
A shop page with collections, search and sorting.
The shop and its collections
Start with GET /shop: it has the shop's name, logo and currency, whether it is open, how orders are collected, and its collections (the shop's categories with something on sale, each with a photo).
{
"name": "Ama Shop",
"logoUrl": "https://api.cashiar.app/photos/orgs/…/logo.png",
"currency": "GHS",
"enabled": true,
"closedUntil": null,
"pickup": true,
"delivery": { "fee": 1000, "zones": [{ "name": "Kasoa", "fee": 500 }] },
"payOnline": true,
"collections": [
{ "id": "0a9e1abe-…", "name": "Beverages", "imageUrl": "https://…" },
{ "id": "e57e1c05-…", "name": "Diapers", "imageUrl": null }
]
}Listing products
GET/v1/storefront/productsProp
Type
const url = new URL('https://api.cashiar.app/v1/storefront/products');
url.searchParams.set('collection', collectionId);
url.searchParams.set('sort', '-newest');
const { items, nextCursor } = await fetch(url, {
headers: { Authorization: `Bearer ${KEY}` },
}).then((res) => res.json());What to show on a card
| Field | Use it for |
|---|---|
name, imageUrl | The card's title and photo (imageUrl may be null). |
versions[0].sellingPrice | The price. When versions differ, show "From" the lowest. |
soldOut | Every version is out of stock: show Sold out and turn off Add. |
category | A small label. |
Out-of-stock products show as sold out unless the shop hides them (Settings › Online store); then they are not listed at all.
const fromPrice = (product) =>
Math.min(...product.versions.map((v) => v.sellingPrice));
const hasChoices = (product) =>
product.versions.length > 1 ||
product.versions.some((v) => v.sellingUnits.length) ||
product.addonGroups.length > 0;Send customers to a product page when hasChoices is true; otherwise Add can put the first version straight in the cart.