Order Summary
Use this component to provide a summary of the items in the cart, including the total price, related shipping tax, and discounts.
Import
Import the component from @faststore/ui
import { OrderSummary } from '@faststore/ui'Import Styles
import '@faststore/ui/src/components/molecules/OrderSummary/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-order-summary |
| subtotalLabel | string | Label for the subtotal value of the order. Will only show if subtotalValue is provided. | |
| subtotalValue | string | Subtotal value of the order. If provided, subtotal label and value will be shown. | |
| discountLabel | string | Label for the discount value for the order. Will only show if discountValue is provided. | Discount |
| discountValue | string | Discount value for the order. If provided, discount label and value will be shown. | |
| totalLabel | string | Label for the total value of the order. | Total |
| totalValue | string | Total value of the order. |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-order-summary-padding | var(--fs-spacing-3) |
--fs-order-summary-margin-bottom | var(--fs-spacing-2) |
--fs-order-summary-discount-text-color | var(--fs-color-success-text) |
--fs-order-summary-total-text-size | var(--fs-text-size-3) |
--fs-order-summary-total-text-font-weight | var(--fs-text-weight-bold) |
Customization
data-fs-order-summary
data-fs-order-summary-subtotal
data-fs-order-summary-subtotal-label
data-fs-order-summary-subtotal-value
data-fs-order-summary-discount
data-fs-order-summary-discount-label
data-fs-order-summary-discount-value
data-fs-order-summary-total
data-fs-order-summary-total-label
data-fs-order-summary-total-value