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

RouteId

constantBeginnerlive demo

The named list of every engine page id, so code compares with RouteId.CART instead of typing the string "cart".

import { RouteId, RouteIdType } from '@salla.sa/twilight-theme-engine';

In plain words

Typing 'product.single' by hand invites typos that fail silently. RouteId is an object whose keys name each page and whose values are the ids the engine uses, and your editor completes RouteId. for you.

RouteIdType is the TypeScript type that means "one of those values".

Signature

const RouteId = {
  INDEX: 'index',
  CART: 'cart',
  SEARCH: 'product.index.search',
  PRODUCT_INDEX: 'product.index',                // a category
  PRODUCT_INDEX_LATEST: 'product.index.latest',
  PRODUCT_INDEX_SALES: 'product.index.sales',
  PRODUCT_INDEX_OFFERS: 'product.index.offers',
  PRODUCT_INDEX_TAG: 'product.index.tag',
  PRODUCT_SINGLE: 'product.single',
  BLOG_INDEX: 'blog.index',
  BLOG_SINGLE: 'blog.single',
  BLOG_INDEX_AUTHOR: 'blog.index.author',
  BLOG_INDEX_CATEGORY: 'blog.index.category',
  BLOG_INDEX_TAG: 'blog.index.tag',
  BRANDS_INDEX: 'brands.index',
  BRANDS_SINGLE: 'brands.single',
  CUSTOMER_LAYOUT: 'customer.layout',
  CUSTOMER_PROFILE: 'customer.profile',
  CUSTOMER_WISHLIST: 'customer.wishlist',
  CUSTOMER_WALLET: 'customer.wallet',
  CUSTOMER_NOTIFICATIONS: 'customer.notifications',
  CUSTOMER_SETTINGS: 'customer.settings',
  CUSTOMER_ORDERS_INDEX: 'customer.orders.index',
  CUSTOMER_ORDERS_INDEX_PENDING: 'customer.orders.index.pending',
  CUSTOMER_ORDERS_SINGLE: 'customer.orders.single',
  LOYALTY: 'loyalty',
  PAGE_SINGLE: 'page-single',
  TESTIMONIALS: 'testimonials',
  THANK_YOU: 'thank-you',
} as const;

type RouteIdType = (typeof RouteId)[keyof typeof RouteId];

Try it live

Every RouteId constant and the string it stands for. The row of the current page would be bold.Try this: type "customer" or "blog" to see the ids of one area of the store.
Storefront canvas · ar · RTL
Runs in the browser…
Controls
Matches a constant name or its value.
What a theme writes
import { RouteId, type RouteIdType } from '@salla.sa/twilight-theme-engine';

// A label for analytics: switch on the constants, never on typed strings.
export function pageLabel(routeId: RouteIdType | string): string {
  switch (routeId) {
    case RouteId.INDEX:
      return 'Home';
    case RouteId.CART:
      return 'Cart';
    case RouteId.PRODUCT_SINGLE:
      return 'Product';
    default:
      return 'Other';
  }
}

Example

app/lib/page-label.ts
import { RouteId, type RouteIdType } from '@salla.sa/twilight-theme-engine';

export function pageLabel(routeId: RouteIdType | string): string {
  switch (routeId) {
    case RouteId.INDEX:
      return 'Home';
    case RouteId.CART:
      return 'Cart';
    case RouteId.PRODUCT_SINGLE:
      return 'Product';
    default:
      return 'Other';
  }
}

How it behaves

  • A plain object declared as const: each value keeps its literal type, and TypeScript treats the object as read-only (JavaScript does not freeze it).

  • Also exported from /providers.

Gotchas

  • /latest-products, /most-sales-products and /offers have their own ids (PRODUCT_INDEX_LATEST, PRODUCT_INDEX_SALES, PRODUCT_INDEX_OFFERS); only a category page (/$slug/c{$id}) is PRODUCT_INDEX. packages/theme-engine/docs/route-ids.md says they all share PRODUCT_INDEX, and a check written that way misses them.

  • useRouteId() never returns a CUSTOMER_* value today: the account routes are missing from the engine's id table (see useRouteId), and /pending-orders, the one customer route it maps, only redirects.

Related

useRouteId

Returns the id of the page on screen, such as "cart" or "product.single", and renders the component again when the shopper navigates.

useIsHome, useIsProduct…

Seven yes-or-no hooks that tell a component which kind of store page is showing: home, product, cart, account, blog, brands or search.

Source and docs