Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development
SearchProducts

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.
Example
Code

Usage

Import the component


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

Import styles

To apply styles, include the following in your stylesheet:

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


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 control

Local tokenDefault value/Global token linked
--fs-search-product-item-control-actions-gapvar(--fs-spacing-1)
--fs-search-product-item-control-input-width4.625rem

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)

Data attributes

You can target and override SearchProducts styles using 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

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

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

SearchProductItem

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.

SearchProductItemImage

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

SearchProductItemContent

NameTypeDescriptionDefault
title*stringSpecifies the product's title.
price*PriceDefinitionSpecifies product's prices.
quickOrder{ enabled: boolean; outOfStockLabel: string; availability: boolean; hasVariants: boolean; skuMatrixControl: React.ReactNode; quantity: number; min?: number; max?: number; onChangeQuantity(value: number): void; buyProps?: { ...; }; }Quick order settings.
onValidateBlur(min: number, maxValue: number, quantity: number) => voidEvent emitted when value is out of the min and max bounds

Other Resources

PriceDefinition

NameTypeDescriptionDefault
valuenumberThe raw price value.
listPricenumberProduct's list price
formatterPriceFormatter(price: number, variant: PriceVariant) => ReactNode
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
On this page