Cart and checkout slots

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 and Page frame slots first.

Cart pageCopy Anchor Link

Route: Cart. The cart slots render only when the cart has items. An empty cart shows an empty state, and none of them appear.

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 itemsCopy Anchor Link

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.

Thank-you pageCopy Anchor Link

Route: Thank you. The customer lands here after placing an order.

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.

NextCopy Anchor Link

• Product page slots
• Account slots
• useHook and HookSlot