Cart Item

FastStore UI components Molecules

Cart Item

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

Overview

Example

Code

Apple Magic Mouse

Color: Black

Size: Medium

Original price:$999Price:$950.04

Apple Magic Mouse

Color: Black

Size: Medium

Original price:$999Price:$950.04

Import

Import the component from @faststore/ui


_10import { 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

Apple Magic Mouse

Color: Black

Size: Medium

Original price:$999Price:$950.04

Props

Cart Item

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-cart-item`
price	`PriceDefinition`	Specifies product Price.
quantity	`number`	Specifies the quantity of items of the same product.
unavailable	`false \| true`	Specifies that this product is unavailable.
removeBtnProps	`Partial<IconButtonProps>`	Props for the Remove from cart IconButton component.
onQuantityChange	`(value: number) => void`	Event emitted when product quantity value is changed.

Cart Item Image

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-cart-item-image`

Cart Item Summary

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: Cypress, Testing Library, and Jest).	`fs-cart-item-summary`
title*	`string`	Specifies the product's title.
activeVariations	`{ label: string; option: string; }[]`	Array of the product's chosen variations.	`[]`

Other Resources

PriceDefinition

Name	Type	Description
value	`number`	The raw price value.
listPrice	`number`	Product's list price
formatter	`PriceFormatter`	(price: number, variant: PriceVariant) => ReactNode

Design Tokens

Local token	Default value/Global token linked
`--fs-cart-item-padding`	`var(--fs-spacing-3)`
`--fs-cart-item-bkg-color`	`var(--fs-control-bkg)`

`--fs-cart-item-border-width`	`var(--fs-border-width)`
`--fs-cart-item-border-color`	`var(--fs-border-color-light)`
`--fs-cart-item-border-radius`	`var(--fs-border-radius)`

Nested Elements

Image

Local token	Default value/Global token linked
`--fs-cart-item-image-border-radius`	`var(--fs-cart-item-border-radius)`
`--fs-cart-item-image-width`	`var(--fs-spacing-8)`
`--fs-cart-item-image-height`	`var(--fs-cart-item-image-width)`

Title

Local token	Default value/Global token linked
`--fs-cart-item-title-margin-bottom`	`var(--fs-spacing-0)`
`--fs-cart-item-title-line-height`	`1.2`
`--fs-cart-item-title-color`	`var(--fs-color-text)`

SKUs

Local token	Default value/Global token linked
`--fs-cart-item-skus-margin-top`	`var(--fs-spacing-0)`
`--fs-cart-item-skus-text-size`	`var(--fs-text-size-legend)`
`--fs-cart-item-skus-text-color`	`var(--fs-color-text-light)`
`--fs-cart-item-skus-line-height`	`var(--fs-text-size-body)`
`--fs-cart-item-skus-column-gap`	`var(--fs-spacing-1)`
`--fs-cart-item-skus-row-gap`	`var(--fs-spacing-0)`

Prices

Local token	Default value/Global token linked
`--fs-cart-item-price-gap`	`var(--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