Account notifications
The signed-in customer's list of store notifications.
Framework: TanStack Start
This page is written for TanStack Start, the default and currently supported framework. See what depends on the framework.
The customer sees the notifications the store sent them, each linking to its own url. Customise it to hide or reorder notifications.
URL
| URL | Notes |
|---|---|
/account/notifications | default language |
/ar/account/notifications | with a language prefix |
The only param is the optional locale.
Route file
// @auto-generated
import { createFileRoute } from '@tanstack/react-router';
import { Notifications } from '@salla.sa/twilight-theme-engine/routes/account';
import type { NotificationsPageProps } 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/notifications')({
loader: ({ params }): Promise<NotificationsPageProps> =>
Notifications.loader({ locale: params.locale }),
head: withHead(Notifications),
pendingComponent: () => <CustomerPageSkeleton />,
component: NotificationsComponent,
});
function NotificationsComponent() {
const data: NotificationsPageProps = Route.useLoaderData();
return <Notifications.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
Hide read notifications by returning new data from the loader's extend argument. The rest of the file stays as generated.
export const Route = createFileRoute('/{-$locale}/account/notifications')({
loader: ({ params }): Promise<NotificationsPageProps> =>
Notifications.loader({ locale: params.locale }, (data) => ({
notifications: data.notifications.filter((n) => !n.is_read),
})),
// head, pendingComponent and component as in the generated file
});What it loads
NotificationsPageProps is { page, notifications }. Each notification has id, title, body, url, icon, color, is_read, time_ago and created_at. The loader calls the notifications API with the customer's token and returns the first batch only. There is no "load more" on this page.
The head sets the title, description and language alternates.
Edge cases
- Signed out or expired token. A guest, or a customer whose token the API rejects with 401 or 403, is sent to the home page with
?intended_to=holding the page they asked for. The Salla SDK opens the sign-in form there and returns them to the page after sign-in. - No notifications. The page shows a "no notifications" message.