Search Products

List of SearchProductItem to show details of the suggested products. This component is part of the Search feature.

Import

Import the component from @faststore/ui

import {
  SearchProducts,
  SearchProductItem,
  SearchProductItemImage,
  SearchProductItemContent,
} from '@faststore/ui'

Import Styles

import '@faststore/ui/src/components/molecules/SearchProducts/styles.scss'

Usage

Props

All search product related components support all attributes also supported by their respective HTML tags. Besides those attributes, the following props are also supported:

Search Products

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-search-products`
title	`string`	Title attribute for the <section> tag rendered by this component.	`Suggested Products`

Search Product Item

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).	`fs-search-product-item`
linkProps	`Partial<LinkProps<LinkElementType>>`	Props for the link from SearchProduct component.

Search Product Item Image

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-search-product-item-image`

Search Product Item Content

Name	Type	Description	Default
title*	`string`	Specifies the product's title.
price*	`PriceDefinition`	Specifies product's prices.

Price Definition

Name	Type	Description
value	`number`	The raw price value.
listPrice	`number`	Product's list price
formatter	`PriceFormatter`	(price: number, variant: PriceVariant) => ReactNode

Design Tokens

Local token	Default value/Global token linked
`--fs-search-products-padding-top`	`var(--fs-spacing-2)`
`--fs-search-products-padding-right`	`var(--fs-spacing-3)`
`--fs-search-products-padding-bottom`	`var(--fs-search-products-padding-top)`
`--fs-search-products-padding-left`	`var(--fs-search-products-padding-right)`

`--fs-search-products-transition-property`	`var(--fs-transition-property)`
`--fs-search-products-transition-function`	`var(--fs-transition-function)`
`--fs-search-products-transition-timing`	`var(--fs-transition-timing)`

Nested Elements

Header

Local token	Default value/Global token linked
`--fs-search-products-header-padding-top`	`var(--fs-spacing-1)`
`--fs-search-products-header-padding-bottom`	`var(--fs-search-products-header-padding-top)`

Title

Local token	Default value/Global token linked
`--fs-search-products-title-size`	`var(--fs-text-size-lead)`
`--fs-search-products-title-line-height`	`1.5`

Item

Local token	Default value/Global token linked
`--fs-search-product-item-padding-top`	`var(--fs-spacing-1)`
`--fs-search-product-item-padding-right`	`var(--fs-search-product-item-padding-top)`
`--fs-search-product-item-bkg-color-hover`	`var(--fs-color-tertiary-bkg-hover)`

Item Image

Local token	Default value/Global token linked
`--fs-search-product-item-image-border-radius`	`var(--fs-border-radius)`
`--fs-search-product-item-image-margin-right`	`var(--fs-spacing-3)`
`--fs-search-product-item-image-size`	`3.5rem`

Item Title

Local token	Default value/Global token linked
`--fs-search-product-item-title-margin-bottom`	`var(--fs-spacing-0)`
`--fs-search-product-item-title-size`	`var(--fs-text-size-2)`
`--fs-search-product-item-title-line-height`	`1.2`
`--fs-search-product-item-title-color`	`var(--fs-color-text)`

Item Price

Local token	Default value/Global token linked
`--fs-search-product-item-price-gap`	`var(--fs-spacing-1)`
`--fs-search-product-item-price-size`	`var(--fs-text-size-base)`

Customization

For further customization, you can use the following data attributes:

data-fs-search-products

data-fs-search-products-header

data-fs-search-products-title

data-fs-search-product-item

data-fs-search-product-item-link

data-fs-search-product-item-image

data-fs-search-product-item-content

Search Input Field Search Top