List of
SearchProductItem to show details of the suggested products. This component is part of the
Search feature.
Import
_10 SearchProductItemImage,
_10 SearchProductItemContent,
_10} from '@faststore/ui'
Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
_10@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:
SearchProducts
| 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 |
SearchProductItem
| 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. | |
SearchProductItemImage
| 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 |
SearchProductItemContent
| Name | Type | Description | Default |
|---|
| title* | string | Specifies the product's title. | |
| price* | PriceDefinition | Specifies product's prices. | |
Other Resources
PriceDefinition
| Name | Type | Description | Default |
|---|
| 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
