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

StoreContext

interfaceAdvanced

The processed store settings type, re-exported here so code that calls the head helpers can type the settings it passes.

import { StoreContext } from '@salla.sa/twilight-theme-engine/utils';

In plain words

StoreContext describes the store settings the engine loads for every page: the store, its theme, its languages and currencies. useTwilight().settings has this type, and buildBaseHead and buildHreflangAlternates take it.

It is the same type as StoreContext from @salla.sa/twilight-theme-engine/api/store, whose page describes the fields.

Signature

interface StoreContext {
  store?: Store;
  theme?: Theme;
  languages?: Language[];
  currencies?: Record<string, { code: string; name: string; symbol: string; amount: number; country_code: string }>;
  external_services?: Record<string, unknown>;
  headers?: Record<string, unknown>;
  login?: { url: string; turnstile_site_key: string };
  affiliate?: { utm_url: string; cta_enabled: boolean };
  debug?: boolean;
  trace_console?: boolean;
  policy_url?: string;
}

Example

app/lib/storeLanguages.ts
import type { StoreContext } from '@salla.sa/twilight-theme-engine/utils';

/** The language codes a store sells in, e.g. ['ar', 'en']. */
export function storeLanguageCodes(settings: StoreContext): string[] {
  return (settings.languages ?? []).map((language) => language.code);
}

How it behaves

  • A type only: it disappears from the built theme.

  • languages is an array here, converted from the keyed object the API sends.

Related

store

Loads the store, its theme, languages and currencies in one call: the same call the root loader makes before every page.

buildBaseHead, localeToOgLocale

Builds the store-wide head defaults (title, description, canonical, Open Graph, Twitter card) from the store settings; the root route already applies them.

Source and docs