Account settings
The signed-in customer's settings page, with the Salla user settings widget.
Framework: TanStack Start
This page is written for TanStack Start, the default and currently supported framework. See what depends on the framework.
The customer manages their notification and account preferences here, inside the account layout. Customise it to add your own block next to the widget.
URL
| URL | Notes |
|---|---|
/account/settings | default language |
/ar/account/settings | with a language prefix |
The only param is the optional locale.
Route file
// @auto-generated
import { createFileRoute } from '@tanstack/react-router';
import { Settings } from '@salla.sa/twilight-theme-engine/routes/account';
import type { SettingsPageProps } from '@salla.sa/twilight-theme-engine/routes/account';
import { CustomerPageSkeleton } from '@salla.sa/twilight-theme-engine/skeleton';
import { withHead } from '@salla.sa/twilight-theme-engine/tanstack';
export const Route = createFileRoute('/{-$locale}/account/settings')({
loader: ({ params }): Promise<SettingsPageProps> => Settings.loader({ locale: params.locale }),
head: withHead(Settings),
pendingComponent: () => <CustomerPageSkeleton />,
component: SettingsComponent,
});
function SettingsComponent() {
const data: SettingsPageProps = Route.useLoaderData();
return <Settings.Component {...data} />;
}To take the page over, delete the // @auto-generated line and edit the file. See Fork a built-in route.
A customised version
Add your own block after the engine's widget. Only the component changes:
function SettingsComponent() {
const data: SettingsPageProps = Route.useLoaderData();
return (
<>
<Settings.Component {...data} />
<p className="mt-6 text-sm">Need help? Contact the store.</p>
</>
);
}A plugin can also add content without forking, through the customer:settings.start and customer:settings.end hook slots.
What it loads
SettingsPageProps is { page: { title, slug } }. The loader makes no API call: it checks for a token and returns the translated title. The widget loads and saves preferences in the browser. The head sets the title, description and language alternates.
Edge cases
- Signed out. With no token the loader throws
unauthorized(), and the customer is sent to the home page to sign in, exactly as on Profile. - Expired token. The page still renders; the widget's own requests then fail.
See also
- Account wishlist, the next account page
- Account layout
- Authentication and scope