CartSidebar
Displays the summary of items added to the cart along with detailed information, and checkout option.
The
CartSidebar
displays the summary of items added to the cart along with detailed information, and checkout option.The final component is a compound of the following:CartSidebar
: renders aSlideOver
as wrapper with theCartSidebarList
andCartSidebarFooter
.CartSidebarList
: wraps a series ofCartItem
s andGifts
.CartSidebarFooter
: wraps anOrdeSummary
usually along with the Checkout Button.
Import
Import the component 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:
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
Example
Code
Props
Name | Type | Description | Default |
---|---|---|---|
testId | string | ID to find this component in testing tools (e.g.: cypress, testing-library, and jest). | fs-cart-sidebar |
title | string | Title for the CartSidebar component. | Your Cart |
direction | "leftSide" | "rightSide" | Represents the side that the CartSidebar comes from. | rightSide |
size | "full" | "partial" | Represents the size of the CartSidebar. | partial |
totalItems* | number | Total of item in the Cart. | |
alertIcon | string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | A React component that will be rendered as an icon on the Alert component. | |
alertText | string | The content for Alert component. | |
overlayProps | Props | Props forwarded to the `Overlay` component. | |
onClose* | () => void | Function called when Close Button is clicked. |
Design Tokens
Local token | Default value/Global token linked |
---|---|
--fs-cart-sidebar-bkg-color | var(--fs-color-neutral-bkg) |
Nested Elements
List
Local token | Default value/Global token linked |
---|---|
--fs-cart-sidebar-list-padding | var(--fs-spacing-3) |
Footer
Local token | Default value/Global token linked |
---|---|
--fs-cart-sidebar-footer-bkg-color | var(--fs-color-neutral-0) |
--fs-cart-sidebar-footer-box-shadow | 0 0 6px rgb(0 0 0 / 20%) |
Customization
data-fs-cart-sidebar
data-fs-cart-sidebar-title
data-fs-cart-sidebar-list
data-fs-cart-sidebar-footer
Related components
- Subtotal (3 products)$1,200
- Discount-$100
- Total$1,100
OrderSummaryThis component provide a summary of the items in the cart, including the total price, related shipping tax, and discounts.
See more