Product Browsing
Browse product listings, filter by category/brand, product detail with variants/options
Product Browsing
Product registration, category/brand/shipping policy creation is done in the Console. This guide covers querying product data with the SDK.
Product Listing
const { docs: products } = await client.from('products').find({
where: { status: { equals: 'published' } },
sort: '-createdAt',
limit: 20
})Filter by Category
Categories support hierarchical structure (parent field).
// Top-level categories
const { docs: categories } = await client.from('product-categories').find({
where: { parent: { exists: false } }
})
// Products in a category
const { docs } = await client.from('products').find({
where: {
status: { equals: 'published' },
categories: { contains: categoryId }
}
})
// Subcategories
const { docs: children } = await client.from('product-categories').find({
where: { parent: { equals: parentCategoryId } }
})Filter by Brand
// Brand list
const { docs: brands } = await client.from('brands').find()
// Products by brand
const { docs } = await client.from('products').find({
where: {
status: { equals: 'published' },
brand: { equals: brandId }
}
})Product Detail
Use depth: 1 to populate relationship fields (categories, brand, images) in one query.
const product = await client.from('products').findById(productId, {
depth: 1
})
// product.categories → [{id, title}, ...]
// product.brand → {id, name, logo}
// product.shippingPolicy → {id, title, baseFee, freeShippingThreshold}Variants & Options
Build size/color selection UI for the product detail page.
Product (Premium T-Shirt)
├── Variant (Black)
│ ├── Option (S) - stock: 10, price: 39000
│ ├── Option (M) - stock: 25, price: 39000
│ └── Option (L) - stock: 15, price: 42000
└── Variant (White)
├── Option (S) - stock: 8, price: 39000
└── Option (M) - stock: 20, price: 39000// Variants for a product
const { docs: variants } = await client.from('product-variants').find({
where: { product: { equals: productId } }
})
// Options for a selected variant (with stock check)
const { docs: options } = await client.from('product-options').find({
where: {
product: { equals: productId },
variant: { equals: variantId }
}
})
// Filter available options
const available = options.filter(o => o.stock - (o.reservedStock ?? 0) > 0)Product Images
const { docs: images } = await client.from('product-images').find({
where: { product: { equals: productId } },
sort: 'createdAt'
})Filter by Tag
const { docs } = await client.from('products').find({
where: {
status: { equals: 'published' },
tags: { contains: tagId }
}
})Search & Sort
// Sort by price
const { docs } = await client.from('products').find({
where: { status: { equals: 'published' } },
sort: 'price' // ascending
})
// Price range filter
const { docs } = await client.from('products').find({
where: {
status: { equals: 'published' },
price: { greater_than_equal: 10000, less_than_equal: 50000 }
}
})Collection Reference
For detailed field specifications, see Product Collections.