Account wishlist
The signed-in customer's saved products, with paging and sharing.
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 products they saved, with remove buttons, add to cart and a share bar. Customise it to filter or reorder the list. To add or remove items from your own components, use useWishlist.
URL
| URL | Notes |
|---|---|
/account/wishlist | first page |
/ar/account/wishlist?page=2 | with a language prefix and page |
| Param | Type | Notes |
|---|---|---|
locale | string (optional) | ar in the example above |
page (search) | number | Kept in the URL only when above 1. A non-numeric or zero value means 1. |
Route file
// @auto-generated
import { createFileRoute } from '@tanstack/react-router';
import { Wishlist } from '@salla.sa/twilight-theme-engine/routes/account';
import type { WishlistPageProps } 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/wishlist')({
validateSearch: (search: Record<string, unknown>) => {
const page = Number(search.page) || 1;
return page > 1 ? { page } : {};
},
loaderDeps: ({ search }) => ({ page: search.page }),
loader: ({ deps, params }): Promise<WishlistPageProps> =>
Wishlist.loader({ search: { page: deps.page ?? 1 }, locale: params.locale }),
head: withHead(Wishlist),
pendingComponent: () => <CustomerPageSkeleton />,
component: WishlistComponent,
});
function WishlistComponent() {
const data: WishlistPageProps = Route.useLoaderData();
return <Wishlist.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
Show only products that are on sale, by returning new products from the loader's extend argument. The rest of the file stays as generated.
export const Route = createFileRoute('/{-$locale}/account/wishlist')({
// validateSearch and loaderDeps as in the generated file
loader: ({ deps, params }): Promise<WishlistPageProps> =>
Wishlist.loader({ search: { page: deps.page ?? 1 }, locale: params.locale }, (data) => ({
products: data.products.filter((p) => p.status === 'sale'),
})),
// head, pendingComponent and component as in the generated file
});What it loads
WishlistPageProps is { page, query: { page }, products, pagination: { next } }. The loader asks the products API for the wishlist source, 15 items per page, with the customer's token. Further pages load in the browser as the customer scrolls. pagination.next is null on the last 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. - Empty wishlist. The page shows a "no content" block, and the share bar knows there is nothing to share.
See also
- Account wallet, the next account page
- Account layout and Loading data