Skip to main content

<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

OptionTypeDescription
breakPointsBreakPoints (default=defaultBreakpoint)On product click (redirect on click happens automatically)
onClick((id: string, url: string) => voidOn product click (redirect on click happens automatically)
badgesBadgeProps[]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)
addToCartaddToCart: boolean (default=true)Show add to cart on all products
onAddToCart(product: Product)) => voidOn AddToCart clicked
cartStatusCartStatuscart status to animate a cart submission
classNamestringCustom class for the root grid element
reviewsboolean (default=true)Display review on product card
renderProduct(product: Product, pos: number) => React.ReactNodeRender your own product
loaderReact.ReactNode (default=
)
Choose a custom loader for the grid
redirectTypeRedirectTypesingle-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

  1. SearchBox
  2. Results
  3. AddToCart
  4. Badges