Thank you

After a successful checkout, Salla sends the customer here. They see a confirmation with the order number, a link to the order, store messages, an optional next-order coupon and an invoice-by-email form. Customise it to add your own message or upsell. Guests and signed-in customers both land on it.

URLCopy Anchor Link

The path is thankyou (one word), not thank-you, because the platform redirects to that form.

There are no search params.

Route fileCopy Anchor Link

// @auto-generated
import { createFileRoute } from '@tanstack/react-router';
import { ThankYou } from '@salla.sa/twilight-theme-engine/routes/thank-you';
import type { ThankYouPageProps } from '@salla.sa/twilight-theme-engine/routes/thank-you';
import { withHead } from '@salla.sa/twilight-theme-engine/tanstack';

export const Route = createFileRoute('/{-$locale}/thankyou/$orderId')({
  loader: ({ params }): Promise<ThankYouPageProps> =>
    ThankYou.loader({ params: { orderId: params.orderId }, locale: params.locale }),
  head: withHead(ThankYou),
  component: ThankYouComponent,
});

function ThankYouComponent() {
  const data: ThankYouPageProps = Route.useLoaderData();
  return <ThankYou.Component {...data} />;
}

To take the page over, delete the // @auto-generated line and edit the file. See Fork a built-in route.

A customised versionCopy Anchor Link

Add an extra store message by returning new messages from the loader's extend argument. The rest of the file stays as generated.

loader: ({ params }): Promise<ThankYouPageProps> =>
  ThankYou.loader(
    { params: { orderId: params.orderId }, locale: params.locale },
    (data) => ({ messages: [...(data.messages ?? []), 'Free gift wrapping on your next order'] })
  ),

What it loadsCopy Anchor Link

The loader makes two requests together: the order itself and the thank-you details (checkout/thank-you/{id}). A request that fails is dropped instead of failing the page.

ThankYouPageProps has page ({ slug, id, title }), and optionally order, thank_you_title, messages, share_message and short_share_message. In the browser the page also shows the next-order coupon and pickup-branch widgets, each of which renders nothing when it does not apply.

The head sets the title, description and language alternates. It sets no canonical or robots tag.

Edge casesCopy Anchor Link

• Guest checkout. Loading the order needs a customer token, so for guests order is undefined. The page still shows the title and messages, and hides the order number and the "View order details" link.
• Unknown order id. Both requests fail quietly, so the customer sees the generic confirmation, not a 404.
• Order link. When order exists, the page links to /account/orders/<id>.
• Instructions. order.instructions is rendered as HTML when the API sends it.

See alsoCopy Anchor Link

• Cart, where checkout starts
• Account order and Account orders
• Overview of every route