Skip to main content

<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

OptionTypeDescription
tileSizeTileSize (default={row: 1, column: 1})tile size
imagestring (required)PromoTile image
urlstring (required)PromoTile url
isSPAstring (default=true)true will will wrap it with a element, false will wrap it with a div element
altstringPagination "next" text
textstringMax pages to show
customClassesCustomClassesCustom classes for the pagination elements
onClick() => voidtile clicked callback

Types

interface TileSize {
column: number,
row: number
}

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