Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsOrganisms
ShippingSimulation

Sliders that allows users to select a maximum and minimum price.

The ShippingSimulation component lets customers set the PostalCode and see the shipping options in the PDP.

Import

Import the component from @faststore/ui

_10
import { ShippingSimulation } 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/organisms/ShippingSimulation/styles.scss';

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

Usage

Example
Code

Shipping

I don't know my Postal Code

Props

ShippingSimulation

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-shipping-simulation
formatter*PriceFormatterFormatter function that transforms the raw price value and render the result.
titlestringThe Shipping Suggestions Section's title.Shipping
inputLabelstringThe text displayed to Shipping Simulation input text.Postal Code
optionsLabelstringThe text displayed in Shipping options table.Shipping options
idkPostalCodeLinkPropsPartial<LinkProps<LinkElementType>>Props for the link `I don't know my Postal Code`.
onInput(event: React.FormEvent<HTMLInputElement>) => voidCallback function when input is typed.
onSubmit() => voidCallback function when form is submitted.
onClear() => voidCallback function when the input clear button is clicked.
locationstringLocation for shipping.
addressAddressAddress for shipping.
optionsShippingSLA[]Options for shipping simulation.[]
displayClearButtonfalse | trueShow clear button.false
errorMessagestringMessage of error for input.
postalCodestringPostal code.

ShippingSLA

NameTypeDescriptionDefault
carrier*stringShippingSLA carrier.
localizedEstimates*stringShippingSLA localized shipping estimate.
price*numberShippingSLA price.

Design Tokens

Local tokenDefault value/Global token linked
--fs-shipping-simulation-text-sizevar(--fs-text-size-legend)

Nested Elements

Title

Local tokenDefault value/Global token linked
--fs-shipping-simulation-title-padding-bottomvar(--fs-spacing-2)
--fs-shipping-simulation-title-font-sizevar(--fs-text-size-3)
--fs-shipping-simulation-title-font-weightvar(--fs-text-weight-bold)
--fs-shipping-simulation-title-line-height1.2

Link

Local tokenDefault value/Global token linked
--fs-shipping-simulation-link-padding-topvar(--fs-spacing-1)

Header

Local tokenDefault value/Global token linked
--fs-shipping-simulation-header-padding-topvar(--fs-spacing-3)

Subtitle

Local tokenDefault value/Global token linked
--fs-shipping-simulation-subtitle-sizevar(--fs-text-size-2)
--fs-shipping-simulation-subtitle-weightvar(--fs-text-weight-bold)
--fs-shipping-simulation-subtitle-line-height1.5

Location

Local tokenDefault value/Global token linked
--fs-shipping-simulation-location-padding-bottomvar(--fs-spacing-2)
--fs-shipping-simulation-location-font-sizevar(--fs-text-size-2)
--fs-shipping-simulation-location-line-height1.5

Customization

For further customization, you can use the following data attributes:
data-fs-shipping-simulation
data-fs-shipping-simulation-title
data-fs-shipping-simulation-link
data-fs-shipping-simulation-header
data-fs-shipping-simulation-subtitle
data-fs-shipping-simulation-location
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page