Product listing

The Product listing component can be used on a dynamic and static category page.

Example image

product-list.png

Code samples

{
"tasticType": "commercetools/ui/products/product-list",
"name": "commercetools UI product list",
"icon": "list",
"category": "Products",
"schema": [
{
"name": "Basic Options",
"fields": [
{
"label": "Show Pagination",
"field": "showPagination",
"type": "boolean",
"default": true
},
{
"label": "Products Per Page",
"field": "perPage",
"type": "number",
"default": 24
},
{
"type": "description",
"text": "We strongly advise to set this to a number divisible by 4 so that all rows are always complete"
}
]
},
{
"name": "Configuration",
"fields": [
{
"label": "products",
"field": "data",
"type": "dataSource",
"dataSourceType": "frontastic/product-list",
"required": true
}
]
}
]
}
import ProductList from 'components/commercetools-ui/products/product-list';
function ProductListTastic({ data }) {
if (!data) return <></>;
const { items, facets, category, previousCursor, nextCursor, totalItems } =
data.data.dataSource;
return (
<ProductList
products={items}
totalProducts={totalItems}
facets={facets}
category={category}
previousCursor={previousCursor}
nextCursor={nextCursor}
/>
);
}
export default ProductListTastic;