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
.Import
Import the component from @faststore/ui
_10import { ShippingSimulation } from '@faststore/ui'
Import Styles into your FastStore project
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.
Usage
Example
Code
Shipping
I don't know my Postal CodeProps
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. |
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