# Account wishlist (https://docs.salla.dev/twilight/react/routes/account-wishlist)



<Callout title="Framework: TanStack Start">
  This page is written for TanStack Start, the default and currently supported framework. [See what depends on the framework](https://docs.salla.dev/twilight/react/start/frameworks).
</Callout>

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](https://docs.salla.dev/twilight/react/hooks/use-wishlist).

## URL [#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 [#route-file]

```tsx title="app/routes/account.wishlist.tsx"
// @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](https://docs.salla.dev/twilight/react/recipes/fork-a-built-in-route).

### A customised version [#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.

```tsx title="app/routes/account.wishlist.tsx"
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 [#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 [#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 [#see-also]

* [Account wallet](https://docs.salla.dev/twilight/react/routes/account-wallet), the next account page
* [Account layout](https://docs.salla.dev/twilight/react/routes/account) and [Loading data](https://docs.salla.dev/twilight/react/guide/loading-data)