Order Summary
This component provide a summary of the items in the cart, including the total price, related shipping tax, and discounts.
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
_10import { 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
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. It will only show if subtotalValue is provided. | |
subtotalValue | string | Subtotal value of the order. If provided, a subtotal label and value will be shown. | |
discountLabel | string | Label for the discount value for the order. It will only show if discountValue is provided. | Discount |
discountValue | string | Discount value for the order. If provided, a 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. | |
includeTaxes | false | true | Specifies whether the displayed price should include taxes. | false |
includeTaxesLabel | string | Label to determine if the price includes taxes. | Tax included |
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-row-gap | 0 |
--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) |
--fs-order-summary-taxes-label-color | var(--fs-color-info-text) |
--fs-order-summary-taxes-text-size | var(--fs-text-size-tiny) |
--fs-order-summary-taxes-text-weight | var(--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