Product listing

{
  "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;