Documentation
Feedback
Guides
Storefront Development

Storefront Development
Search Products

List of SearchProductItem to show details of the suggested 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

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

Import Styles

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


Usage

Example
Code

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

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-search-products
titlestringTitle attribute for the <section> tag rendered by this component.Suggested Products

Search Product Item

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-search-product-item
linkPropsPartial<LinkProps<LinkElementType>>Props for the link from SearchProduct component.

Search Product Item Image

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-search-product-item-image

Search Product Item Content

NameTypeDescriptionDefault
title*stringSpecifies the product's title.
price*PriceDefinitionSpecifies product's prices.

Other Resources

PriceDefinition

NameTypeDescriptionDefault
valuenumberThe raw price value.
listPricenumberProduct's list price
formatterPriceFormatter(price: number, variant: PriceVariant) => ReactNode

Design Tokens

Local tokenDefault value/Global token linked
--fs-search-products-padding-topvar(--fs-spacing-2)
--fs-search-products-padding-rightvar(--fs-spacing-3)
--fs-search-products-padding-bottomvar(--fs-search-products-padding-top)
--fs-search-products-padding-leftvar(--fs-search-products-padding-right)
--fs-search-products-transition-propertyvar(--fs-transition-property)
--fs-search-products-transition-functionvar(--fs-transition-function)
--fs-search-products-transition-timingvar(--fs-transition-timing)

Nested Elements

Header

Local tokenDefault value/Global token linked
--fs-search-products-header-padding-topvar(--fs-spacing-1)
--fs-search-products-header-padding-bottomvar(--fs-search-products-header-padding-top)

Title

Local tokenDefault value/Global token linked
--fs-search-products-title-sizevar(--fs-text-size-lead)
--fs-search-products-title-line-height1.5

Item

Local tokenDefault value/Global token linked
--fs-search-product-item-padding-topvar(--fs-spacing-1)
--fs-search-product-item-padding-rightvar(--fs-search-product-item-padding-top)
--fs-search-product-item-bkg-color-hover
var(--fs-color-tertiary-bkg-hover)

Item Image

Local tokenDefault value/Global token linked
--fs-search-product-item-image-border-radiusvar(--fs-border-radius)
--fs-search-product-item-image-margin-rightvar(--fs-spacing-3)
--fs-search-product-item-image-size3.5rem

Item Title

Local tokenDefault value/Global token linked
--fs-search-product-item-title-margin-bottomvar(--fs-spacing-0)
--fs-search-product-item-title-sizevar(--fs-text-size-2)
--fs-search-product-item-title-line-height1.2
--fs-search-product-item-title-color
var(--fs-color-text)

Item Price

Local tokenDefault value/Global token linked
--fs-search-product-item-price-gapvar(--fs-spacing-1)
--fs-search-product-item-price-sizevar(--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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page