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

resolveStoreIdentifier

functionAdvancedserverbrowserlive demo

Decides which store the current request is about: the explicit value, the preview request, the URL, the server render or the host.

import { resolveStoreIdentifier } from '@salla.sa/twilight-theme-engine/api/store';

In plain words

Every API call must say which store it is for. On a merchant's own domain the address answers that. On Salla's preview host and on localhost, many stores share one address, so the request names its store instead.

resolveStoreIdentifier() goes through those possibilities in a fixed order and returns the first answer: a store id, a username or a domain. The API client calls it for you on every request.

Signature

function resolveStoreIdentifier(explicit?: string): string   // '' when nothing resolves

// First non-empty answer wins:
// 1. explicit
// 2. the store the request named: ?storeId= or its cookie (preview host and localhost only)
// 3. the store username in the first path segment (same hosts)
// 4. what the server render published for the browser
// 5. the request host, when that host is a storefront
// 6. the browser host, when that host is a storefront
// 7. VITE_STORE_DOMAIN, then STORE_DOMAIN

Try it live

The store identifier every API call from this page sends, and the store the page actually rendered.Try this: type any value into explicit: it always wins, because the caller said so.
Storefront canvas · en · LTR
Runs in the browser…
Controls
Leave empty to see what the page resolves by itself.
What a theme writes
import { resolveStoreIdentifier } from '@salla.sa/twilight-theme-engine/api/store';

// '' means nothing resolved: every Salla API call would fail with 422.
const storeIdentifier = resolveStoreIdentifier();

Example

app/analytics/storeTag.ts
import { resolveStoreIdentifier } from '@salla.sa/twilight-theme-engine/api/store';

/** Tags an analytics event with the store the page was rendered for. */
export function storeTag(): string {
  return resolveStoreIdentifier() || 'unknown-store';
}

How it behaves

  • Re-exported from utils/store-identity.ts. The API client sets store-identifier from the same function on purpose: one resolver, so the store checked is the store sent.

  • Only preview.salla.design and loopback hosts (localhost, 127.0.0.1, [::1], *.localhost) may name a store. Everywhere else the host is the store and ?storeId= is ignored, which stops a link from showing a rival store on a merchant's domain.

  • In the browser, step 4 keeps the hydrated page asking about the store the server rendered, even when the address bar no longer names it.

Gotchas

  • It returns an empty string, not null, when nothing resolves. store.settings() then refuses to call and returns null, and the root loader shows "Store Unavailable".

  • On localhost and the preview host the first path segment is a store username, so localhost:5190/cart names a store called "cart". Start from / or a locale such as /en/….

  • VITE_STORE_DOMAIN comes last: on a real storefront the host answers first, so the variable matters only in local development.

Related

STORE_IDENTIFIER_HEADER

The name of the store-identifier header, which tells the Salla API which store a request is about.

store

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

Source and docs