Shipping Simulation
This component lets customers set the PostalCode and see the shipping options in the PDP.
Import
Import the component from @faststore/ui
import { ShippingSimulation } from '@faststore/ui'Import Styles
import '@faststore/ui/src/components/organisms/ShippingSimulation/styles.scss'Usage
Props
| 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. | |
| 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. |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-shipping-simulation-text-size | var(--fs-text-size-legend) |
Nested Elements
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 |
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