<ProductGrid/>
A component that represent the product grid
Example
index.tsx
import {Results, ProductGrid,FastSimonApi,SearchBox} from "fast-component-library";
import React from "react";
export const App = () => {
const onClick = (id) => {
console.log(`product clicked: ${id}`);
}
return (
<FastSimonApi storeID={1} uuid={"rand-omuu-id12-3456"}>
<header>
Search: <SearchBox/>
</header>
<Results>
<ProductGrid onClick={onClick}/>
</Results>
</FastSimonApi>
)
}
Props
Option | Type | Description |
---|---|---|
breakPoints | BreakPoints (default=defaultBreakpoint) | On product click (redirect on click happens automatically) |
onClick | ((id: string, url: string) => void | On product click (redirect on click happens automatically) |
badges | BadgeProps[] | A list of badges to display on all products |
getBadges | (product: Product) => BadgeProps[] | Render badge for a specific product (undefined will revert to default badges) |
addToCart | addToCart: boolean (default=true) | Show add to cart on all products |
onAddToCart | (product: Product)) => void | On AddToCart clicked |
cartStatus | CartStatus | cart status to animate a cart submission |
className | string | Custom class for the root grid element |
reviews | boolean (default=true) | Display review on product card |
renderProduct | (product: Product, pos: number) => React.ReactNode | Render your own product |
loader | React.ReactNode (default=) | Choose a custom loader for the grid |
redirectType | RedirectType | single-page - will use to url, multi page will redirect to url directly |
Types / defaults
interface BreakPoints {
[key: string]: number
}
const defaultBreakpoint: BreakPoints = {
"(min-width: 1024px)": 4,
"(max-width: 1024px)": 3,
"(max-width: 748px)": 2,
}
References
- SearchBox
- Results
- AddToCart
- Badges