Documentation
Feedback
Guides
Storefront Development

Storefront Development
Cart Item

Cart Items are used to present the summarized information of a product inside the Cart.

Overview

Example
Code
appleblack
Apple Magic Mouse

Color: Black

Size: Medium

Original price:$999Price:$950.04
appleblack
Apple Magic Mouse

Color: Black

Size: Medium

Original price:$999Price:$950.04

Import

Import the component from @faststore/ui

_10
import { CartItem, CartItemImage, CartItemSummary } 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/atoms/CartItem/styles.scss';

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

Usage

Example
Code
appleblack
Apple Magic Mouse

Color: Black

Size: Medium

Original price:$999Price:$950.04

Props

Cart Item

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-cart-item
pricePriceDefinitionSpecifies product Price.
quantitynumberSpecifies the quantity of items of the same product.
unavailablefalse | trueSpecifies that this product is unavailable.
removeBtnPropsPartial<IconButtonProps>Props for the Remove from cart IconButton component.
onQuantityChange(value: number) => voidEvent emitted when product quantity value is changed.

Cart Item Image

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-cart-item-image

Cart Item Summary

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).fs-cart-item-summary
title*stringSpecifies the product's title.
activeVariations{ label: string; option: string; }[]Array of the product's chosen variations.[]

Other Resources

PriceDefinition

NameTypeDescriptionDefault
valuenumberThe raw price value.
listPricenumberProduct's list price
formatterPriceFormatter(price: number, variant: PriceVariant) => ReactNode

Design Tokens

Local tokenDefault value/Global token linked
--fs-cart-item-paddingvar(--fs-spacing-3)
--fs-cart-item-bkg-color
var(--fs-control-bkg)
--fs-cart-item-border-widthvar(--fs-border-width)
--fs-cart-item-border-color
var(--fs-border-color-light)
--fs-cart-item-border-radiusvar(--fs-border-radius)

Nested Elements

Image

Local tokenDefault value/Global token linked
--fs-cart-item-image-border-radiusvar(--fs-cart-item-border-radius)
--fs-cart-item-image-widthvar(--fs-spacing-8)
--fs-cart-item-image-heightvar(--fs-cart-item-image-width)

Title

Local tokenDefault value/Global token linked
--fs-cart-item-title-margin-bottomvar(--fs-spacing-0)
--fs-cart-item-title-line-height1.2
--fs-cart-item-title-color
var(--fs-color-text)

SKUs

Local tokenDefault value/Global token linked
--fs-cart-item-skus-margin-topvar(--fs-spacing-0)
--fs-cart-item-skus-text-sizevar(--fs-text-size-legend)
--fs-cart-item-skus-text-color
var(--fs-color-text-light)
--fs-cart-item-skus-line-heightvar(--fs-text-size-body)
--fs-cart-item-skus-column-gapvar(--fs-spacing-1)
--fs-cart-item-skus-row-gapvar(--fs-spacing-0)

Prices

Local tokenDefault value/Global token linked
--fs-cart-item-price-gapvar(--fs-spacing-1)

Customization

For further customization, you can use the following data attributes:
data-fs-cart-item
data-fs-cart-item="unavailable"
data-fs-cart-item-content
data-fs-cart-item-image
data-fs-cart-item-summary
data-fs-cart-item-title
data-fs-cart-item-skus
data-fs-cart-item-remove-button
data-fs-cart-item-prices
data-fs-cart-item-actions
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page