Product listing
The Product listing component can be used on a dynamic and static category page.
Example image
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 (<ProductListproducts={items}totalProducts={totalItems}facets={facets}category={category}previousCursor={previousCursor}nextCursor={nextCursor}/>);}export default ProductListTastic;