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


_10import { ShippingSimulation } from '@faststore/ui'

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.

Example

Code

Postal Code

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).	`fs-shipping-simulation`
formatter*	`PriceFormatter`	Formatter function that transforms the raw price value and render the result.
title	`string`	The Shipping Suggestions Section's title.	`Shipping`
inputLabel	`string`	The text displayed to Shipping Simulation input text.	`Postal Code`
optionsLabel	`string`	The text displayed in Shipping options table.	`Shipping options`
idkPostalCodeLinkProps	`Partial<LinkProps<LinkElementType>>`	Props for the link `I don't know my Postal Code`.
onInput	`(event: React.FormEvent<HTMLInputElement>) => void`	Callback function when input is typed.
onSubmit	`() => void`	Callback function when form is submitted.
onClear	`() => void`	Callback function when the input clear button is clicked.
location	`string`	Location for shipping.
address	`Address`	Address for shipping.
options	`ShippingSLA[]`	Options for shipping simulation.	`[]`
displayClearButton	`false \| true`	Show clear button.	`false`
errorMessage	`string`	Message of error for input.
postalCode	`string`	Postal code.

Name	Type	Default
carrier*	`string`	`ShippingSLA carrier.`
localizedEstimates*	`string`	`ShippingSLA localized shipping estimate.`
price*	`number`	`ShippingSLA price.`

Local token	Default value/Global token linked
`--fs-shipping-simulation-text-size`	`var(--fs-text-size-legend)`

Local token	Default value/Global token linked
`--fs-shipping-simulation-title-padding-bottom`	`var(--fs-spacing-2)`
`--fs-shipping-simulation-title-font-size`	`var(--fs-text-size-3)`
`--fs-shipping-simulation-title-font-weight`	`var(--fs-text-weight-bold)`
`--fs-shipping-simulation-title-line-height`	`1.2`

Local token	Default value/Global token linked
`--fs-shipping-simulation-link-padding-top`	`var(--fs-spacing-1)`

Local token	Default value/Global token linked
`--fs-shipping-simulation-header-padding-top`	`var(--fs-spacing-3)`

Local token	Default value/Global token linked
`--fs-shipping-simulation-subtitle-size`	`var(--fs-text-size-2)`
`--fs-shipping-simulation-subtitle-weight`	`var(--fs-text-weight-bold)`
`--fs-shipping-simulation-subtitle-line-height`	`1.5`

Local token	Default value/Global token linked
`--fs-shipping-simulation-location-padding-bottom`	`var(--fs-spacing-2)`
`--fs-shipping-simulation-location-font-size`	`var(--fs-text-size-2)`
`--fs-shipping-simulation-location-line-height`	`1.5`

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