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) |
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 |
Data attributes
You can target and override
ShippingSimulation
styles using 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
Props
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. |