Skip to content
Twilight React Playground
ثيم رائدaren

head (product listing)

functionAdvancedserverbrowser

ProductListing's head function on its own: title, canonical and share tags for any product list, from its category or tag when there is one.

import { head } from '@salla.sa/twilight-theme-engine/routes/product-listing';

In plain words

This is ProductListing.head, also exported under the name head. Use it in a listing route you write yourself when you want the engine's tags, or want to change one of them.

Signature

function head(ctx: TwilightContext, data: ProductListLoaderData): HeadDescriptor
// title:        category name ?? tag name ?? data.page.title
// description:  `Browse ${title}`  (also og:description and twitter:description)
// canonical:    category url ?? tag url  (none for search, brands, latest, sales, offers)
// images:       the category image (Open Graph and Twitter)
// alternateLanguages: built from the canonical URL, or the current path

Example

app/routes/new-arrivals.tsx
// app/routes.ts: route('/new-arrivals', 'new-arrivals.tsx')
import { createFileRoute } from '@tanstack/react-router';
import {
  head as productListHead,
  productListLoader,
  ProductListing,
} from '@salla.sa/twilight-theme-engine/routes/product-listing';
import { withHead } from '@salla.sa/twilight-theme-engine/tanstack';

export const Route = createFileRoute('/{-$locale}/new-arrivals')({
  loader: () => productListLoader({ params: { source: 'latest' } }),
  head: withHead({ head: productListHead }, (result, ctx) => ({
    ...result,
    description: ctx.locale === 'ar' ? `تصفح ${result.title}` : result.description,
  })),
  component: function NewArrivals() {
    return <ProductListing.Component {...Route.useLoaderData()} />;
  },
});

How it behaves

  • ProductListing.head is this same function.

  • withHead accepts any object with a head method, so withHead({ head: productListHead }) and withHead(ProductListing) give the same tags.

  • Search, brand and static lists get no canonical and no image: only categories and tags carry an entity with a URL.

Gotchas

  • The name head is also exported by @salla.sa/twilight-theme-engine/tanstack and /nextjs, where it means something else. Alias it on import (head as productListHead).

  • The description is the English literal Browse <title> on every store language. Replace it in withHead's extend, as the example does.

Related

ProductListing

One module behind every product grid: categories, search, tags, brand pages, and the latest, best-selling and offers lists.

Product listing types

The pieces of ProductListLoaderData: page metadata, the source and its entity, the sort query and the tag shape, plus an unused category props type.

Route modules

Every built-in page is an object with a loader that fetches its data, a head that sets its tags, and a Component that draws it.

Source and docs