<PromoTile/>

A component for a promoTile to be included in the products

Example

MyProduct.jsx

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

const MyProduct = ({product}) => {
    const isPromoTile = () => {
        if(!product.att){
            return undefined;
        }

        const tags =product.att.find(attribute => attribute[0] === "Tags")

        return tags && tags.includes("phantom");
    }

    if(isPromoTile()){
        return <PromoTile image={product.t || product.t2} url={product.d} text={product.l} key={product.id} isSPA={false} />
    }

    return undefined;
}

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"} promoTile={true}>
             <header>
                Search: <SearchBox/>
            </header>

            <Results>
                <ProductGrid onClick={onClick} renderProduct={product => <MyProduct product={product}/>}/>
            </Results>
        </FastSimonApi>
    )
}

Props

Option	Type	Description
tileSize	TileSize (default={row: 1, column: 1})	tile size
image	string (required)	PromoTile image
url	string (required)	PromoTile url
isSPA	string (default=true)	true will will wrap it with a element, false will wrap it with a div element
alt	string	Pagination "next" text
text	string	Max pages to show
customClasses	CustomClasses	Custom classes for the pagination elements
onClick	() => void	tile clicked callback

Types

interface TileSize {
    column: number,
    row: number
}

interface CustomClasses{
    card?: string
    imageWrapper?: string
    text?: string
}