Documentation
Feedback
Guides
Storefront Development

Storefront Development
Shipping Simulation

Shipping Simulation are sliders that allows users to select a maximum and minimum price.

This 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

_10
import '@faststore/ui/src/components/organisms/ShippingSimulation/styles.scss'


Usage

Example
Code

Shipping

I don't know my Postal Code

Props

Shipping Simulation

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.

Shipping SLA

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