Developers
Start building
Themes/Theme SDK/Modules/cart/Parts

Parts

The parts of @poltura/theme-sdk/cart.

On this page
import { … } from '@poltura/theme-sdk/cart';

CartLineItem

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

CartLineItem(props: CartLineItemProps): ReactElement

Props: CartLineItemProps

Example

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

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

CartLineQuantity(props: CartLineQuantityProps): ReactElement

Props: CartLineQuantityProps

Example

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

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

CartLineRemove

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

CartLineRemove(props: CartLineRemoveProps): ReactElement | null

Props: CartLineRemoveProps

Example

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

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

CartSummary

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

CartSummary(props: CartSummaryProps): ReactElement

Props: CartSummaryProps

Example

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

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

CartCodeForm

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

CartCodeForm(props: CartCodeFormProps): ReactElement | null

Props: CartCodeFormProps

Example

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

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

CartCodes

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

CartCodes(props: CartCodesProps): ReactElement | null

Props: CartCodesProps

Example

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

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

CheckoutButton

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

CheckoutButton(props: CheckoutButtonProps): ReactElement

Props: CheckoutButtonProps

Example

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

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

EmptyCart

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

EmptyCart(props: EmptyCartProps): ReactElement

Props: EmptyCartProps

Example

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

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

CartRecommendations

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

CartRecommendations(props: CartRecommendationsProps): ReactElement | null

Props: CartRecommendationsProps

Example

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

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

MinimumOrderNotice

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

MinimumOrderNotice(props: MinimumOrderNoticeProps): ReactElement | null

Props: MinimumOrderNoticeProps

Example

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

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

BundlePriceNotice(props: BundlePriceNoticeProps): ReactElement | null

Props: BundlePriceNoticeProps

Example

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

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

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.

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

Example

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

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

RemoveBundlesButton

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

RemoveBundlesButton(props: RemoveBundlesButtonProps): ReactElement | null

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

Props: RemoveBundlesButtonProps

Example

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

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