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-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-summarydata-fs-order-summary-subtotaldata-fs-order-summary-subtotal-labeldata-fs-order-summary-subtotal-valuedata-fs-order-summary-discountdata-fs-order-summary-discount-labeldata-fs-order-summary-discount-valuedata-fs-order-summary-totaldata-fs-order-summary-total-labeldata-fs-order-summary-total-valuedata-fs-order-summary-taxes-label