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.Example
Code
Shipping
I don't know my Postal CodeUsage
Import the component
_10import { ShippingSimulation } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/organisms/ShippingSimulation/styles.scss";
For details, see Importing FastStore UI component styles.
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-shipping-simulation-text-size | var(--fs-text-size-legend) |
Title
| 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 |
Link
| Local token | Default value/Global token linked |
|---|---|
--fs-shipping-simulation-link-padding-top | var(--fs-spacing-1) |
Header
| Local token | Default value/Global token linked |
|---|---|
--fs-shipping-simulation-header-padding-top | var(--fs-spacing-3) |
Subtitle
| 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 |
Location
| 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 |
Data attributes
You can target and override
ShippingSimulation styles using the following data attributes:data-fs-shipping-simulationdata-fs-shipping-simulation-titledata-fs-shipping-simulation-linkdata-fs-shipping-simulation-headerdata-fs-shipping-simulation-subtitledata-fs-shipping-simulation-locationProps
ShippingSimulation
| 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. |
ShippingSLA
| Name | Type | Description | Default |
|---|---|---|---|
| carrier* | string | ShippingSLA carrier. | |
| localizedEstimates* | string | ShippingSLA localized shipping estimate. | |
| price* | number | ShippingSLA price. |