<FastProduct/>

A product item component

tip

Not using this component will require reporting clicks on your own. Example for this can be found at the

example.

Example

MyProduct.jsx

import {FastProduct} from "fast-component-library";

const MyProduct = ({product}) => {
    const onClick = () => {
        console.log("cool product clicked :)");
    }

    return (
        <FastProduct label={product.l} id={product.id} price={product.p} comparePrice={product.p_c} image={product.t || product.t2} url={product.u}
                     onClick={onClick} currency={product.c} index={12} variants={product.vra}/>
    )
}

export default MyProduct;

index.tsx

import {Results, ProductGrid,FastSimonApi,SearchBox} from "fast-component-library";
import React from "react";
import MyProduct from "../components"

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} renderProduct={product => <MyProduct product={product} key={product.id}/>}/>
            </Results>
        </FastSimonApi>
    )
}

Props

Option	Type	Description
label	string (required)	Product card title
id	string (required)	Product card id
price	string (required)	Product card price
image	string (required)	Product card image
url	string (required)	Product card url
comparePrice	string	Product card compare at price
variants	Variant[]	Product variants needed for
addToCart	boolean (default=true)	Enable / disable add to cart
onAddToCart	onAddToCart?: (id: string) => void	On clicked
cartStatus	CartStatus	cart status to animate a cart submission
badges	BadgeProps[]	A list of badges to display on the product card
currency	Currency	Product card currency
onClick	((id: string, url: string) => void	On product click (redirect on click happens automatically)
index	number	Product card position
score	number	Product card score
maxScore	number (default=100)	Product card max score
reviewCount	number	Product card max reviews
swatchType	SwatchType (default=SwatchType.Image)	Product card swatch type
customClasses	CustomClasses	object of custom classes for every inner component
redirectType	RedirectType	single-page - will use to url, multi page will redirect to url directly
description	string	product description
onSwatchClicked	(variantID: string) => void	Swatch clicked callback
toFix	number	format price .xx toFix()

Types

interface CustomClasses {
    card?: string
    info?: string
    addToCart?: string

    image?: string
    imageWrapper?: string

    title?: string
    titleWrapper?: string

    price?: string
    compare?: string
    priceWrapper?: string

    swatch?: string
    swatchWrapper?: string
    swatchMore?: string

    reviewCount?: string,
    reviewWrapper?: string
    reviewStar?: string

    description?: string
}