⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

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 into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.


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

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-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