Cart Sidebar

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 a SlideOver as wrapper with the CartSidebarList and CartSidebarFooter.
CartSidebarList: wraps a series of CartItems and Gifts.
CartSidebarFooter: wraps an OrdeSummary usually along with the Checkout Button.

Import

Import the component from @faststore/ui

import { CartSidebar, CartSidebarList, CartSidebarFooter } 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:

@import '@faststore/ui/src/components/organisms/CartSidebar/styles.scss';
@import '@faststore/ui/src/components/molecules/Alert/styles.scss';
@import '@faststore/ui/src/components/atoms/Badge/styles.scss';

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

Usage

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
Order Summary
This component provide a summary of the items in the cart, including the total price, related shipping tax, and discounts.
See more

Banner Text Empty State