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

import '@faststore/ui/src/components/organisms/CartSidebar/styles.scss'

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.

Local token	Default value/Global token linked
`--fs-cart-sidebar-bkg-color`	`var(--fs-color-neutral-bkg)`

Local token	Default value/Global token linked
`--fs-cart-sidebar-list-padding`	`var(--fs-spacing-3)`

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%)`

data-fs-cart-sidebar

data-fs-cart-sidebar-title

data-fs-cart-sidebar-list

data-fs-cart-sidebar-footer