Product listing

Frontastic component name

Product listing

Suggested page placement

Dynamic category page
Static category page

Example images

Code samples

{
  "tasticType": "frontastic/ui/products/product-list",
  "name": "Frontastic UI product list",
  "icon": "list",
  "category": "Products",
  "schema": [
    {
      "name": "Configuration",
      "fields": [
        {
          "label": "products",
          "field": "data",
          "type": "dataSource",
          "dataSourceType": "frontastic/product-list",
          "required": true
        }
      ]
    }
  ]
}
import ProductList from 'components/frontastic-ui/products/product-list';

function ProductListTastic({ data }) {
  if (!data) return <></>;

  const { category, nextCursor, previousCursor } = data;

  const products = data.data.dataSource.items || data.items || data.products;

  if (!products || products.length == 0) return <p>No products found.</p>;

  return (
    <ProductList products={products} category={category} previousCursor={previousCursor} nextCursor={nextCursor} />
  );
}

export default ProductListTastic;

Did this page help you?