Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development
CartItem

Displays the summarized information of a product inside the Cart.

Example
Code
appleblack
Apple Magic Mouse

Color: Black

Size: Medium

Original price:$999Price:$950.04

Usage

Import the component


_10
import { CartItem, CartItemImage, CartItemSummary } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:

_10
@import "@faststore/ui/src/components/atoms/CartItem/styles.scss";


Examples

Unavailable

Example
Code
appleblack
Apple Magic Mouse

Color: Black

Size: Medium

Original price:$999Price:$950.04

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)

Data attributes

You can target and override CartItem styles using 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

Props

CartItem

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.
unitMultipliernumberControls by how many units the value advances
useUnitMultiplierfalse | trueControls wheter you use or not the unitMultiplier
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.

CartItemImage

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

CartItemSummary

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
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
On this page