# Parts (/themes/sdk/reference/cart/parts)

```ts
import { … } from '@poltura/theme-sdk/cart';
```

## `CartLineItem` [#cartlineitem]

One cart line: image, title, variant, delivery note, personalisation, price, quantity and remove, with its bundle items under it.

```ts
CartLineItem(props: CartLineItemProps): ReactElement
```

**Props:** [`CartLineItemProps`](/themes/sdk/reference/cart/types-2#cartlineitemprops)

**Example**

```tsx
import { CartLineItem, useCart } from '@poltura/theme-sdk/cart';

export function CartLines() {
  const { cart } = useCart();
  return <div>{cart?.lines.map((line) => <CartLineItem key={line.id} line={line} />)}</div>;
}
```

## `CartLineQuantity` [#cartlinequantity]

The quantity stepper of a cart line, following the store's quantity steps; read-only while the cart is locked.

```ts
CartLineQuantity(props: CartLineQuantityProps): ReactElement
```

**Props:** [`CartLineQuantityProps`](/themes/sdk/reference/cart/types-2#cartlinequantityprops)

**Example**

```tsx
import { CartLineQuantity, type CartLine } from '@poltura/theme-sdk/cart';

export function LineQuantity({ line }: { line: CartLine }) {
  return <CartLineQuantity line={line} />;
}
```

## `CartLineRemove` [#cartlineremove]

The button that removes a cart line; renders nothing while the cart is locked.

```ts
CartLineRemove(props: CartLineRemoveProps): ReactElement | null
```

**Props:** [`CartLineRemoveProps`](/themes/sdk/reference/cart/types-2#cartlineremoveprops)

**Example**

```tsx
import { CartLineRemove, type CartLine } from '@poltura/theme-sdk/cart';

export function LineActions({ line }: { line: CartLine }) {
  return <CartLineRemove line={line} />;
}
```

## `CartSummary` [#cartsummary]

The order summary: subtotal, shipping, tax, discounts, gift cards and the total, on the visitor's price basis.

```ts
CartSummary(props: CartSummaryProps): ReactElement
```

**Props:** [`CartSummaryProps`](/themes/sdk/reference/cart/types-2#cartsummaryprops)

**Example**

```tsx
import { CartSummary, useCart } from '@poltura/theme-sdk/cart';

export function CartAside() {
  const { cart } = useCart();
  return cart === null ? null : <CartSummary cart={cart} />;
}
```

## `CartCodeForm` [#cartcodeform]

The field that applies a gift card or discount code, with the entered codes under it.

```ts
CartCodeForm(props: CartCodeFormProps): ReactElement | null
```

**Props:** [`CartCodeFormProps`](/themes/sdk/reference/cart/types-2#cartcodeformprops)

**Example**

```tsx
import { CartCodeForm } from '@poltura/theme-sdk/cart';

export function Codes() {
  return <CartCodeForm className='mt-6' />;
}
```

## `CartCodes` [#cartcodes]

The discount codes the shopper entered, each with its status and a remove button.

```ts
CartCodes(props: CartCodesProps): ReactElement | null
```

**Props:** [`CartCodesProps`](/themes/sdk/reference/cart/types-2#cartcodesprops)

**Example**

```tsx
import { CartCodes, useCart } from '@poltura/theme-sdk/cart';

export function EnteredCodes() {
  const { cart } = useCart();
  return cart === null ? null : <CartCodes cart={cart} />;
}
```

## `CheckoutButton` [#checkoutbutton]

The button that goes to checkout; disabled while a change runs or the cart blocks checkout.

```ts
CheckoutButton(props: CheckoutButtonProps): ReactElement
```

**Props:** [`CheckoutButtonProps`](/themes/sdk/reference/cart/types-2#checkoutbuttonprops)

**Example**

```tsx
import { CheckoutButton } from '@poltura/theme-sdk/cart';

export function Pay() {
  return <CheckoutButton label='Continue' />;
}
```

## `EmptyCart` [#emptycart]

What the cart shows when it holds nothing: an icon, a heading, a line and a button back to the shop.

```ts
EmptyCart(props: EmptyCartProps): ReactElement
```

**Props:** [`EmptyCartProps`](/themes/sdk/reference/cart/types-2#emptycartprops)

**Example**

```tsx
import { EmptyCart } from '@poltura/theme-sdk/cart';

export function NothingHere() {
  return <EmptyCart continueHref='/collections/new' />;
}
```

## `CartRecommendations` [#cartrecommendations]

Products suggested to add to the cart, each with its own add button; renders nothing while the cart is locked.

```ts
CartRecommendations(props: CartRecommendationsProps): ReactElement | null
```

**Props:** [`CartRecommendationsProps`](/themes/sdk/reference/cart/types-2#cartrecommendationsprops)

**Example**

```tsx
import { CartRecommendations, useCartPage } from '@poltura/theme-sdk/cart';

export function Suggestions() {
  const { recommendations } = useCartPage();
  return <CartRecommendations items={recommendations} />;
}
```

## `MinimumOrderNotice` [#minimumordernotice]

How much is missing to the minimum order value, with a progress bar.

```ts
MinimumOrderNotice(props: MinimumOrderNoticeProps): ReactElement | null
```

**Props:** [`MinimumOrderNoticeProps`](/themes/sdk/reference/cart/types-2#minimumordernoticeprops)

**Example**

```tsx
import { MinimumOrderNotice, useCart } from '@poltura/theme-sdk/cart';

export function Minimum() {
  const minimum = useCart().cart?.minimumOrder ?? null;
  return minimum === null ? null : <MinimumOrderNotice minimum={minimum} />;
}
```

## `BundlePriceNotice` [#bundlepricenotice]

The notice that a bundle price changed, with the new total and the button that accepts it.

```ts
BundlePriceNotice(props: BundlePriceNoticeProps): ReactElement | null
```

**Props:** [`BundlePriceNoticeProps`](/themes/sdk/reference/cart/types-2#bundlepricenoticeprops)

**Example**

```tsx
import { BundlePriceNotice, useCartPage } from '@poltura/theme-sdk/cart';

export function BundleNotice() {
  const { bundlePriceReview } = useCartPage();
  return bundlePriceReview === null ? null : <BundlePriceNotice review={bundlePriceReview} />;
}
```

## `CartLockBanner` [#cartlockbanner]

The banner of a cart an app has locked, such as a quote: what holds it, a way back to an editable cart and a link to the app's page.

```ts
CartLockBanner(props: CartLockBannerProps): ReactElement | null
```

Renders nothing while the cart is not locked. While it is, the lines' quantity and remove controls are read-only.

**Props:** [`CartLockBannerProps`](/themes/sdk/reference/cart/types-2#cartlockbannerprops)

**Example**

```tsx
import { CartLockBanner } from '@poltura/theme-sdk/cart';

export function CartNotices() {
  return <CartLockBanner className='mb-6' />;
}
```

## `RemoveBundlesButton` [#removebundlesbutton]

A row with the button that removes every bundle from the cart, its items with it; a failure shows as a toast.

```ts
RemoveBundlesButton(props: RemoveBundlesButtonProps): ReactElement | null
```

Renders nothing while the cart is locked or when no line belongs to a bundle.

**Props:** [`RemoveBundlesButtonProps`](/themes/sdk/reference/cart/types-2#removebundlesbuttonprops)

**Example**

```tsx
import { RemoveBundlesButton } from '@poltura/theme-sdk/cart';

export function CartLinesToolbar() {
  return <RemoveBundlesButton className='mb-2' />;
}
```