<SubComponets/>

We created some subcomponents to make the creation of custom product tiles as easy as possible!

• Badge: A component that represent the text based badge
• Badges: A component that represent a list of text based badges
• ProductCard: A component that wraps the product subcomponents and provides the product tile base structure
• ProductImage: A component that represent the product image element
• ProductInfo: A wrapper for the product info
• ProductPrice: A component that represent the product price element
• ProductTitle: A component that represent the product Title element
• Rating: A component that represent the product rating using stars
• ProductDescription: A component that represents the product description

Example

MyProduct.jsx

import {
    ProductCard, ProductImage, Badges,ProductInfo,
    ProductTitle,ProductPrice,Swatches, Rating, ProductDescription
} from "fast-component-library/FastProduct";

import {ReportType,useFastState,AddToCart, swatchType} from "fast-component-library";

import {FastSimonSDK} from "fast-simon-sdk";

const MyProduct = ({product}) => {
    const {query} = useFastState();

    const getBadges = () => {
        let badges = [];

        if(product.p_c){
            badges.push( {
                className:"sale", title:"On Sale", textColor:"white", bgColor:"red"
            });
        }

        if(product.vra && product.vra.length > 0 ){
            badges.push( {
                className:"more", title:"Options Available", textColor:"white", bgColor:"blue"
            });
        }

        return badges;
    }

    const clickHandler = () => {
        FastSimonSDK.event({
            eventName: ReportType.Search,
            data: {
                query,
                productID: id,
                position: index ? index + 1 : undefined,
                imageID,
            }
        });
    }

    const addToCartClicked = () => {
        // add to cart here
    }

    return (
        <ProductCard className={"product-card"} data-id={product.id}>
            <ProductImage alt={product.l} src={product.t1 || product.t2} url={product.u} redirectType={"single-page"} onClick={clickHandler} className={"product-image"}
                          wrapperClass={"product-image-wrapper"}>
                <Badges badges={getBadges()}/>
            </ProductImage>
            <ProductInfo className={"product-info"}>
                <ProductTitle label={product.l} url={product.u} redirectType={"single-page"} onClick={clickHandler} className={"product-title"}
                              wrapperClass={"product-title-wrapper"}/>
                <ProductDescription description={product.d} className={"product-description-wrapper"}/>
                <ProductPrice price={product.p} comparePrice={product.p_c} currency={product.c}
                              customClasses={{price: "product-price", compare: "product-compare-price", wrapper: "product-price-wrapper"}}/>
                <Swatches variants={product.vra} type={swatchType.Image} selectedVariantID={product.vra && product.vra.length > 0 && product.vra[0][0]}
                                                    customClasses={{
                                                        swatch: "product-single-swatch",
                                                        wrapper: "product-swatches-wrapper",
                                                        more: "product-more-swatches"
                                                    }}/>
               <Rating score={product.review_score} id={product.id} reviewCount={product.review_count}
                                                     customClasses={{
                                                         count: "product-review-count",
                                                         wrapper: "product-review-wrapper",
                                                         star: "product-review-start"
                                                     }}/>
            </ProductInfo>
            <AddToCart onAdd={addToCartClicked} className={"add to cart"} status={""}/>
        </ProductCard>
    )
}

export default MyProduct;

index.jsx

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

export const App = () => {
    return (
        <FastSimonApi storeID={1} uuid={"rand-omuu-id12-3456"}>
             <header>
                Search: <SearchBox/>
            </header>

            <Results>
                <ProductGrid renderProduct={product => <MyProduct product={product} key={product.id}/>}/>
            </Results>
        </FastSimonApi>
    )
}

Props

Badge

Option	Type	Description
title	string (required)	Badge title
bgColor	string (required)	Badge background color
textColor	string (required)	Badge text color
bold	boolean (default=true)	Apply cold text to badge
className	string	Custom class for the badge

Badges

Option	Type	Description
badges	BadgesProps	A list of badges
className	string	Badge wrapper custom class

ProductCard

Option	Type	Description
All div base props	All div base props	All div base props

ProductImage

Option	Type	Description
All img base props	All img base props	All img base props
src	string (required)	Image url
alt	string (required)	Image title
fallbackImage	string	In case the img fails to load
wrapperClass	string	Image wrapper class
redirectType	RedirectType	single-page - will use to url, multi page will redirect to url directly

ProductInfo

Option	Type	Description
All div base props	All div base props	All div base props

ProductPrice

Option	Type	Description
price	string (required)	Product Price
comparePrice	string	Product Compare at Price
currency	Currency (default="USD")	Product currency
customClasses	PriceCustomClasses	Custom Classes for the elements

ProductTitle

Option	Type	Description
label	string (required)	Product title
highlightQuery	boolean (default=true)	Highlight the query inside the product
redirectType	RedirectType	single-page - will use to url, multi page will redirect to url directly
url	string (required)	Product URL
wrapperClass	string	Product title wrapper class

Rating

Option	Type	Description
score	number (required)	Product rating score
maxScore	number (default=100)	Product max score (usually 100)
id	string (required)	Product id is used for the SVG to fill the stars
title	string (default=#ffb400)	title top show on hover
color	string (required)	color of the starts
reviewCount	number	Product title wrapper class
customClasses	RatingCustomClasses	Custom Classes for the elements

ProductDescription

Option	Type	Description
description	string (required)	Product description
highlightQuery	boolean (default=true)	Highlight the query inside the product
all div props	all div props	all div props

Types

interface PriceCustomClasses {
    wrapper?: string
    price?: string
    compare?: string
}

interface RatingCustomClasses {
    wrapper?: string
    star?: string
    count?: string
}