# Cart and checkout slots (https://docs.salla.dev/twilight/react/slots/cart-and-checkout)



Use these slots when you want a free-shipping message above the cart lines, a note beside the checkout button, or an upsell on the order-confirmation page, without forking the route. New to slots? Read [Slots](https://docs.salla.dev/twilight/react/slots) and [Page frame slots](https://docs.salla.dev/twilight/react/slots/page-frame) first.

## Cart page [#cart-page]

Route: [Cart](https://docs.salla.dev/twilight/react/routes/cart). The cart slots render only when the cart has items. An empty cart shows an empty state, and none of them appear.

<PageLayout
  title="Cart page (with items)"
  url="/cart"
  nodes="[
  { block: 'Breadcrumb and offer banner', size: 'xs' },
  { slot: 'cart:start' },
  { cols: [
    { w: 3, nodes: [
      { slot: 'cart:items.start', note: 'context: cartItems' },
      { block: 'Cart lines, options and offers', size: 'xl' },
      { slot: 'cart:items.end' },
    ] },
    { w: 2, nodes: [
      { slot: 'cart:summary.start' },
      { block: 'Free-shipping bar, coupon and totals', size: 'lg' },
      { slot: 'cart:submit.start' },
      { block: 'Complete order button', size: 'xs' },
      { slot: 'cart:submit.end' },
      { slot: 'cart:summary.end' },
    ] },
  ] },
  { slot: 'cart:end' },
]"
/>

| Slot                 | Position                                                                              | Context     | Notes                                            |
| -------------------- | ------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------ |
| `cart:start`         | After the breadcrumb and conditional offer, before the two-column layout. Full width. | none        | Good for a banner above everything.              |
| `cart:items.start`   | At the top of the left column, before the first cart line.                            | `cartItems` | `cartItems` is the array of cart lines.          |
| `cart:items.end`     | At the bottom of the left column, after the cart lines, product options and offers.   | none        |                                                  |
| `cart:summary.start` | At the top of the order summary (right column), before the free-shipping bar.         | none        | The summary is sticky on large screens.          |
| `cart:submit.start`  | Directly before the "Complete Order" button.                                          | none        |                                                  |
| `cart:submit.end`    | Directly after the "Complete Order" button.                                           | none        | Good for payment icons or a returns note.        |
| `cart:summary.end`   | At the bottom of the order summary, after the checkout button.                        | none        | The tiered-offer widget renders below this slot. |
| `cart:end`           | After the two-column layout, at the bottom of the page container.                     | none        | Full width.                                      |

`cart:items.start` is the only cart slot with its own context: `{ cartItems }`. The other slots pass nothing. Every handler also receives `twilight`, so `cart:items.start` handlers get `{ cartItems, twilight }`.

### Example: free-shipping banner above the cart items [#example-free-shipping-banner-above-the-cart-items]

```tsx title="app/hooks/index.tsx"
import { hookRegistry, HookName, type HookContext } from '@salla.sa/twilight-theme-engine/hooks';

export function registerThemeHooks() {
  hookRegistry.register(
    HookName.CART_ITEMS_START,
    (context: HookContext) => {
      const { cartItems } = context as { cartItems?: unknown[] };
      if (!cartItems?.length) return null;
      return (
        <div className="mb-4 rounded-md bg-gray-100 p-3 text-sm">
          {cartItems.length} item(s) in your cart. Orders over 200 SAR ship free.
        </div>
      );
    },
    50
  );
}
```

Call `registerThemeHooks()` once at module scope, as in [Add content to a slot](https://docs.salla.dev/twilight/react/recipes/add-content-to-a-slot).

## Thank-you page [#thank-you-page]

Route: [Thank you](https://docs.salla.dev/twilight/react/routes/thank-you). The customer lands here after placing an order.

<PageLayout
  title="Thank-you page"
  url="/thank-you/12345"
  nodes="[
  { slot: 'thank-you:start' },
  { group: 'Header band', nodes: [
    { block: 'Breadcrumb, title, order number and view-order button', size: 'sm' },
    { block: 'Instructions and messages', size: 'sm' },
    { slot: 'thank-you:items.start' },
    { slot: 'thank-you:items.end' },
    { block: 'Next-order coupon and pickup branch', size: 'sm' },
    { block: 'Order summary and contact details', size: 'md' },
  ] },
  { slot: 'thank-you:end' },
]"
/>

| Slot                    | Position                                                                      | Context | Notes                                                                                                  |
| ----------------------- | ----------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
| `thank-you:start`       | First thing on the page, above the colored header band.                       | none    |                                                                                                        |
| `thank-you:items.start` | In the confirmation block, after the order number, instructions and messages. | none    |                                                                                                        |
| `thank-you:items.end`   | Immediately after `thank-you:items.start`.                                    | none    | The two slots are adjacent with nothing between them, so they render back to back. They always render. |
| `thank-you:end`         | Last item inside the page container, after the contact details.               | none    | Good for a "follow us" or referral block.                                                              |

None of the thank-you slots pass the order in their context. If you need order data, load it yourself in your handler's component.

## Next [#next]

* [Product page slots](https://docs.salla.dev/twilight/react/slots/product-page)
* [Account slots](https://docs.salla.dev/twilight/react/slots/account)
* [useHook](https://docs.salla.dev/twilight/react/hooks/use-hook) and [HookSlot](https://docs.salla.dev/twilight/react/hooks/hook-slot)