<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

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