Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsMolecules
OrderSummary

Provides a summary of the items in the cart, including the total price, related shipping tax, and discounts.

The OrderSummary provides a summary of the items in the cart, including the total price, related shipping tax, and discounts.

Import

Import the component from @faststore/ui

_10
import { OrderSummary } 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/molecules/OrderSummary/styles.scss';

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

Usage

Example
Code
  • Subtotal (3 products)$1,200
  • Discount-$100
  • Total$1,100

Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g., cypress, testing-library, and jest).fs-order-summary
subtotalLabelstringLabel for the subtotal value of the order. It will only show if subtotalValue is provided.
subtotalValuestringSubtotal value of the order. If provided, a subtotal label and value will be shown.
discountLabelstringLabel for the discount value for the order. It will only show if discountValue is provided.Discount
discountValuestringDiscount value for the order. If provided, a discount label and value will be shown.
totalLabelstringLabel for the total value of the order.Total
totalValuestringTotal value of the order.
includeTaxesfalse | trueSpecifies whether the displayed price should include taxes.false
includeTaxesLabelstringLabel to determine if the price includes taxes.Tax included

Design Tokens

Local tokenDefault value/Global token linked
--fs-order-summary-paddingvar(--fs-spacing-3)
--fs-order-summary-margin-bottomvar(--fs-spacing-2)
--fs-order-summary-row-gap0
--fs-order-summary-discount-text-color
var(--fs-color-success-text)
--fs-order-summary-total-text-sizevar(--fs-text-size-3)
--fs-order-summary-total-text-font-weightvar(--fs-text-weight-bold)
--fs-order-summary-taxes-label-color
var(--fs-color-info-text)
--fs-order-summary-taxes-text-sizevar(--fs-text-size-tiny)
--fs-order-summary-taxes-text-weightvar(--fs-text-weight-regular)

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
data-fs-order-summary-taxes-label
Contributors
4
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 4 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
4
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 4 contributors
On this page