<Swatches/>

A component includes color swatches or image swatches bases ob the product variants

Example

MyProduct.jsx

import {
    ProductCard, ProductImage,ProductInfo,Swatches
} from "fast-component-library/FastProduct";

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

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

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

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

    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"}>
            </ProductImage>
            <ProductInfo className={"product-info"}>
                <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"
                                                    }}/>
            </ProductInfo>
        </ProductCard>
    )
}

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
type	SwatchType (required)	Image based swatches or color based swatches
variants	Variant[] (required)	Product variants
selectedVariantID	string	to highlight the selected swatch
count	number (default=5)	Max swatches to display
colorVariantName	string (default=Color)	Swatch variant name, usually its Color
showSoldOut	boolean (default=true)	Enable showing out of stock options
customClasses	CustomClasses	Custom classes for the swatches elements
onclick	(variantID: string) => void	on swatch clicked callback

Types

import React from "react"

export enum SwatchType {
    Image = "image",
    Color = "color"
}

interface CustomClasses {
    wrapper?: string
    swatch?: string
    more?: string
}