⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

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 into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

@import '@faststore/ui/src/components/organisms/ShippingSimulation/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.


Usage


Props

Shipping Simulation

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-shipping-simulation
formatter*PriceFormatterFormatter function that transforms the raw price value and render the result.
titlestringThe Shipping Suggestions Section's title.Shipping
inputLabelstringThe text displayed to Shipping Simulation input text.Postal Code
optionsLabelstringThe text displayed in Shipping options table.Shipping options
idkPostalCodeLinkPropsPartial<LinkProps<LinkElementType>>Props for the link `I don't know my Postal Code`.
onInput(event: React.FormEvent<HTMLInputElement>) => voidCallback function when input is typed.
onSubmit() => voidCallback function when form is submitted.
onClear() => voidCallback function when the input clear button is clicked.
locationstringLocation for shipping.
addressAddressAddress for shipping.
optionsShippingSLA[]Options for shipping simulation.[]
displayClearButtonfalse | trueShow clear button.false
errorMessagestringMessage of error for input.
postalCodestringPostal code.

Shipping SLA

NameTypeDescriptionDefault
carrier*stringShippingSLA carrier.
localizedEstimates*stringShippingSLA localized shipping estimate.
price*numberShippingSLA price.

Design Tokens

Local tokenDefault value/Global token linked
--fs-shipping-simulation-text-sizevar(--fs-text-size-legend)

Nested Elements

Title

Local tokenDefault value/Global token linked
--fs-shipping-simulation-title-padding-bottomvar(--fs-spacing-2)
--fs-shipping-simulation-title-font-sizevar(--fs-text-size-3)
--fs-shipping-simulation-title-font-weightvar(--fs-text-weight-bold)
--fs-shipping-simulation-title-line-height1.2

Link

Local tokenDefault value/Global token linked
--fs-shipping-simulation-link-padding-topvar(--fs-spacing-1)

Header

Local tokenDefault value/Global token linked
--fs-shipping-simulation-header-padding-topvar(--fs-spacing-3)

Subtitle

Local tokenDefault value/Global token linked
--fs-shipping-simulation-subtitle-sizevar(--fs-text-size-2)
--fs-shipping-simulation-subtitle-weightvar(--fs-text-weight-bold)
--fs-shipping-simulation-subtitle-line-height1.5

Location

Local tokenDefault value/Global token linked
--fs-shipping-simulation-location-padding-bottomvar(--fs-spacing-2)
--fs-shipping-simulation-location-font-sizevar(--fs-text-size-2)
--fs-shipping-simulation-location-line-height1.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