Home

The customer sees a stack of blocks (sliders, product rows, banners) in the order the merchant set in the Salla dashboard. Customise this route when you want to wrap the blocks in your own layout or change the page title. To change what a block looks like, add a home block instead.

URLCopy Anchor Link

{-$locale} is an optional language prefix. There are no other params and no search params.

Locale prefixCopy Anchor Link

This applies to every storefront page. On a multilingual store, a URL without a prefix redirects to the fallback locale (/cart becomes /ar/cart). On a single-language store, the prefix is removed. An unknown prefix redirects to /ar/<path>. Other pages link here instead of repeating this.

Try itCopy Anchor Link

This is the home page as the engine renders it, running against the demo store. Switch the language or the width.

Route fileCopy Anchor Link

The engine writes this file for you:

// @auto-generated
import { createFileRoute } from '@tanstack/react-router';
import { Home } from '@salla.sa/twilight-theme-engine/routes/home';
import type { HomeLoaderData } from '@salla.sa/twilight-theme-engine/routes/home';
import { HomeSkeleton } from '@salla.sa/twilight-theme-engine/skeleton';
import { withHead } from '@salla.sa/twilight-theme-engine/tanstack';

export const Route = createFileRoute('/{-$locale}/')({
  loader: ({ params }): Promise<HomeLoaderData> => Home.loader({ locale: params.locale }),
  head: withHead(Home),
  pendingComponent: () => <HomeSkeleton />,
  component: HomeComponent,
});

function HomeComponent() {
  const data: HomeLoaderData = Route.useLoaderData();
  return <Home.Component {...data} />;
}

Delete the // @auto-generated line and the file is yours. Keep Home.loader and change only what you need. See Fork a built-in route.

A customised versionCopy Anchor Link

This keeps the engine loader, sets your own page description and wraps the blocks in your own element.

import { createFileRoute } from '@tanstack/react-router';
import { Home } from '@salla.sa/twilight-theme-engine/routes/home';
import type { HomeLoaderData } from '@salla.sa/twilight-theme-engine/routes/home';
import { HomeSkeleton } from '@salla.sa/twilight-theme-engine/skeleton';
import { withHead } from '@salla.sa/twilight-theme-engine/tanstack';

export const Route = createFileRoute('/{-$locale}/')({
  loader: ({ params }): Promise<HomeLoaderData> => Home.loader({ locale: params.locale }),
  head: withHead(Home, (result) => ({
    ...result,
    description: 'Free delivery on orders over 200 SAR',
  })),
  pendingComponent: () => <HomeSkeleton />,
  component: HomeComponent,
});

function HomeComponent() {
  const data: HomeLoaderData = Route.useLoaderData();
  return (
    <main className="my-home">
      <Home.Component {...data} />
    </main>
  );
}

What it loadsCopy Anchor Link

HomeLoaderData:

The first request loads this on the server. Each block is drawn by the component you registered for it, see Add a home block.

The page has three hook slots: home:start and home:content above the blocks, and home:end below them. After home:end the engine draws the "order again" row (ReorderProducts) for a signed-in customer when the store has Reorder on; see Add a home block.

Head and SEOCopy Anchor Link

Home.head reads the store settings. Like every page, the store title is added to the end of the page title (Page - Store) for you.

It sets:

• Title and description come from the store's meta title and description, falling back to the store name and description. Keywords come from the meta keywords.
• The canonical URL is the store root, also on /ar/.
• Open Graph and Twitter cards use the store logo.
• Hreflang links point to each store language.

Without store settings it returns nothing. See SEO and head.

Edge casesCopy Anchor Link

• No blocks. The page renders only the hook slots.
• While loading. HomeSkeleton is shown.
• Missing settings in head. The head is skipped instead of breaking the page.

See alsoCopy Anchor Link

• Add a home block
• Fork a built-in route
• SEO and head
• Routes overview