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;
Updated 3 months ago
Did this page help you?