Application initialization

Application Load · Nuxt

Application Load is the first request your storefront makes to its personal backend. It returns the settings and initial content needed to render the interface, the current customer profile when signed in, and the API methods available to this session.

POST/api/appload

What the response contains

page_data — the application data inside the API response. Its four main sections have different roles:

IAppLoad

Initial storefront data, customer profile and available API endpoints.

app/interfaces/orionplace/appBase/IAppLoad.ts

TypeScript

import type { IAppLoadCommon } from '@/interfaces/orionplace/appBase/IAppLoadCommon';
import type { IApploadUserProfile } from '@/interfaces/orionplace/appBase/IApploadUserProfile';
import type { IAppLoadPathsRecord } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonPath';

export interface IAppLoad {
	// Shared storefront settings and initial data.
	init: IAppLoadCommon;
	// Public API methods, grouped under paths.
	unauth: IAppLoadPathsRecord;
	// Current customer profile. Omitted for guests.
	user?: IApploadUserProfile;
	// Authenticated-session methods. Omitted for guests; the backend checks
	// permissions.
	auth?: IAppLoadPathsRecord;
	// Whether seller-panel features are enabled for this storefront.
	seller_panel_enabled?: boolean;
	// Product-preview key for a signed-in account with seller information.
	// Do not publish its value; buyer-facing interfaces do not need this key.
	view_key?: string;
	// Backend Application Load preparation time in seconds; only with project
	// debug enabled.
	// Excludes response serialization and network transfer.
	spent_total?: number;
	// Backend init loading time in seconds. Only with project debug enabled.
	spent_init?: number;
	// Public API discovery loading time in seconds. Only with project debug
	// enabled.
	unauth_spent?: number;
	// Profile and auth preparation time in seconds. Debug only; zero for guests.
	auth_spent?: number;
}

Session and CSRF cookies

Application Load initializes both application data and the browser session, including for a guest. Cookies arrive through HTTP response headers, separately from the JSON response.

Set-Cookie — The backend sets the cookies and their attributes. The session cookie is HttpOnly; client JavaScript should not access it. Cookie values belong neither in the initialization store nor in logs or localStorage.

Requests through the shared API client will be covered after endpoint discovery. Methods are selected byurl_name — API endpoints .

How the Nuxt starter forwards cookies during SSR

app/composables/useOrionplaceAppLoad.ts — the shared API transport sends Application Load and the page-data requests of the render and forwards every backend Set-Cookie to the browser.

useRequestFetch() · useResponseHeader('set-cookie') — the request-aware fetch carries the incoming request context; response cookies must be relayed separately. Keep every raw Set-Cookie header intact and separate, including signed values, expires attributes and deletion cookies.

Cookies created by Application Load are not part of the incoming request. The starter keeps a cookie list for the current render only: it starts with the visitor's cookies and adds each Set-Cookie the backend returns, including a renewed CSRF token. Later requests of the same render, such as loading the product or the article, send this list, so they use the same session as the browser. The browser receives every cookie with the page response. The list is never shared between requests or visitors.

orionplace/runtime/marketplace.mjs — the generated gateway forwards cookies and the CSRF header to the selected personal backend. It removes only the backend Domain attribute so cookies belong to the storefront, preserving HttpOnly, Secure, SameSite, Path and expiration settings.

orionplace/runtime/marketplace.mjs

import { chown, mkdir, readFile, readdir, rename, stat, unlink, writeFile } from 'node:fs/promises';
import { dirname, relative, resolve } from 'node:path';
import {
  getDefaultAutoSelectFamilyAttemptTimeout,
  isIP,
  setDefaultAutoSelectFamilyAttemptTimeout,
} from 'node:net';

const environment     = process.env;

// Node gives each resolved backend address 250 ms to connect before it moves
// on. Over slower links (VPNs, distant regions) every attempt can expire, and
// the request fails although the backend is reachable. Allow more time per
// address; a longer value already chosen by the application is kept.
const connectTimeout  = 2_000;
if (getDefaultAutoSelectFamilyAttemptTimeout() < connectTimeout) {
  setDefaultAutoSelectFamilyAttemptTimeout(connectTimeout);
}

// A backend answer may take up to 30 seconds. A file upload (multipart form:
// review photos, cart option files, ticket attachments) also has to send the
// file first; at 3 Mbit/s a 10 MB file alone takes about 30 seconds, so
// uploads get 5 minutes.
const requestTimeout  = 30_000;
const uploadTimeout   = 300_000;

/** @param {Request} request */
export function marketplaceRequestTimeout(request) {
  const contentType = request.headers.get('content-type') ?? '';

  return contentType.toLowerCase().startsWith('multipart/form-data')
    ? uploadTimeout
    : requestTimeout;
}

const hostnamePattern =
  /^(?=.{1,253}$)(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?$/;

// Blog media is served outside /api by the backend's guarded /ps3 routes.
// Only these read-only paths are forwarded; other /ps3 files stay private.
const blogMediaPattern =
  /^\/ps3\/blog\/posts\/(?:images\/\d+|videos\/\d+(?:\/preview)?)$/;

/**
 * API answers are never stored. A media file keeps the backend's own browser
 * cache rule when the backend allows it (a published public blog image:
 * "private, max-age=…"); "private" keeps it out of shared caches.
 */
export function marketplaceCacheControl(media, upstream) {
  const value = upstream.headers.get('cache-control') ?? '';
  return media && upstream.ok && /\bprivate\b/i.test(value) && /\bmax-age=\d+/i.test(value) && !/no-store|no-cache/i.test(value)
    ? value
    : 'no-store';
}

/** @param {string} pathname */
export function isMarketplaceMediaPath(pathname) {
  return blogMediaPattern.test(pathname);
}

/** @param {unknown} value */
export function normalizeFrontDomain(value) {
  if (typeof value !== 'string') {
    return null;
  }
  const domain = value.split(',')[0].trim().toLowerCase().replace(/\.$/, '');
  return hostnamePattern.test(domain) && !isIP(domain) ? domain : null;
}

/** @param {Request} request @param {string} mimic */
export function resolveFrontDomain(
  request,
  mimic = environment.MIMIC_FRONT_DOMAIN || '',
) {
  // The hosting proxy must overwrite these headers. Public hosts win over MIMIC.
  for (const candidate of [
    request.headers.get('x-front-domain'),
    request.headers.get('x-forwarded-host'),
    request.headers.get('host'),
    new URL(request.url).hostname,
  ]) {
    const domain = normalizeFrontDomain(candidate);
    if (domain) {
      return domain;
    }
  }
  return normalizeFrontDomain(mimic);
}

/** @param {Request} request @param {{mimicFrontDomain?: string}} configuration */
export async function readMarketplace(request, configuration = {}) {
  const domain    = resolveFrontDomain(request, configuration.mimicFrontDomain);
  if (!domain) {
    throw new Error('Invalid storefront domain');
  }
  return readMarketplaceDomain(domain);
}

/**
 * The marketplace of one storefront domain: its `sitemaps/<domain>.cfg` in
 * the project (`root`, the working directory by default).
 * @param {string} name @param {{root?: string}} options
 */
export async function readMarketplaceDomain(name, options = {}) {
  const domain    = normalizeFrontDomain(name);
  if (!domain) {
    throw new Error('Invalid storefront domain');
  }
  const directory = marketplaceConfigDirectory(options.root);
  const source    = await readFile(resolve(directory, `${domain}.cfg`), 'utf8');
  const lines     = source
    .split(/\r?\n/)
    .map((line) => line.trim())
    .filter((line) => line && !line.startsWith('#'));
  if (lines.length !== 1) {
    throw new Error('Expected one API URL');
  }
  const value     = lines[0];
  const api       = new URL(value.includes('://') ? value : `https://${value}`);
  api.pathname    = api.pathname.replace(/\/+$/, '');
  if (
    api.protocol !== 'https:' ||
    !hostnamePattern.test(api.hostname) ||
    !api.hostname.endsWith('.orionplace.app') ||
    isIP(api.hostname) ||
    api.port ||
    api.username ||
    api.password ||
    api.search ||
    api.hash ||
    api.pathname !== '/api'
  ) {
    throw new Error('Expected https://<project>.orionplace.app/api');
  }
  return { domain, api };
}

/** The folder of the domain files (`SITEMAPS_DIR`, or `sitemaps`). */
export function marketplaceConfigDirectory(root = process.cwd()) {
  return environment.SITEMAPS_DIR
    ? resolve(root, environment.SITEMAPS_DIR)
    : resolve(root, 'sitemaps');
}

/** @param {number} status @param {string} message */
function failure(status, message) {
  return Response.json(
    { error: message },
    {
      status,
      headers: {
        'Cache-Control': 'no-store',
        'Vary': 'Host, X-Forwarded-Host, X-Front-Domain',
      },
    },
  );
}

/** @param {Request} request @param {{mimicFrontDomain?: string}} configuration */
export async function forwardMarketplace(request, configuration = {}) {
  let tenant;
  try {
    tenant = await readMarketplace(request, configuration);
  } catch {
    return failure(
      503,
      'Storefront domain configuration is missing or invalid',
    );
  }

  const incoming        = new URL(request.url);
  const media           = isMarketplaceMediaPath(incoming.pathname);
  if (!incoming.pathname.startsWith('/api/') && !media) {
    return failure(404, 'Unknown API path');
  }
  if (media && !['GET', 'HEAD'].includes(request.method)) {
    return failure(405, 'Media is read-only');
  }
  // Prevent encoded separators or traversal from escaping the /api namespace.
  let path;
  try {
    path = decodeURIComponent(incoming.pathname);
  } catch {
    return failure(400, 'Invalid API path');
  }
  if (
    path.includes('\\') ||
    /%(?:2e|2f|5c)/i.test(path) ||
    path.split('/').some((part) => part === '.' || part === '..')
  ) {
    return failure(400, 'Invalid API path');
  }
  const target          = new URL(
    incoming.pathname + incoming.search,
    tenant.api.origin,
  );
  if (
    media
      ? !isMarketplaceMediaPath(target.pathname)
      : !target.pathname.startsWith('/api/')
  ) {
    return failure(400, 'Invalid API path');
  }

  const origin          = request.headers.get('origin');
  const publicHost      = request.headers.get('host') || incoming.host;
  const originHosts     = [publicHost, tenant.domain];
  if (!['GET', 'HEAD', 'OPTIONS'].includes(request.method)) {
    try {
      if (
        request.headers.get('sec-fetch-site') === 'cross-site' ||
        (origin && !originHosts.includes(new URL(origin).host))
      ) {
        return failure(403, 'Cross-site API request rejected');
      }
    } catch {
      return failure(403, 'Invalid Origin');
    }
  }

  // An allowlist excludes hop-by-hop and client-supplied routing headers.
  const headers         = new Headers();
  for (const name of [
    'accept',
    'content-type',
    'authorization',
    'cookie',
    'origin',
    'referer',
    'x-csrftoken',
    'accept-language',
    'user-agent',
    'x-tz',
    'range',
  ]) {
    const value = request.headers.get(name);
    if (value) {
      headers.set(name, value);
    }
  }
  headers.set('X-Front-Domain', tenant.domain);
  // The backend accepts forms from the storefront domain's own origin. A public
  // host that shows this storefront (MIMIC, a preview host or a local port)
  // passed the same-origin check above, so it is sent as that origin.
  let ownOrigin         = false;
  try {
    ownOrigin = Boolean(origin) && originHosts.includes(new URL(origin).host);
  } catch {
    ownOrigin = false;
  }
  if (ownOrigin) {
    headers.set('origin', `https://${tenant.domain}`);
  }
  headers.set('Accept-Encoding', 'identity');
  const clientIp        =
    request.headers.get('x-init-ip') ||
    request.headers.get('x-real-ip') ||
    request.headers.get('x-forwarded-for')?.split(',')[0]?.trim();
  if (clientIp) {
    headers.set('X-Init-Ip', clientIp);
  }
  /** @type {RequestInit & { duplex: 'half' }} */
  const options         = {
    method: request.method,
    headers,
    redirect: 'manual',
    cache: 'no-store',
    signal: AbortSignal.any([
      request.signal,
      AbortSignal.timeout(marketplaceRequestTimeout(request)),
    ]),
    duplex: 'half',
  };
  if (!['GET', 'HEAD'].includes(request.method)) {
    options.body = request.body;
  }

  let upstream;
  try {
    upstream = await fetch(target, options);
  } catch (error) {
    // The browser receives only the status; keep the cause in the server log.
    if (!request.signal.aborted) {
      const cause = error?.cause?.code ?? error?.message ?? String(error);
      console.error(`[orionplace] Backend request failed: ${cause}`);
    }
    return failure(502, 'Marketplace backend is unavailable');
  }

  const responseHeaders = new Headers();
  for (const name of [
    'content-type',
    'content-disposition',
    'www-authenticate',
    'retry-after',
    'allow',
    'accept-ranges',
    'content-range',
  ]) {
    const value = upstream.headers.get(name);
    if (value) {
      responseHeaders.set(name, value);
    }
  }
  // Keep each cookie separate; remove the backend Domain attribute only.
  for (const cookie of upstream.headers.getSetCookie()) {
    responseHeaders.append(
      'Set-Cookie',
      cookie.replace(/;\s*Domain=[^;]*/gi, ''),
    );
  }
  const location        = upstream.headers.get('location');
  if (location) {
    const destination = new URL(location, target);
    responseHeaders.set(
      'Location',
      destination.origin === tenant.api.origin
        ? destination.pathname + destination.search + destination.hash
        : destination.href,
    );
  }
  responseHeaders.set('Cache-Control', marketplaceCacheControl(media, upstream));
  responseHeaders.set('Vary', 'Host, X-Forwarded-Host, X-Front-Domain');
  // fetch decodes compressed bodies: do not reuse upstream Content-Length/Encoding.
  return new Response(upstream.body, {
    status: upstream.status,
    statusText: upstream.statusText,
    headers: responseHeaders,
  });
}

// ---------------------------------------------------------------------------
// robots.txt and sitemap.xml
//
// The sitemap lists the storefront's public pages in every language the
// marketplace offers (`?locale=<code>` links, with hreflang alternates): the
// home, catalog and directory pages, the journal and its publications when
// the blog is on, the subscription plans when there are any, every public
// category and every product on sale. It is built from the backend's public
// API and kept for an hour per storefront domain in
// node_modules/.cache/orionplace/sitemaps/<domain>.json (ORIONPLACE_CACHE_DIR
// moves it). "orionplace-<framework> sitemap rebuild" rebuilds that file at
// once; the running storefront serves the new file without a restart.
// Paths in ORIONPLACE_NOINDEX_PATHS are left out when the sitemap is served.

export const SITEMAP_LIFETIME = 60 * 60 * 1000;
const sitemapPageSize = 100;
const sitemapMaxPages = 500;
const sitemapMaxUrls  = 50_000;
const sitemapVersion  = 1;
/** Built sitemaps of this process, for when the cache folder is read-only. */
const sitemapMemory   = new Map();
/** @type {Map<string, Promise<object>>} */
const sitemapBuilds   = new Map();

/** The public origin a crawler used: the storefront host, or a local one. */
export function marketplacePublicOrigin(request, tenantDomain = '') {
  const url  = new URL(request.url);
  const host = normalizeFrontDomain(
    request.headers.get('x-forwarded-host') ?? request.headers.get('host') ?? '',
  );
  if (host) {
    return `https://${host}`;
  }
  const local = /^(?:localhost|127(?:\.\d{1,3}){3}|\[::1\])$/.test(url.hostname);
  return local || !tenantDomain ? url.origin : `https://${tenantDomain}`;
}

/**
 * Pages kept out of search engines: ORIONPLACE_NOINDEX_PATHS lists path
 * prefixes separated by spaces or commas, for example "/catalog /category
 * /product" on a demo or staging storefront. Those pages answer with
 * `X-Robots-Tag: noindex, follow` and the sitemap leaves them out. Empty
 * (the default) keeps every public page indexable.
 */
export function noindexPathPrefixes(value = environment.ORIONPLACE_NOINDEX_PATHS) {
  return String(value ?? '')
    .split(/[\s,]+/)
    .map((item) => item.trim().replace(/\/+$/, ''))
    .filter((item) => /^\/[A-Za-z0-9._~\/-]+$/.test(item));
}

/** Whether a page path is kept out of search engines (see noindexPathPrefixes). */
export function marketplaceNoindexPath(pathname, value = environment.ORIONPLACE_NOINDEX_PATHS) {
  const path = String(pathname ?? '');
  return noindexPathPrefixes(value)
    .some((prefix) => path === prefix || path.startsWith(`${prefix}/`));
}

/** The sitemap pages search engines may index. */
export function sitemapIndexedPages(pages, value = environment.ORIONPLACE_NOINDEX_PATHS) {
  return noindexPathPrefixes(value).length
    ? pages.filter((page) => !marketplaceNoindexPath(page.path, value))
    : pages;
}

/** @param {string} origin */
export function marketplaceRobots(origin) {
  return `User-agent: *\nDisallow: /api/\nAllow: /\n\nSitemap: ${origin}/sitemap.xml\n`;
}

/** @param {Request} request @param {{mimicFrontDomain?: string}} configuration */
export async function marketplaceRobotsResponse(request, configuration = {}) {
  let domain = '';
  try {
    domain = (await readMarketplace(request, configuration)).domain;
  } catch {
    domain = '';
  }
  return new Response(
    marketplaceRobots(marketplacePublicOrigin(request, domain)),
    {
      headers: {
        'Content-Type': 'text/plain; charset=utf-8',
        'Cache-Control': 'public, max-age=3600',
        'Vary': 'Host, X-Forwarded-Host, X-Front-Domain',
      },
    },
  );
}

/** @param {string} value */
function escapeXml(value) {
  return value.replace(/[<>&"']/g, (character) => ({
    '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;', "'": '&apos;',
  })[character]);
}

/** @param {unknown} value */
function publicId(value) {
  const id = Number(value);
  return Number.isSafeInteger(id) && id > 0 ? id : null;
}

/** The marketplace's languages from /appload `init.locale`. */
export function sitemapLocales(locales) {
  const codes = Object.entries(locales && typeof locales === 'object' ? locales : {})
    .map(([key, item]) => String(item?.code || key).trim().toLowerCase())
    .filter((code) => /^[a-z]{2,3}(?:-[a-z0-9]{2,8})*$/.test(code));
  return [...new Set(codes)].sort();
}

/** A product edit time (ISO 8601) or a blog post day ({date: 'DD.MM.YYYY'}). */
export function sitemapLastmod(value, now = Date.now()) {
  if (typeof value === 'string' && value) {
    const time = Date.parse(value);
    return Number.isFinite(time) && time <= now + 60_000
      ? new Date(time).toISOString().replace(/\.\d{3}Z$/, 'Z')
      : null;
  }
  const match = /^(\d{2})\.(\d{2})\.(\d{4})$/.exec(value?.date ?? '');
  if (!match) {
    return null;
  }
  const [, day, month, year] = match;
  const time  = Date.UTC(Number(year), Number(month) - 1, Number(day));
  const date  = new Date(time);
  return date.getUTCDate() === Number(day) &&
    date.getUTCMonth() === Number(month) - 1 &&
    time <= now + 24 * 60 * 60 * 1000
    ? `${year}-${month}-${day}`
    : null;
}

/** The API path (under /api) of a route named in /appload `unauth.paths`. */
export function sitemapApiPath(paths, name) {
  for (const group of Object.values(paths ?? {})) {
    for (const route of Object.values(group ?? {})) {
      if (route?.url_name === name) {
        const target = String(route.target ?? '').split('/{')[0].replace(/^\/+/, '');
        return target.startsWith('api/') ? `/${target}` : null;
      }
    }
  }
  return null;
}

/** Public categories, parents before children. */
export function sitemapCategoryIds(categories) {
  const ids   = [];
  const visit = (category) => {
    const id = publicId(category?.id);
    if (id && category?.is_public) {
      ids.push(id);
    }
    (category?.childs ?? []).forEach(visit);
  };
  (Array.isArray(categories) ? categories : []).forEach(visit);
  return [...new Set(ids)];
}

/**
 * One <url> per page and language, each with alternates for its languages.
 * A page with its own `locales` (a publication written in some languages
 * only) is listed in those of the marketplace's languages.
 * @param {string} origin
 * @param {{path: string, lastmod?: string | null, locales?: string[]}[]} pages
 * @param {string[]} locales
 */
export function marketplaceSitemapXml(origin, pages, locales) {
  const href  = (path, code) => {
    const url = new URL(path, `${origin}/`);
    if (code) {
      url.searchParams.set('locale', code);
    }
    return escapeXml(url.toString());
  };
  const urls  = [];
  for (const page of pages) {
    const own        = page.locales
      ? locales.filter((code) => page.locales.includes(code))
      : locales;
    if (page.locales && !own.length) {
      continue;
    }
    const codes      = own.length ? own : [''];
    const alternates = own.length > 1
      ? own.map((code) =>
        `    <xhtml:link rel="alternate" hreflang="${escapeXml(code)}" href="${href(page.path, code)}" />\n`).join('')
      : '';
    const lastmod    = page.lastmod ? `    <lastmod>${escapeXml(page.lastmod)}</lastmod>\n` : '';
    for (const code of codes) {
      if (urls.length >= sitemapMaxUrls) {
        break;
      }
      urls.push(`  <url>\n    <loc>${href(page.path, code)}</loc>\n${lastmod}${alternates}  </url>\n`);
    }
  }
  return '<?xml version="1.0" encoding="UTF-8"?>\n' +
    '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">\n' +
    urls.join('') +
    '</urlset>\n';
}

/** @param {{domain: string, api: URL}} tenant @param {string} path @param {unknown} body */
async function sitemapRequest(tenant, path, body) {
  const response = await fetch(new URL(path, tenant.api.origin), {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'X-Front-Domain': tenant.domain,
    },
    body: JSON.stringify(body),
    cache: 'no-store',
    signal: AbortSignal.timeout(requestTimeout),
  });
  if (!response.ok) {
    throw new Error(`${path} answered ${response.status}`);
  }
  return response.json();
}

/** Every record of a paginated list (`page_data[key].data` + `rpag`). */
async function sitemapList(tenant, path, key, filters = {}) {
  const records = new Map();
  let page      = 1;
  for (let count = 0; count < sitemapMaxPages; count++) {
    const payload = await sitemapRequest(tenant, path, {
      filters,
      paginate: { page, pp_items: sitemapPageSize },
    });
    const list    = payload?.page_data?.[key];
    if (!Array.isArray(list?.data)) {
      throw new Error(`${path} returned no ${key} list`);
    }
    for (const record of list.data) {
      const id = publicId(record?.id);
      if (id) {
        records.set(id, record);
      }
    }
    const next    = Number(list.rpag?.next_page_number);
    if (!list.rpag?.has_next || !Number.isSafeInteger(next) || next <= page) {
      return [...records.values()];
    }
    page          = next;
  }
  throw new Error(`${path} has more than ${sitemapMaxPages} pages`);
}

/** Products on sale and in stock states a shopper can open. */
function productOnSale(product) {
  const status = Number(product?.status?.status ?? product?.status);
  return [2, -2, -3].includes(status);
}

/** Blog publications that are published. */
function postPublished(post) {
  const state = post?.publishing_state?.int ?? post?.publishing_state;
  return state === undefined || state === null || Number(state) === 1;
}

/** The languages a publication is written in (it has a title there). */
function postLocales(post) {
  return Object.entries(post?.locale && typeof post.locale === 'object' ? post.locale : {})
    .filter(([, text]) => typeof text?.post_title === 'string' && text.post_title.trim())
    .map(([code]) => code.toLowerCase());
}

/** @param {{domain: string, api: URL}} tenant */
async function buildMarketplaceSitemap(tenant) {
  const appload    = await sitemapRequest(tenant, '/api/appload', {
    detalize_mode: 'light',
    ignore_cache: false,
  });
  const init       = appload?.page_data?.init;
  const paths      = appload?.page_data?.unauth?.paths;
  if (!init || !Array.isArray(init.catalog)) {
    throw new Error('appload returned no catalog');
  }
  const locales    = sitemapLocales(init.locale);
  const categories = sitemapCategoryIds(init.catalog);
  const blogPath   = sitemapApiPath(paths, 'blog_posts_get');
  const searchPath = sitemapApiPath(paths, 'products_search');
  const [products, posts] = await Promise.all([
    searchPath && categories.length
      ? sitemapList(tenant, searchPath, 'products', { categories })
      : [],
    blogPath ? sitemapList(tenant, blogPath, 'posts') : [],
  ]);
  const postPages  = posts
    .filter(postPublished)
    .sort((left, right) => left.id - right.id)
    .map((post) => ({
      path: `/journal/${post.id}`,
      lastmod: sitemapLastmod(post.date_updated),
      locales: postLocales(post),
    }));
  const newestPost = postPages.map((page) => page.lastmod).filter(Boolean).sort().at(-1) ?? null;
  const pages      = [
    { path: '/' },
    { path: '/catalog' },
    ...(blogPath ? [{ path: '/journal', lastmod: newestPost }] : []),
    ...(init.tariffs?.data?.length ? [{ path: '/tariffs' }] : []),
    { path: '/manufacturers' },
    ...(init.visual_settings?.single_seller_mode ? [] : [{ path: '/sellers' }]),
    { path: '/stores' },
    { path: '/contact' },
    { path: '/privacy' },
    ...categories.map((id) => ({ path: `/category/${id}` })),
    ...products
      .filter(productOnSale)
      .map((product) => ({
        path: `/product/${product.id}`,
        lastmod: sitemapLastmod(product.date_updated),
      })),
    ...postPages,
  ];
  return {
    version: sitemapVersion,
    domain: tenant.domain,
    built: new Date().toISOString(),
    locales,
    pages,
  };
}

/** How many <url> entries a built sitemap has. */
export function sitemapUrlCount(sitemap) {
  let count = 0;
  for (const page of sitemapIndexedPages(sitemap.pages)) {
    const own = page.locales
      ? sitemap.locales.filter((code) => page.locales.includes(code))
      : sitemap.locales;
    count    += page.locales ? own.length : Math.max(own.length, 1);
  }
  return Math.min(count, sitemapMaxUrls);
}

/** The cache folder of built sitemaps. */
export function sitemapCacheDirectory(root = process.cwd()) {
  return environment.ORIONPLACE_CACHE_DIR
    ? resolve(root, environment.ORIONPLACE_CACHE_DIR, 'sitemaps')
    : resolve(root, 'node_modules', '.cache', 'orionplace', 'sitemaps');
}

/** @param {string} domain @param {string} root */
function sitemapCachePath(domain, root) {
  return resolve(sitemapCacheDirectory(root), `${domain}.json`);
}

/** A cached sitemap of the domain, or null. @param {string} domain */
export async function readSitemapCache(domain, root = process.cwd()) {
  let sitemap;
  try {
    sitemap = JSON.parse(await readFile(sitemapCachePath(domain, root), 'utf8'));
  } catch {
    return null;
  }
  return sitemap?.version === sitemapVersion &&
    sitemap.domain === domain &&
    Number.isFinite(Date.parse(sitemap.built)) &&
    Array.isArray(sitemap.locales) &&
    Array.isArray(sitemap.pages)
    ? sitemap
    : null;
}

/**
 * Write the cache file. When root writes it (sudo), the folders it creates
 * and the file go to the project owner, so the storefront service can
 * replace them later.
 */
async function writeSitemapCache(sitemap, root) {
  const path      = sitemapCachePath(sitemap.domain, root);
  const temporary = `${path}.${process.pid}.${Date.now()}.tmp`;
  await mkdir(dirname(path), { recursive: true });
  try {
    await writeFile(temporary, JSON.stringify(sitemap), { mode: 0o644 });
    await rename(temporary, path);
  } catch (error) {
    await unlink(temporary).catch(() => {});
    throw error;
  }
  if (process.getuid?.() === 0) {
    const owner = await stat(root);
    if (owner.uid !== 0) {
      let cursor = path;
      while (cursor !== root && !relative(root, cursor).startsWith('..')) {
        const info = await stat(cursor);
        if (info.uid === 0) {
          await chown(cursor, owner.uid, owner.gid);
        }
        cursor = dirname(cursor);
      }
    }
  }
  return path;
}

/** @param {{domain: string, api: URL}} tenant @param {string} root */
function buildOnce(tenant, root) {
  let build = sitemapBuilds.get(tenant.domain);
  if (!build) {
    build = buildMarketplaceSitemap(tenant)
      .then(async (sitemap) => {
        sitemapMemory.set(tenant.domain, sitemap);
        try {
          await writeSitemapCache(sitemap, root);
        } catch (error) {
          console.error(`[orionplace] Sitemap cache not written: ${error?.code ?? error?.message ?? error}`);
        }
        return sitemap;
      })
      .finally(() => sitemapBuilds.delete(tenant.domain));
    sitemapBuilds.set(tenant.domain, build);
  }
  return build;
}

/**
 * Rebuild the sitemap of one storefront domain now and store it where the
 * running storefront reads it (the "sitemap rebuild" command).
 * @param {string} domain @param {{root?: string}} options
 */
export async function rebuildMarketplaceSitemap(domain, options = {}) {
  const root    = resolve(options.root ?? process.cwd());
  const tenant  = await readMarketplaceDomain(domain, { root });
  const sitemap = await buildMarketplaceSitemap(tenant);
  const path    = await writeSitemapCache(sitemap, root);
  return {
    domain: tenant.domain,
    path,
    built: sitemap.built,
    urls: sitemapUrlCount(sitemap),
    pages: sitemap.pages.length,
    publications: sitemap.pages.filter((page) => page.path.startsWith('/journal/')).length,
  };
}

/** The storefront domains of the project (its `sitemaps/*.cfg` files). */
export async function marketplaceDomains(root = process.cwd()) {
  let names;
  try {
    names = await readdir(marketplaceConfigDirectory(root));
  } catch (error) {
    if (error?.code === 'ENOENT') {
      return [];
    }
    throw error;
  }
  return names
    .filter((name) => name.endsWith('.cfg'))
    .map((name) => normalizeFrontDomain(name.slice(0, -4)))
    .filter(Boolean)
    .sort();
}

/** @param {Request} request @param {{mimicFrontDomain?: string}} configuration */
export async function marketplaceSitemapResponse(request, configuration = {}) {
  let tenant;
  try {
    tenant = await readMarketplace(request, configuration);
  } catch {
    return failure(503, 'Storefront domain configuration is missing or invalid');
  }
  const root    = process.cwd();
  const fresh   = (sitemap) =>
    sitemap && Date.now() - Date.parse(sitemap.built) < SITEMAP_LIFETIME;
  // The file wins when it is newer: a "sitemap rebuild" replaced it.
  const file    = await readSitemapCache(tenant.domain, root);
  const memory  = sitemapMemory.get(tenant.domain);
  const newest  = [file, memory]
    .filter(Boolean)
    .sort((left, right) => Date.parse(right.built) - Date.parse(left.built))[0];
  let sitemap   = fresh(newest) ? newest : null;
  if (!sitemap) {
    try {
      sitemap = await buildOnce(tenant, root);
    } catch (error) {
      console.error(`[orionplace] Sitemap build failed: ${error?.message ?? error}`);
      if (!newest) {
        return failure(502, 'Marketplace backend is unavailable');
      }
      sitemap = newest;
    }
  }
  const origin  = marketplacePublicOrigin(request, tenant.domain);
  return new Response(marketplaceSitemapXml(origin, sitemapIndexedPages(sitemap.pages), sitemap.locales), {
    headers: {
      'Content-Type': 'application/xml; charset=utf-8',
      'Cache-Control': 'public, max-age=3600',
      'Vary': 'Host, X-Forwarded-Host, X-Front-Domain',
    },
  });
}

Renewal, errors and session changes

What to build with init

Each field links to its data reference, actual consumers and related component guides.

API response field

page_data.init

POST/api/appload

Store accessuseOrionplaceStore()

store.initapp/stores/orionplace.ts

Language, currencies and units
Languages, currencies and measurement units, including names, display formats and defaults for each locale.
- localestore.locales
  MainLanguageSwitcher selects the language; the store applies its default currency and units to the current selections.
- currenciesstore.currencies
  Currency choices read by MainCurrencySwitcher.
- weightsstore.weights
  Weight-unit choices read by UnitSwitcher.
- lengthsstore.lengths
  Length-unit choices read by UnitSwitcher.
- shipping_countriesstore.init?.shipping_countries
  The shop's shipping countries, named in the product pages' return terms.
Catalog and search
Categories, initial product collections, search suggestions and subscription tariffs.
- catalogstore.catalog
  Category tree used by CatalogHeader and CategoryGroup.
- productsstore.products
  Initial products read by ProductGroup, ProductCard and product components such as HoverImageViewer.
- featuredstore.featured
  Personalized recommendations based on previous searches and categories. Product components read them with collection="featured".
- sellersstore.init?.sellers
  Seller details keyed by ID. Each Application Load product identifies its seller with seller_id; the product store resolves that reference when components read the product.
- search_hintsstore.init?.search_hints
  Localized suggestions displayed by MainSearch.
- tariffsstore.tariffs
  Tariff collection read by TariffCards to render individual TariffCard components.
Branding and page metadata
Logos, the site icon, storefront display settings and SEO metadata.
- logosstore.init?.logos
  BrandLogos displays the selected logo size or icon.
- visual_settingsstore.init?.visual_settings
  Category menu images, home category count and ordering, and other storefront display settings.
- seostore.init?.seo
  getStorefrontSeo() prepares metadata for app/pages/index.vue: the title, description and keywords use useSeoMeta(), while additional tags use useHead().
Content and contacts
Banners, storefront events, company contacts and social links.
- main_bannerstore.init?.main_banner
  Banner images displayed by MainBanner in the current storefront language.
- eventsstore.init?.events
  Event images displayed by EventsBlock, filtered by language and is_layout.
- contactstore.init?.contact
  Company contacts and registration details displayed by AboutPage.
- smstore.init?.sm
  Social links and localized captions displayed by SocialLinks.
Customer and counters
Authentication status, wallet balance and initial cart and wishlist counters. The full cart and account data are available through separate API endpoints.
- is_authenticatedstore.isAuthenticated
  store.isAuthenticated controls authenticated discovery and switches StorefrontAccount between Login and the profile/wallet menu.
- walletstore.init?.wallet
  WalletBalance displays the selected currency balance, including compact mode in StorefrontAccount.
- variablesstore.init?.variables
  Initial counts for the cart and wishlist buttons, preorder permission and content-status defaults.
Maps and integrations
Map center, public map key and availability of address lookup from coordinates.
- default_mapstore.init?.default_map
  Default map center coordinates.
- geo_location_enabledstore.init?.geo_location_enabled
  Indicates whether address lookup by coordinates is available. Text suggestions depend on the selected country.
- public_keysstore.init?.public_keys
  map_key loads Yandex Maps for the delivery map in the cart.

Fields depend on store settings and the current session. A field may be absent or a collection empty. Initial products do not replace a complete, paginated catalog.

Use the data after initialization

`app/middleware/00.orionplace.global.ts`

Global middleware runs before each page and waits for initialization.

Once data is loaded, navigation does not repeat the request. If loading fails, the store records the failure and the middleware opens the storefront error page with HTTP 503 and a Retry button that reloads the page. An unknown address keeps its 404 page. The middleware itself does not display notifications.

Source code

import { abortNavigation, defineNuxtRouteMiddleware } from '#imports';
import { useOrionplaceAppLoad } from '@/composables/useOrionplaceAppLoad';
import { storefrontPageError } from '@/composables/useOrionplaceMissingPage';

/**
 * Bootstrap precedes page setup. A failed Application Load opens the
 * storefront error page with HTTP 503 on every page; an unknown address keeps
 * its 404 page.
 */
export default defineNuxtRouteMiddleware(async (to) => {
  const { initialize, store } = useOrionplaceAppLoad();
  const locale                = typeof to.query.locale === 'string'
    ? to.query.locale
    : '';

  await initialize(locale);

  if (!to.matched.length) {
    return;
  }

  const error                 = storefrontPageError(store.status, false, '');

  if (error) {
    return abortNavigation(error);
  }
});

`app/composables/useOrionplaceAppLoad.ts`

The composable calls the shared API client, validates the initialization response and passes the result to the store. The client's transport relays the cookies that the backend sets during a server render.

It provides initialize, refresh and reset actions. Accessing it alone does not start a request.

Source code

import { createError, usePinia, useResponseHeader } from '#imports';
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useOrionplaceStore } from '@/stores/orionplace';
import type {
  AppLoadFailure,
  AppLoadResult,
} from '@/interfaces/orionplace/transport';
import { useOrionplaceApi } from '@/composables/useOrionplaceApi';
import {
  appLoadRejectedLocale,
  appLoadResult,
  inspectAppLoad,
} from '@/utils/orionplaceAppLoad';

/** Transport and explicit actions. Calling this accessor does not start a request. */
export function useOrionplaceAppLoad() {
  // SSR forwards the current request's domain, cookies and authorization to our own gateway.
  const store   = useOrionplaceStore(usePinia());
  const refs    = storeToRefs(store);
  const api     = useOrionplaceApi();
  if (import.meta.server) {
    useResponseHeader('cache-control').value = 'private, no-store';
  }

  const request = async (
    signal: AbortSignal,
    locale = '',
  ): Promise<AppLoadResult> => {
    let received:
      { body: unknown; status: number; cookies: string[] } | undefined;
    try {
      received = await api.applicationLoad(signal, locale);
    } catch {
      throw createError({
        message: 'Could not reach the marketplace API.',
        data: {
          kind: 'network',
          httpStatus: null,
          fields: [],
        } satisfies AppLoadFailure,
      });
    }
    if (!received) {
      throw createError({
        message: 'The API returned no response.',
        data: {
          kind: 'network',
          httpStatus: null,
          fields: [],
        } satisfies AppLoadFailure,
      });
    }
    // A cookie that AppLoad sets during a server render (a new guest session
    // or CSRF token) is relayed to the browser by the shared API transport,
    // which also sends it with the later requests of the same render.
    const failure = inspectAppLoad(received.body, received.status);
    // An address with a language the storefront does not have (`?locale=xx`)
    // opens in the storefront's default language instead of the 503 page.
    if (failure && locale && appLoadRejectedLocale(failure)) {
      return request(signal);
    }
    if (failure) {
      throw createError({
        message: 'Marketplace initialization failed.',
        data: failure,
      });
    }
    return appLoadResult(received.body, received.status);
  };
  return {
    store,
    data: refs.result,
    status: refs.status,
    error: computed(() => (store.failure ? { data: store.failure } : null)),
    initialize: (locale = '') =>
      store.load((signal) => request(signal, locale)),
    refresh: () => store.load(request, true),
    // Called by the shared API client after HTTP 401 in a signed-in session.
    endSession: () => store.endSession(request),
    reset: () => store.reset(),
  };
}

`app/composables/useOrionplaceApi.ts`

Creates the shared API clients of one Nuxt application: one for the browser session and one for each server render. Components send requests to discovered endpoints in the browser. The product, category, search, featured, journal and article pages also load their first data during the server render through useOrionplaceServerApi(), with the visitor's cookies, so the page HTML already contains that data. The browser reuses the result without repeating the request.

Source code

import {
  useNuxtApp,
  usePinia,
  useRequestFetch,
  useRequestHeader,
  useResponseHeader,
  useRuntimeConfig,
} from '#imports';
import { useOrionplaceStore } from '@/stores/orionplace';
import { useOrionplaceSelectionsStore } from '@/stores/orionplaceSelections';
import { useOrionplaceAppLoad } from '@/composables/useOrionplaceAppLoad';
import { OrionplaceApi } from '@/utils/orionplace/api';
import type {
  OrionplaceApiRequest,
  OrionplaceApiResponse,
} from '@/utils/orionplace/api';
import { createOrionplaceCookieJar } from '@/utils/orionplace/serverCookies';
import {
  nativeAppCookies,
  nativeAppOrigin,
  nativeAppRequest,
} from '@/utils/orionplace/nativeApp';

interface OrionplaceClients {
  browser: OrionplaceApi;
  server: OrionplaceApi;
}

// One entry per Nuxt application: one browser session, or one server render.
const clients = new WeakMap<object, OrionplaceClients>();

function createClients(): OrionplaceClients {
  const nuxt            = useNuxtApp();
  const store           = useOrionplaceStore(usePinia());
  const selections      = useOrionplaceSelectionsStore();
  const requestFetch    = useRequestFetch();
  // A server render sends the visitor's cookies and the cookies the backend
  // set earlier in the same render; see utils/orionplace/serverCookies.ts.
  const jar             = import.meta.server
    ? createOrionplaceCookieJar(useRequestHeader('cookie'))
    : undefined;
  const responseCookies = import.meta.server
    ? useResponseHeader('set-cookie')
    : undefined;
  // The Android app sends its requests to the public storefront; see
  // utils/orionplace/nativeApp.ts. Empty on the website.
  const appOrigin       = nativeAppOrigin(
    useRuntimeConfig().public.orionplaceAppOrigin,
  );

  // Every cookie the backend sets during a server render reaches the
  // browser as its own Set-Cookie header, unchanged.
  function relay(cookies: string[]) {
    if (!responseCookies || !cookies.length) {
      return;
    }

    const existing        = responseCookies.value;
    const existingCookies = Array.isArray(existing) ? [...existing] : [];

    if (existing && !Array.isArray(existing)) {
      existingCookies.push(String(existing));
    }

    responseCookies.value = [...existingCookies, ...cookies];
  }

  const transport       = async (
    path: string,
    request: OrionplaceApiRequest,
  ): Promise<OrionplaceApiResponse> => {
    if (appOrigin) {
      return nativeAppRequest(appOrigin, path, request);
    }
    let received: OrionplaceApiResponse | undefined;
    // A server render's own API call copies the visitor's request headers.
    // A visitor who follows a link from another site arrives with
    // `Sec-Fetch-Site: cross-site` (and a form post with a foreign Origin);
    // the gateway's cross-site check would refuse the render's call and the
    // page would answer 503. The call comes from this server, so it is sent
    // as same-origin without the visitor's Origin.
    const headers = jar
      ? {
          ...request.headers,
          cookie: jar.header(),
          origin: '',
          'sec-fetch-site': 'same-origin',
          'sec-fetch-mode': 'cors',
          'sec-fetch-dest': 'empty',
        }
      : request.headers;

    await requestFetch<unknown>(path, {
      method: request.method,
      headers,
      body: request.method === 'GET' ? undefined : request.data,
      query:
        request.method === 'GET' && !(request.data instanceof FormData)
          ? request.data
          : undefined,
      signal: request.signal,
      credentials: 'same-origin',
      cache: 'no-store',
      retry: 0,
      timeout: 35_000,
      ignoreResponseError: true,
      onResponse({ response }) {
        received = {
          body: response._data,
          status: response.status,
          cookies: import.meta.server ? response.headers.getSetCookie() : [],
          headers: {
            'content-type': response.headers.get('content-type') ?? '',
            'content-disposition':
              response.headers.get('content-disposition') ?? '',
          },
        };
      },
    });

    if (!received) {
      throw new Error('The API returned no response.');
    }

    jar?.apply(received.cookies);
    relay(received.cookies);

    return received;
  };

  const shared          = {
    transport,
    endpoints: () => store.endpoints,
    cookies: () =>
      jar ? jar.header() : appOrigin ? nativeAppCookies() : document.cookie,
    locale: () => store.localeCode,
    isSignedIn: () => store.isAuthenticated,
    // The customer's currency for orders and plan purchases (CURRENCY_REQUESTS).
    currency: () => selections.currencyId,
  };

  return {
    // Components send their requests in the browser. During a server render
    // this client sends only Application Load, so a request started while
    // the page renders cannot outlive the render.
    browser: new OrionplaceApi({
      ...shared,
      canRequest: () => import.meta.client,
      // HTTP 401 ended the customer's session: show the guest storefront.
      // This never opens sign-in and never repeats the failed request.
      onSessionEnded: () =>
        nuxt.runWithContext(() => useOrionplaceAppLoad().endSession()),
    }),
    // Page data that the server render awaits; see useOrionplaceServerData.
    // A failed server request leaves the page to the browser, which loads
    // the data again and handles an ended session there.
    server: new OrionplaceApi(shared),
  };
}

function useOrionplaceClients() {
  const nuxt     = useNuxtApp();
  const existing = clients.get(nuxt);

  if (existing) {
    return existing;
  }

  const created  = createClients();
  clients.set(nuxt, created);

  return created;
}

export function useOrionplaceApi() {
  return useOrionplaceClients().browser;
}

/**
 * The client for page data loaded during a server render. It shares the
 * transport, endpoint discovery, cookies and CSRF handling with
 * `useOrionplaceApi`. Use it through `useOrionplaceServerData`, which
 * awaits the request before the page renders.
 */
export function useOrionplaceServerApi() {
  return useOrionplaceClients().server;
}

`app/utils/orionplace/api.ts`

Owns the Application Load bootstrap and resolves browser requests by url_name from current discovery. It reads the current CSRF token per request and deduplicates renewal. A CSRF rejection renews the token for the next action and returns the error. The customer retries explicitly; failed requests are never repeated automatically.

Source code

import type { IAppLoadPathObject } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonPath';
import type { TMethod } from '@/interfaces/orionplace/apiBase/TMethod';

export interface OrionplaceApiResponse {
  body: unknown;
  status: number;
  cookies: string[];
  headers?: Record<string, string>;
}

export type OrionplaceApiData = Record<string, unknown> | FormData;

export interface OrionplaceApiRequest {
  method: TMethod;
  data: OrionplaceApiData;
  headers: Record<string, string>;
  signal?: AbortSignal;
}

export type OrionplaceTransport = (
  path: string,
  request: OrionplaceApiRequest,
) => Promise<OrionplaceApiResponse>;

/**
 * The texts of the field errors, each once: OrionMarketplace often repeats a
 * field's error for the whole form.
 */
export function fieldErrorText(fields: Record<string, unknown>) {
  return [...new Set(Object.values(fields).filter(Boolean))].join(' ');
}

export class OrionplaceApiError extends Error {
  readonly kind: 'unavailable' | 'failed';
  readonly fields: Record<string, string>;
  readonly status?: number;
  readonly data?: unknown;
  // Error codes of the answer, such as `sign_in` when OrionMarketplace asks the visitor
  // to sign in first.
  readonly codes: string[];

  constructor(
    kind: 'unavailable' | 'failed',
    fields: Record<string, string> = {},
    status?: number,
    data?: unknown,
    codes: string[] = [],
  ) {
    super(fieldErrorText(fields) || kind);
    this.kind   = kind;
    this.fields = fields;
    this.status = status;
    this.data   = data;
    this.codes  = codes;
  }
}

/**
 * Requests whose amounts the backend counts in the customer's currency: an
 * order, a preorder and a plan purchase are priced and charged in it. The
 * client adds the selected currency to them (unless the caller set one).
 */
export const CURRENCY_REQUESTS = new Set([
  'orders_create',
  'preorders_create',
  'subscriptions_subscribe',
  'subscriptions_renew',
  'subscriptions_change_renew',
  'subscriptions_change_tariff',
  'subscriptions_change_option',
]);

export class OrionplaceApi {
  private renewal: Promise<void> | undefined;
  private sessionEnding: Promise<void> | undefined;
  private transport: OrionplaceTransport;
  private endpoints: () => IAppLoadPathObject;
  private cookies: () => string;
  private locale: () => string;
  private canRequest: () => boolean;
  private isSignedIn: () => boolean;
  private currency: () => string | number | undefined;
  private onSessionEnded: (() => unknown) | undefined;

  constructor(options: {
    transport: OrionplaceTransport;
    endpoints: () => IAppLoadPathObject;
    cookies: () => string;
    locale?: () => string;
    canRequest?: () => boolean;
    isSignedIn?: () => boolean;
    currency?: () => string | number | undefined;
    onSessionEnded?: () => unknown;
  }) {
    this.transport      = options.transport;
    this.endpoints      = options.endpoints;
    this.cookies        = options.cookies;
    this.locale         = options.locale ?? (() => '');
    this.canRequest     = options.canRequest ?? (() => true);
    this.isSignedIn     = options.isSignedIn ?? (() => false);
    this.currency       = options.currency ?? (() => undefined);
    this.onSessionEnded = options.onSessionEnded;
  }

  /** The guest refresh started by the latest HTTP 401, while it runs. */
  get sessionEnd() {
    return this.sessionEnding;
  }

  applicationLoad(signal: AbortSignal, locale = '') {
    return this.send(
      '/api/appload',
      'POST',
      {
        detalize_mode: 'light',
        ignore_cache: false,
      },
      signal,
      locale,
    );
  }

  async request<T>(
    name: string,
    data: OrionplaceApiData,
    signal?: AbortSignal,
    params: Record<string, number> = {},
  ): Promise<T> {
    return this.successData<T>(
      await this.requestResponse(name, data, signal, params),
    );
  }

  async requestResponse(
    name: string,
    data: OrionplaceApiData,
    signal?: AbortSignal,
    params: Record<string, number> = {},
  ): Promise<OrionplaceApiResponse> {
    if (!this.canRequest()) {
      throw new OrionplaceApiError('unavailable');
    }
    const discovered       = Object.values(this.endpoints())
      .flatMap((section) => Object.values(section))
      .find((entry) => entry.url_name === name);
    const endpoint         =
      discovered ??
      (name === 'reload_customer_app'
        ? { target: 'api/reload_customer_app', methods: ['PATCH' as const] }
        : undefined);
    const method           = endpoint?.methods[0];
    let path               = `/${endpoint?.target.replace(/^\/+/, '') ?? ''}`;
    path                   = path.replace(/\{([a-zA-Z_][a-zA-Z0-9_]*)\}/g, (_, key: string) => {
      const value = params[key];
      if (!Number.isSafeInteger(value) || Number(value) <= 0) {
        throw new OrionplaceApiError('unavailable');
      }

      return String(value);
    });

    if (
      !endpoint ||
      !method ||
      !/^\/api\/[a-zA-Z0-9_/-]+(?:\.png)?$/.test(path)
    ) {
      throw new OrionplaceApiError('unavailable');
    }

    if (method === 'GET' && data instanceof FormData) {
      throw new OrionplaceApiError('unavailable');
    }
    const currency         = Number(this.currency());
    if (
      CURRENCY_REQUESTS.has(name) &&
      !(data instanceof FormData) &&
      data.currency === undefined &&
      Number.isSafeInteger(currency) &&
      currency > 0
    ) {
      data = { ...data, currency };
    }
    const protectedRequest = method !== 'GET';
    if (protectedRequest && !this.csrfToken()) {
      await this.renewCsrf();
    }
    signal?.throwIfAborted();

    const response         = await this.send(path, method, data, signal);
    const body             = response.body as {
      page_data?: { csrf?: boolean };
    } | null;
    // A CSRF rejection: Django views answer 419, API endpoints answer 403
    // with page_data.csrf set to false. The request is not repeated.
    const csrfRejected     =
      response.status === 419 ||
      (response.status === 403 && body?.page_data?.csrf === false);
    // Renew for the next explicit action and retain this request's rejection.
    if (protectedRequest && csrfRejected) {
      await this.renewCsrf();
      signal?.throwIfAborted();
    }

    this.detectSessionEnd(response);
    signal?.throwIfAborted();
    return response;
  }

  /*
   * The backend answers HTTP 401 when the request has no signed-in session:
   * an authentication-required endpoint without a customer ({ auth: false }),
   * or a session the backend rejected and whose cookies it deleted.
   * A 401 while the application still shows a customer means the session
   * ended. One handler call serves concurrent failures; a guest 401, 403 and
   * CSRF rejection are ordinary request errors.
   */
  private detectSessionEnd(response: OrionplaceApiResponse) {
    if (
      response.status !== 401 ||
      this.sessionEnding ||
      !this.onSessionEnded ||
      !this.isSignedIn()
    ) {
      return;
    }

    let ending: Promise<void>;
    try {
      ending = Promise.resolve(this.onSessionEnded()).then(() => undefined);
    } catch (error) {
      ending = Promise.reject(error);
    }

    // The failed request reports its own error; the refresh has its own state.
    this.sessionEnding = ending
      .catch(() => undefined)
      .finally(() => {
        this.sessionEnding = undefined;
      });
  }

  private csrfToken() {
    return this.cookies().match(/(?:^|;\s*)csrftoken=([^;]*)/)?.[1] ?? '';
  }

  private localizedPath(path: string, requestedLocale = '') {
    const locale    = (requestedLocale || this.locale()).trim();
    if (!locale) {
      return path;
    }

    const separator = path.includes('?') ? '&' : '?';
    return `${path}${separator}lang=${encodeURIComponent(locale)}`;
  }

  private async renewCsrf() {
    if (!this.renewal) {
      this.renewal = this.send('/api/csrf_renew', 'POST', {})
        .then((response) => {
          this.detectSessionEnd(response);
          this.successData(response);
          if (!this.csrfToken()) {
            throw new OrionplaceApiError('failed');
          }
        })
        .finally(() => {
          this.renewal = undefined;
        });
    }
    await this.renewal;
  }

  private send(
    path: string,
    method: TMethod,
    data: OrionplaceApiData,
    signal?: AbortSignal,
    locale = '',
  ) {
    const headers: Record<string, string> = {
      Accept: 'application/json',
      ...(data instanceof FormData
        ? {}
        : { 'Content-Type': 'application/json' }),
    };
    const token                           = this.csrfToken();
    if (token) {
      headers['X-CSRFToken'] = token;
    }
    return this.transport(this.localizedPath(path, locale), {
      method,
      data,
      headers,
      signal,
    });
  }

  private successData<T>(response: OrionplaceApiResponse): T {
    const body = response.body as {
      form_errors?: unknown;
      success_message?: unknown;
      page_data?: T;
    } | null;
    if (
      response.status < 200 ||
      response.status >= 300 ||
      body?.form_errors !== null ||
      typeof body.success_message !== 'string' ||
      !body.success_message
    ) {
      const fields = Object.fromEntries(
        Object.entries(body?.form_errors ?? {}).map(([name, entries]) => [
          name,
          Array.isArray(entries)
            ? entries.map((entry) => String(entry?.message ?? '')).join(' ')
            : '',
        ]),
      );
      const codes  = Object.values(body?.form_errors ?? {})
        .flatMap((entries) => (Array.isArray(entries) ? entries : []))
        .map((entry) => String(entry?.code ?? ''))
        .filter(Boolean);
      throw new OrionplaceApiError(
        'failed',
        fields,
        response.status,
        body?.page_data,
        codes,
      );
    }
    return body.page_data as T;
  }
}

`app/stores/orionplace.ts`

useOrionplaceStore(): Component accessor for the coordinated stores shown below.
store.result: Load result: response body, HTTP status and retrieval time.
store.result?.response: Complete API response body.
store.data: Application data from the API response.
store.init: Initial storefront data. The links above lead to each field, its component and source code.
store.profile: Customer profile, when included in the response.

useOrionplaceStore() owns the Application Load response, load status, profile, wallet and endpoint discovery. Components read selections, catalog data, products and browse state through their domain store hooks. It coordinates refresh, reset and session changes across the smaller stores.

Source code

import type { IApploadUserProfile } from '@/interfaces/orionplace/appBase/IApploadUserProfile';
import {
  computed,
  ref,
  shallowRef,
  hasInjectionContext,
  inject,
  provide,
} from 'vue';
import type { InjectionKey, Ref } from 'vue';
import type { Pinia } from 'pinia';
import { defineStore, getActivePinia, storeToRefs } from 'pinia';
import { useOrionplaceSelections } from '@/stores/orionplaceSelections';
import { useOrionplaceBrowse } from '@/stores/orionplaceBrowse';
import { useOrionplaceCatalog } from '@/stores/orionplaceCatalog';
import { useOrionplaceProducts } from '@/stores/orionplaceProducts';
import {
  attachOrionplaceDomainStores,
  registerOrionplaceDomainResolver,
  registerOrionplaceDomainStores,
  releaseOrionplaceDomainStores,
} from '@/stores/orionplaceDomainAccess';
import {
  guestAppLoadResult,
  guestProduct,
} from '@/utils/orionplace/guestSession';
import type { IProduct } from '@/interfaces/orionplace/products/IProduct';
import type {
  AppLoadFailure,
  AppLoadResult,
  AppLoadLoader,
  AppLoadStatus,
  IAppLoadPathObject,
} from '@/interfaces/orionplace';

function forwardedState<T>(source: Ref<T>) {
  return computed({
    get: () => source.value,
    set: (value: T) => {
      source.value = value;
    },
  });
}

/** One instance per Nuxt SSR request; @pinia/nuxt hydrates it into the browser. */
function createStoreState(scope: string, pinia: Pinia) {
  const result                           = shallowRef<AppLoadResult | null>(null);
  const status                           = ref<AppLoadStatus>('idle');
  const failure                          = shallowRef<AppLoadFailure | null>(null);
  const isReady                          = computed(
    () => status.value === 'success' && result.value !== null,
  );
  const data                             = computed(() => result.value?.response.page_data ?? null);
  const init                             = computed(() => data.value?.init ?? null);
  const profile                          = computed(() => data.value?.user ?? null);
  const isAuthenticated                  = computed(() => init.value?.is_authenticated ?? false);
  const selections                       = useOrionplaceSelections(
    scope,
    pinia,
    init,
  );
  const selectionRefs                    = storeToRefs(selections);
  const {
    locales,
    currencies,
    weights,
    lengths,
    currentLocale,
    currentCurrency,
  }                                      = selectionRefs;
  const localeCode                       = forwardedState(selectionRefs.localeCode);
  const currencyId                       = forwardedState(selectionRefs.currencyId);
  const weightId                         = forwardedState(selectionRefs.weightId);
  const lengthId                         = forwardedState(selectionRefs.lengthId);
  const {
    setLocale,
    setCurrency,
    setUnit,
  }                                      = selections;
  const catalogState                     = useOrionplaceCatalog(
    scope,
    pinia,
    init,
  );
  const catalogRefs                      = storeToRefs(catalogState);
  const {
    catalog,
    tariffs,
    storeTariffs,
    products,
    featured,
    catalogRoots,
    catalogShortcuts,
    catalogCategories,
  }                                      = catalogRefs;
  const catalogSnapshot                  = forwardedState(catalogRefs.catalogSnapshot);
  const tariffsSnapshot                  = forwardedState(catalogRefs.tariffsSnapshot);
  const {
    setCatalogTree,
    setTariffs,
    setStoreTariffs,
    getTariff,
    getCatalogCategory,
    getCatalogProducts,
  }                                      = catalogState;
  const productState                     = useOrionplaceProducts(
    scope,
    pinia,
    init,
    products,
    featured,
  );
  const productRefs                      = storeToRefs(productState);
  const {
    homeProductSections,
    counters,
  }                                      = productRefs;
  const homeNewProductIds                = forwardedState(productRefs.homeNewProductIds);
  const productSecondaryVariants         = forwardedState(
    productRefs.productSecondaryVariants,
  );
  const productUpdates                   = forwardedState(productRefs.productUpdates);
  const productRequests                  = forwardedState(productRefs.productRequests);
  const {
    setHomeNewProducts,
    getProducts,
    getProduct,
    setProduct,
    patchProductState,
    getProductRequest,
    setProductRequest,
    getSecondaryVariants,
    synchronizeProductCart,
    setSecondaryVariants,
    getProductAvailability,
    setProductCounters,
  }                                      = productState;
  const browse                           = useOrionplaceBrowse(
    scope,
    pinia,
    init,
  );
  const browseRefs                       = storeToRefs(browse);
  const searchQuery                      = forwardedState(browseRefs.searchQuery);
  const searchFacets                     = forwardedState(browseRefs.searchFacets);
  const searchFilters                    = forwardedState(browseRefs.searchFilters);
  const blogPosts                        = forwardedState(browseRefs.blogPosts);
  const {
    setSearchFacets,
    preserveSearchFacets,
    setSearchFilters,
    setBlogPosts,
  }                                      = browse;
  registerOrionplaceDomainStores(pinia, scope, {
    selections,
    catalog: catalogState,
    products: productState,
    browse,
  });

  function patchProfile(value: Partial<IApploadUserProfile>) {
    const current = result.value;
    const page    = current?.response.page_data;
    if (!current || !page?.user || !isAuthenticated.value) {
      return;
    }
    result.value  = {
      ...current,
      response: {
        ...current.response,
        page_data: { ...page, user: { ...page.user, ...value } },
      },
    };
  }

  function patchWallet(
    wallet: NonNullable<NonNullable<typeof init.value>['wallet']>,
  ) {
    const current = result.value;
    const page    = current?.response.page_data;
    if (!current || !page?.init || !isAuthenticated.value) {
      return;
    }
    result.value  = {
      ...current,
      response: {
        ...current.response,
        page_data: { ...page, init: { ...page.init, wallet } },
      },
    };
  }

  function applyResult(value: AppLoadResult) {
    catalogState.reset();
    productState.reset();
    browse.resetResults();
    result.value                   = value;
    status.value                   = 'success';
    failure.value                  = null;
    selections.reconcile();
  }

  const publicEndpoints                  = computed(() => data.value?.unauth.paths ?? {});
  const authenticatedEndpoints           = computed(() =>
    isAuthenticated.value ? (data.value?.auth?.paths ?? {}) : {},
  );
  const endpoints                        = computed<IAppLoadPathObject>(() => {
    const merged: IAppLoadPathObject = {};
    for (const groups of [
      publicEndpoints.value,
      authenticatedEndpoints.value,
    ]) {
      for (const [section, paths] of Object.entries(groups)) {
        merged[section] = { ...merged[section], ...paths };
      }
    }
    return merged;
  });
  const getEndpoint                      = (section: string, name: string) =>
    endpoints.value[section]?.[name];

  // These belong to this store instance, never serialized state or a module-level cache.
  let pending: Promise<void> | null      = null;
  let controller: AbortController | null = null;
  let generation                         = 0;

  function reset() {
    generation++;
    controller?.abort();
    controller                     = null;
    pending                        = null;
    result.value                   = null;
    catalogState.reset();
    productState.reset();
    browse.reset();
    selections.reset();
    failure.value                  = null;
    status.value                   = 'idle';
  }

  /*
   * The shared API client calls this when a request answers HTTP 401 while
   * this store still shows a signed-in customer. The signed-in data is removed
   * at once, so the header and account pages show the guest state, and the
   * guest Application Load replaces the remaining snapshot in the background.
   * A guest store is left unchanged.
   */
  function endSession(loader: AppLoadLoader): Promise<void> {
    if (!isAuthenticated.value || !result.value) {
      return pending ?? Promise.resolve();
    }
    showGuestSnapshot(result.value);

    return load(loader, true, true);
  }

  function showGuestSnapshot(current: AppLoadResult) {
    const guestProducts            = (items: Record<number, IProduct>) =>
      Object.fromEntries(
        Object.entries(items).map(([id, item]) => [id, guestProduct(item)]),
      );

    generation++;
    controller?.abort();
    controller                     = null;
    pending                        = null;
    result.value                   = guestAppLoadResult(current);
    productState.clearSession();
    productUpdates.value           = {
      products: guestProducts(productUpdates.value.products),
      featured: guestProducts(productUpdates.value.featured),
    };
    for (const state of Object.values(productSecondaryVariants.value)) {
      for (const variant of state.data?.variants ?? []) {
        variant.product = guestProduct(variant.product);
      }
    }
  }

  /*
   * `preserve` keeps the current snapshot visible while the replacement loads.
   * It is used only after `endSession` has already removed signed-in data.
   */
  function load(
    loader: AppLoadLoader,
    force = false,
    preserve = false,
  ): Promise<void> {
    if (pending) {
      return pending;
    }
    // Reuse both SSR success and failure on hydration/navigation; retry is explicit.
    if (!force && status.value !== 'idle') {
      return Promise.resolve();
    }
    const current                  = ++generation;
    controller                     = new AbortController();
    const signal                   = controller.signal;
    if (!preserve) {
      catalogState.reset();
      productState.reset();
      browse.resetResults();
      result.value                 = null;
      failure.value                = null;
      status.value                 = 'pending';
    }
    pending                        = Promise.resolve()
      .then(() => loader(signal))
      .then((value) => {
        if (current !== generation) {
          return;
        }
        applyResult(value);
      })
      .catch((error: unknown) => {
        if (current !== generation) {
          return;
        }
        const detail  =
          error && typeof error === 'object' && 'data' in error
            ? error.data
            : null;
        const known   =
          detail &&
          typeof detail === 'object' &&
          'kind' in detail &&
          ['http', 'validation', 'invalid-response', 'network'].includes(
            String(detail.kind),
          );
        failure.value = known
          ? {
              kind: detail.kind as AppLoadFailure['kind'],
              httpStatus:
                'httpStatus' in detail && typeof detail.httpStatus === 'number'
                  ? detail.httpStatus
                  : null,
              fields:
                'fields' in detail && Array.isArray(detail.fields)
                  ? detail.fields.filter(
                      (field): field is string => typeof field === 'string',
                    )
                  : [],
            }
          : { kind: 'network', httpStatus: null, fields: [] };
        result.value  = null;
        status.value  = 'error';
      })
      .finally(() => {
        if (current !== generation) {
          return;
        }
        pending    = null;
        controller = null;
      });
    return pending;
  }

  function disposeChildren() {
    selections.$dispose();
    catalogState.$dispose();
    productState.$dispose();
    browse.$dispose();
  }


  return {
    result,
    status,
    failure,
    isReady,
    data,
    init,
    profile,
    patchProfile,
    patchWallet,
    isAuthenticated,
    locales,
    currencies,
    catalog,
    catalogSnapshot,
    setCatalogTree,
    catalogRoots,
    catalogShortcuts,
    catalogCategories,
    products,
    tariffs,
    tariffsSnapshot,
    setTariffs,
    storeTariffs,
    setStoreTariffs,
    featured,
    homeNewProductIds,
    homeProductSections,
    setHomeNewProducts,
    weights,
    lengths,
    localeCode,
    currencyId,
    weightId,
    lengthId,
    searchQuery,
    searchFacets,
    searchFilters,
    blogPosts,
    setSearchFacets,
    preserveSearchFacets,
    setSearchFilters,
    setBlogPosts,
    currentLocale,
    currentCurrency,
    setLocale,
    setCurrency,
    setUnit,
    getProducts,
    getTariff,
    getProduct,
    productUpdates,
    productRequests,
    getProductRequest,
    setProductRequest,
    counters,
    setProductCounters,
    setProduct,
    patchProductState,
    synchronizeProductCart,
    productSecondaryVariants,
    getSecondaryVariants,
    setSecondaryVariants,
    getProductAvailability,
    getCatalogCategory,
    getCatalogProducts,
    applyResult,
    publicEndpoints,
    authenticatedEndpoints,
    endpoints,
    getEndpoint,
    load,
    endSession,
    reset,
    disposeChildren,
  };
}

type OrionplaceStore = ReturnType<typeof createOrionplaceStore>;
const storeScope: InjectionKey<OrionplaceStore>  = Symbol('orionplace:store');
const wrappedStores                              = new WeakSet<object>();

// Scoped previews use another instance in the same Pinia, never another global app.
export function provideOrionplaceStore(store: OrionplaceStore) {
  provide(storeScope, store);
}

export function createOrionplaceStore(id: string, pinia: Pinia) {
  const store = defineStore(id, () => createStoreState(id, pinia))(pinia);
  attachOrionplaceDomainStores(store, pinia, id);
  if (!wrappedStores.has(store)) {
    const dispose = store.$dispose.bind(store);
    store.$dispose = () => {
      store.disposeChildren();
      dispose();
      releaseOrionplaceDomainStores(store, pinia, id);
      for (const key of [
        id,
        `${id}:selections`,
        `${id}:catalog`,
        `${id}:products`,
        `${id}:browse`,
      ]) {
        delete pinia.state.value[key];
      }
    };
    wrappedStores.add(store);
  }
  return store;
}

export const useOrionplaceStore                 = Object.assign(
  (pinia?: Pinia | null) => {
    const scoped = hasInjectionContext() ? inject(storeScope, null) : null;
    if (pinia) {
      return createOrionplaceStore('orionplace', pinia);
    }
    if (scoped) {
      return scoped;
    }
    return createOrionplaceStore('orionplace', getActivePinia()!);
  },
  { $id: 'orionplace' },
);

registerOrionplaceDomainResolver(
  () => useOrionplaceStore(),
);

`app/stores/orionplaceSelections.ts`

Keeps the selected language, currency, weight unit and length unit. A locale change selects its configured defaults; an Application Load refresh preserves choices that remain available.

Source code

import { computed, ref } from 'vue';
import type { ComputedRef } from 'vue';
import { defineStore } from 'pinia';
import type { Pinia } from 'pinia';
import { resolveOrionplaceDomain } from '@/stores/orionplaceDomainAccess';
import '@/stores/orionplace';
import type { IAppLoadCommon } from '@/interfaces/orionplace/appBase/IAppLoadCommon';

/** Customer choices shared by the storefront's language, currency and unit controls. */
export function useOrionplaceSelections(
  scope: string,
  pinia: Pinia,
  init: ComputedRef<IAppLoadCommon | null>,
) {
  return defineStore(`${scope}:selections`, () => {
    const localeCode      = ref('');
    const currencyId      = ref('');
    const weightId        = ref('');
    const lengthId        = ref('');
    const locales         = computed(() => init.value?.locale ?? {});
    const currencies      = computed(() => init.value?.currencies ?? {});
    const weights         = computed(() => init.value?.weights ?? {});
    const lengths         = computed(() => init.value?.lengths ?? {});
    const currentLocale   = computed(() => findLocale(localeCode.value)?.[1]);
    const currentCurrency = computed(() => currencies.value[currencyId.value]);

    function findLocale(code: string) {
      return Object.entries(locales.value).find(
        ([key, value]) =>
          (value.code?.trim() || key).toLowerCase() === code.trim().toLowerCase(),
      );
    }

    function unitId(values: Record<string, unknown>, preferred?: number | string) {
      const id = String(preferred ?? '');
      return Object.hasOwn(values, id) ? id : (Object.keys(values)[0] ?? '');
    }

    function availableCurrency(preferred?: number | string) {
      const id = String(preferred ?? '');
      if (currencies.value[id]?.allowed_select) {
        return id;
      }
      return Object.keys(currencies.value).find(
        (key) => currencies.value[key]?.allowed_select,
      ) ?? '';
    }

    function setLocale(code: string) {
      const entry = findLocale(code);
      if (!entry) {
        return;
      }
      localeCode.value = entry[1].code?.trim() || entry[0];
      currencyId.value = availableCurrency(entry[1].currency);
      weightId.value   = unitId(weights.value, entry[1].weight);
      lengthId.value   = unitId(lengths.value, entry[1].length);
    }

    function setCurrency(id: string) {
      if (currencies.value[id]?.allowed_select) {
        currencyId.value = id;
      }
    }

    function setUnit(kind: 'weights' | 'lengths', id: string) {
      const values = kind === 'weights' ? weights.value : lengths.value;
      if (!Object.hasOwn(values, id)) {
        return;
      }
      if (kind === 'weights') {
        weightId.value = id;
      } else {
        lengthId.value = id;
      }
    }

    function reconcile() {
      const selected   = findLocale(localeCode.value) ?? Object.entries(locales.value)[0];
      localeCode.value = selected?.[1].code?.trim() || selected?.[0] || '';
      currencyId.value = availableCurrency(
        currencies.value[currencyId.value]?.allowed_select
          ? currencyId.value
          : selected?.[1].currency,
      );
      weightId.value = unitId(
        weights.value,
        Object.hasOwn(weights.value, weightId.value)
          ? weightId.value
          : selected?.[1].weight,
      );
      lengthId.value = unitId(
        lengths.value,
        Object.hasOwn(lengths.value, lengthId.value)
          ? lengthId.value
          : selected?.[1].length,
      );
    }

    function reset() {
      localeCode.value = '';
      currencyId.value = '';
      weightId.value   = '';
      lengthId.value   = '';
    }

    return {
      localeCode,
      currencyId,
      weightId,
      lengthId,
      locales,
      currencies,
      weights,
      lengths,
      currentLocale,
      currentCurrency,
      setLocale,
      setCurrency,
      setUnit,
      reconcile,
      reset,
    };
  })(pinia);
}

/** Access the selection store associated with the current storefront scope. */
export function useOrionplaceSelectionsStore() {
  return resolveOrionplaceDomain<ReturnType<typeof useOrionplaceSelections>>(
    'selections',
  );
}

`app/stores/orionplaceCatalog.ts`

Reads the initial category, product and tariff collections from Application Load. Successful catalog and tariff requests can replace their respective lists until the next refresh.

Source code

import { computed, shallowRef } from 'vue';
import type { ComputedRef } from 'vue';
import { defineStore } from 'pinia';
import type { Pinia } from 'pinia';
import { resolveOrionplaceDomain } from '@/stores/orionplaceDomainAccess';
import '@/stores/orionplace';
import type { IAppLoadCommon } from '@/interfaces/orionplace/appBase/IAppLoadCommon';
import {
  navigationCatalogCategories,
  findCatalogCategory,
  catalogRepresentatives,
} from '@/utils/orionplace/catalog';
import { resolveAppLoadProducts } from '@/utils/orionplace/productSeller';

/**
 * Application Load collections and the later catalog and tariff responses.
 * `storeTariffs` is every plan the storefront sells; the subscriptions page
 * and its dialogs read it. `tariffs` is what the plan pages show: the same
 * list, or a search result or one plan set with `setTariffs`.
 * `usedSubscriptions` holds the subscription records the signed-in customer
 * already had, for the profile that loaded them; a new Application Load
 * keeps it, another profile ignores it.
 */
export function useOrionplaceCatalog(
  scope: string,
  pinia: Pinia,
  init: ComputedRef<IAppLoadCommon | null>,
) {
  return defineStore(`${scope}:catalog`, () => {
    const catalogSnapshot      = shallowRef<NonNullable<IAppLoadCommon['catalog']>>();
    const tariffsSnapshot      = shallowRef<NonNullable<IAppLoadCommon['tariffs']>>();
    const storeTariffsSnapshot = shallowRef<NonNullable<IAppLoadCommon['tariffs']>>();
    const usedSubscriptions    = shallowRef<{ profile: number; ids: number[] }>();
    const catalog              = computed(
      () => catalogSnapshot.value ?? init.value?.catalog ?? [],
    );
    const storeTariffs         = computed(
      () => storeTariffsSnapshot.value ?? init.value?.tariffs ?? null,
    );
    const tariffs              = computed(
      () => tariffsSnapshot.value ?? storeTariffs.value,
    );
    const products             = computed(() =>
      resolveAppLoadProducts(init.value?.products, init.value?.sellers),
    );
    const featured             = computed(() =>
      resolveAppLoadProducts(init.value?.featured, init.value?.sellers),
    );
    const catalogRoots         = computed(() => navigationCatalogCategories(catalog.value));
    const catalogShortcuts     = computed(() =>
      catalogRoots.value.filter((category) => category.separate_menu),
    );
    const catalogCategories    = computed(() => {
      const categories = catalogRoots.value.filter(
        (category) => !category.separate_menu,
      );
      return categories.length ? categories : catalogRoots.value;
    });

    function setCatalogTree(tree: NonNullable<IAppLoadCommon['catalog']>) {
      catalogSnapshot.value = tree;
    }

    /** A search result or one plan: only the plan pages show it. */
    function setTariffs(value: NonNullable<IAppLoadCommon['tariffs']>) {
      tariffsSnapshot.value = value;
    }

    /** The complete plan list of the storefront, loaded after Application Load. */
    function setStoreTariffs(value: NonNullable<IAppLoadCommon['tariffs']>) {
      storeTariffsSnapshot.value = value;
      tariffsSnapshot.value      = undefined;
    }

    /** The records the customer had, see `tariffUsedSubscriptions`. */
    function setUsedSubscriptions(profile: number, ids: number[]) {
      usedSubscriptions.value = { profile, ids };
    }

    /** Those records for this profile; undefined until they are loaded. */
    function usedSubscriptionsOf(profile: number | undefined) {
      return usedSubscriptions.value &&
        usedSubscriptions.value.profile === profile
        ? usedSubscriptions.value.ids
        : undefined;
    }

    function getTariff(id: number) {
      return tariffs.value?.data.find((tariff) => tariff.id === id);
    }

    function getCatalogCategory(id: number) {
      return findCatalogCategory(catalog.value, id);
    }

    function getCatalogProducts(categoryId: number) {
      return catalogRepresentatives(
        getCatalogCategory(categoryId),
        products.value,
        featured.value,
      );
    }

    function reset() {
      catalogSnapshot.value      = undefined;
      tariffsSnapshot.value      = undefined;
      storeTariffsSnapshot.value = undefined;
    }

    return {
      catalogSnapshot,
      tariffsSnapshot,
      storeTariffsSnapshot,
      usedSubscriptions,
      catalog,
      tariffs,
      storeTariffs,
      products,
      featured,
      catalogRoots,
      catalogShortcuts,
      catalogCategories,
      setCatalogTree,
      setTariffs,
      setStoreTariffs,
      setUsedSubscriptions,
      usedSubscriptionsOf,
      getTariff,
      getCatalogCategory,
      getCatalogProducts,
      reset,
    };
  })(pinia);
}

/** Access the catalog store associated with the current storefront scope. */
export function useOrionplaceCatalogStore() {
  return resolveOrionplaceDomain<ReturnType<typeof useOrionplaceCatalog>>(
    'catalog',
  );
}

`app/stores/orionplaceProducts.ts`

Keeps product changes, secondary variants, home product groups and cart and wishlist counters. Confirmed actions update these values; Application Load refresh clears them.

Source code

import { computed, ref } from 'vue';
import type { ComputedRef } from 'vue';
import { defineStore } from 'pinia';
import type { Pinia } from 'pinia';
import { resolveOrionplaceDomain } from '@/stores/orionplaceDomainAccess';
import '@/stores/orionplace';
import type { IAppLoadCommon } from '@/interfaces/orionplace/appBase/IAppLoadCommon';
import type {
  IProduct,
  IProductSearchSeller,
} from '@/interfaces/orionplace/products/IProduct';
import type { IProductSecondaryVariantState } from '@/interfaces/orionplace/products/IProductSecondaryVariantRequest';
import { homeProductSections as groupHomeProducts } from '@/utils/orionplace/homeContent';
import { productAvailability } from '@/utils/orionplace/productAvailability';
import { productWithSellerPermission } from '@/utils/orionplace/productSeller';

/** Products shared by cards, cart actions and variant selectors. */
export function useOrionplaceProducts(
  scope: string,
  pinia: Pinia,
  init: ComputedRef<IAppLoadCommon | null>,
  products: ComputedRef<IProduct[]>,
  featured: ComputedRef<IProduct[]>,
) {
  return defineStore(`${scope}:products`, () => {
    const homeNewProductIds                = ref<number[] | null>(null);
    const homeProductSections              = computed(() =>
      groupHomeProducts(products.value, featured.value, homeNewProductIds.value),
    );

    function setHomeNewProducts(
      items: IProduct[],
      sellers: IProductSearchSeller[] = [],
    ) {
      if (!init.value) {
        return;
      }
      for (const product of items) {
        setProduct(product, 'products', sellers);
      }
      homeNewProductIds.value = items.map((product) => product.id);
    }

    const productSecondaryVariants         = ref<
      Record<string, IProductSecondaryVariantState>
    >({});
    const productCounters                  = ref<{
      c_cart_positions?: number;
      c_wishlist?: number;
    }>({});
    const counters                         = computed(() => ({
      ...init.value?.variables,
      ...productCounters.value,
    }));

    function setProductCounters(values: {
      c_cart_positions?: number;
      c_wishlist?: number;
    }) {
      productCounters.value = { ...productCounters.value, ...values };
    }

    const productUpdates                   = ref<{
      products: Record<number, IProduct>;
      featured: Record<number, IProduct>;
    }>({ products: {}, featured: {} });
    // Variant targets the host is loading for a card; see useOrionplaceProductVariants.
    const productRequests                  = ref<
      Record<number, 'loading' | 'failed'>
    >({});
    function getProducts(collection: 'products' | 'featured' = 'products') {
      return collection === 'featured' ? featured.value : products.value;
    }

    function getProduct(
      id: number,
      collection: 'products' | 'featured' = 'products',
    ) {
      return (
        productUpdates.value[collection][id] ??
        getProducts(collection).find((product) => product.id === id)
      );
    }

    function setProduct(
      product: IProduct,
      collection: 'products' | 'featured' = 'products',
      sellers: IProductSearchSeller[] = [],
    ) {
      if (init.value && Number.isInteger(product.id) && product.id > 0) {
        productUpdates.value[collection][product.id] =
          productWithSellerPermission(product, sellers);
      }
    }

    function patchProductState(
      id: number,
      patch: Partial<
        Pick<
          IProduct,
          | 'cart_counts'
          | 'whishlist_id'
          | 'subscription_id'
          | 'c_real_left'
          | 'seller'
        >
      >,
    ) {
      for (const collection of ['products', 'featured'] as const) {
        const product = getProduct(id, collection);
        if (product) {
          setProduct({ ...product, ...patch }, collection);
        }
      }
      for (const state of Object.values(productSecondaryVariants.value)) {
        for (const variant of state.data?.variants ?? []) {
          if (variant.product.id === id) {
            variant.product = { ...variant.product, ...patch };
          }
        }
      }
    }

    function getProductRequest(id: number) {
      return productRequests.value[id];
    }

    function setProductRequest(id: number, state?: 'loading' | 'failed') {
      if (!Number.isInteger(id) || id <= 0) {
        return;
      }

      if (state) {
        productRequests.value[id] = state;
      } else {
        delete productRequests.value[id];
      }
    }

    function getSecondaryVariants(
      productGroup: number,
      mainVariantValue: number,
    ) {
      return productSecondaryVariants.value[
        `${productGroup}:${mainVariantValue}`
      ];
    }

    function synchronizeProductCart(items: IProduct[]) {
      const counts = new Map(
        items.map((item) => [item.id, item.cart_counts ?? null]),
      );
      for (const collection of ['products', 'featured'] as const) {
        const cached = new Map([
          ...getProducts(collection).map((item) => [item.id, item] as const),
          ...Object.values(productUpdates.value[collection]).map(
            (item) => [item.id, item] as const,
          ),
        ]);
        for (const product of cached.values()) {
          productUpdates.value[collection][product.id] = {
            ...product,
            cart_counts: counts.get(product.id) ?? null,
          };
        }
      }
      for (const state of Object.values(productSecondaryVariants.value)) {
        for (const variant of state.data?.variants ?? []) {
          variant.product = {
            ...variant.product,
            cart_counts: counts.get(variant.product.id) ?? null,
          };
        }
      }
    }

    function setSecondaryVariants(
      productGroup: number,
      mainVariantValue: number,
      state: IProductSecondaryVariantState,
    ) {
      if (
        init.value &&
        Number.isInteger(productGroup) &&
        productGroup > 0 &&
        Number.isInteger(mainVariantValue) &&
        mainVariantValue > 0
      ) {
        productSecondaryVariants.value[`${productGroup}:${mainVariantValue}`] =
          state;
      }
    }

    function getProductAvailability(
      id: number,
      collection: 'products' | 'featured' = 'products',
    ) {
      const product = getProduct(id, collection);
      return productAvailability(product, init.value?.variables?.allow_preorder);
    }

    function resetHome() {
      homeNewProductIds.value = null;
    }

    function clearSession() {
      productRequests.value = {};
      productCounters.value = {};
    }

    function reset() {
      resetHome();
      productSecondaryVariants.value = {};
      productUpdates.value           = { products: {}, featured: {} };
      clearSession();
    }

    return {
      homeNewProductIds,
      homeProductSections,
      setHomeNewProducts,
      productSecondaryVariants,
      productCounters,
      counters,
      setProductCounters,
      productUpdates,
      productRequests,
      getProducts,
      getProduct,
      setProduct,
      patchProductState,
      getProductRequest,
      setProductRequest,
      getSecondaryVariants,
      synchronizeProductCart,
      setSecondaryVariants,
      getProductAvailability,
      clearSession,
      reset,
    };
  })(pinia);
}

/** Access the product store associated with the current storefront scope. */
export function useOrionplaceProductsStore() {
  return resolveOrionplaceDomain<ReturnType<typeof useOrionplaceProducts>>(
    'products',
  );
}

`app/stores/orionplaceBrowse.ts`

Keeps the search query, selected filters, search choices and journal posts. Search and journal requests fill these values; Application Load refresh clears results while keeping the query.

Source code

import { ref, shallowRef } from 'vue';
import type { ComputedRef } from 'vue';
import { defineStore } from 'pinia';
import type { Pinia } from 'pinia';
import { resolveOrionplaceDomain } from '@/stores/orionplaceDomainAccess';
import '@/stores/orionplace';
import type { IAppLoadCommon } from '@/interfaces/orionplace/appBase/IAppLoadCommon';
import type { IBlogPostPreview } from '@/interfaces/orionplace/blog/IBlogPostPreview';
import type {
  IProductSearchFacets,
  ProductFacetSelection,
} from '@/interfaces/orionplace/products/IProductSearchFacets';
import {
  cloneSearchFilters,
  initialSearchFacets,
} from '@/utils/orionplace/searchFilters';

/** Search choices and journal results loaded after Application Load. */
export function useOrionplaceBrowse(
  scope: string,
  pinia: Pinia,
  init: ComputedRef<IAppLoadCommon | null>,
) {
  return defineStore(`${scope}:browse`, () => {
    const searchQuery   = ref('');
    const searchFacets  = shallowRef<IProductSearchFacets | null>(null);
    const searchFilters = ref<ProductFacetSelection>({});
    const blogPosts     = shallowRef<IBlogPostPreview[]>([]);

    function setSearchFacets(value: IProductSearchFacets | null) {
      searchFacets.value = value;
    }

    function preserveSearchFacets(value: IProductSearchFacets) {
      searchFacets.value = initialSearchFacets(searchFacets.value, value);
    }

    function setSearchFilters(value: ProductFacetSelection) {
      const selected = cloneSearchFilters(value);
      if (init.value?.visual_settings?.single_seller_mode) {
        delete selected.product_owner;
      }
      searchFilters.value = selected;
    }

    function setBlogPosts(value: IBlogPostPreview[]) {
      blogPosts.value = [...value];
    }

    function resetResults() {
      searchFacets.value  = null;
      searchFilters.value = {};
      blogPosts.value     = [];
    }

    function reset() {
      resetResults();
      searchQuery.value = '';
    }

    return {
      searchQuery,
      searchFacets,
      searchFilters,
      blogPosts,
      setSearchFacets,
      preserveSearchFacets,
      setSearchFilters,
      setBlogPosts,
      resetResults,
      reset,
    };
  })(pinia);
}

/** Access the browse store associated with the current storefront scope. */
export function useOrionplaceBrowseStore() {
  return resolveOrionplaceDomain<ReturnType<typeof useOrionplaceBrowse>>('browse');
}

`app/stores/orionplaceDomainAccess.ts`

Connects each feature-store hook to the current storefront or documentation preview. It keeps server requests and preview data separate.

Source code

import type { Pinia } from 'pinia';

export type OrionplaceDomain = 'selections' | 'catalog' | 'products' | 'browse';

type DomainStores = Record<OrionplaceDomain, unknown>;

const storesByScope = new WeakMap<Pinia, Map<string, DomainStores>>();
const storesByFacade = new WeakMap<object, DomainStores>();
let resolveFacade: (() => object) | undefined;

export function registerOrionplaceDomainResolver(resolver: () => object) {
  resolveFacade = resolver;
}

export function registerOrionplaceDomainStores(
  pinia: Pinia,
  scope: string,
  stores: DomainStores,
) {
  const scopes = storesByScope.get(pinia) ?? new Map<string, DomainStores>();
  scopes.set(scope, stores);
  storesByScope.set(pinia, scopes);
}

export function attachOrionplaceDomainStores(
  facade: object,
  pinia: Pinia,
  scope: string,
) {
  const stores = storesByScope.get(pinia)?.get(scope);
  if (!stores) {
    throw new Error(`Missing Orionplace stores for ${scope}.`);
  }

  storesByFacade.set(facade, stores);
}

export function releaseOrionplaceDomainStores(
  facade: object,
  pinia: Pinia,
  scope: string,
) {
  storesByFacade.delete(facade);
  storesByScope.get(pinia)?.delete(scope);
}

export function resolveOrionplaceDomain<T>(domain: OrionplaceDomain): T {
  const facade = resolveFacade?.();
  const stores = facade && storesByFacade.get(facade);
  if (!stores) {
    throw new Error('The Orionplace store has not been initialized.');
  }

  return stores[domain] as T;
}

app/interfaces/orionplace/appBase/IAppLoad.ts
IAppLoad describes init, unauth, user and auth.
Nested types are imported from neighboring files; common init fields are defined in app/interfaces/orionplace/appBase/IAppLoadCommon.ts.

`app/interfaces/orionplace/appBase/IAppLoadCommon.ts`

IAppLoadCommon lists init fields and their nested interfaces: languages, currencies, units, banners, catalog and other initial data.

Source code

IAppLoadCommon

Shared storefront settings and initial content.

app/interfaces/orionplace/appBase/IAppLoadCommon.ts

TypeScript

import type { IAppLoadCommonLocale } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonLocale';
import type { IAppLoadCommonCurrency } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonCurrency';
import type { IAppLoadCommonUnit } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonUnit';
import type { IAppLoadCommonLogos } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonLogos';
import type { IGeoCoordinates } from '@/interfaces/orionplace/shared/IGeoCoordinates';
import type { IAppLoadCommonSeo } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonSEO';
import type { IAppLoadCommonSocial } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonSocial';
import type { IAppLoadCommonVisualSettings } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonVisualSettings';
import type { IAppLoadCommonEvents } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonEvents';
import type { IAppLoadCommonBanner } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonBanner';
import type { ICategory } from '@/interfaces/orionplace/category/ICategory';
import type {
	IAppLoadProduct,
	IProductSeller,
} from '@/interfaces/orionplace/products/IProduct';
import type { IAppLoadCommonTariff } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonTariff';
import type { IAppLoadCommonWalletValue } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonWalletValue';
import type { IAppLoadCommonVariables } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonVariables';
import type { IAppLoadCommonContact } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonContact';

export interface IAppLoadCommon {
	// Available languages and their default currency and units.
	locale: Record<string, IAppLoadCommonLocale>;
	// Currencies, formatting rules, conversion values and selector availability.
	currencies: Record<string, IAppLoadCommonCurrency>;
	// Weight units and conversion factors.
	weights: Record<string, IAppLoadCommonUnit>;
	// Length units and conversion factors.
	lengths: Record<string, IAppLoadCommonUnit>;
	// Whether a geocoding plugin is selected for address lookup by coordinates.
	// Address and city text suggestions depend on the country.
	geo_location_enabled: boolean;
	/** ISO codes of the shop's shipping countries, sorted. */
	shipping_countries?: string[];
	// Whether the current session belongs to a signed-in customer.
	is_authenticated: boolean;
	// Customer balance by currency, when a wallet is available.
	wallet?: Record<string, IAppLoadCommonWalletValue>;
	// Logo sizes and favicon.
	logos: IAppLoadCommonLogos;
	// Public keys for external integrations, including the Yandex Maps API key.
	public_keys: Record<string, string>;
	// Default map center coordinates configured for the storefront.
	default_map: IGeoCoordinates;
	// Store home-page metadata
	seo?: IAppLoadCommonSeo[];
	// Social network links.
	sm?: IAppLoadCommonSocial[];
	// Initial cart and wishlist counters and feature defaults.
	variables?: IAppLoadCommonVariables;
	// Company name, contact details and legal information.
	contact?: IAppLoadCommonContact;
	// Display options for menus, lists and storefront elements.
	visual_settings?: IAppLoadCommonVisualSettings;
	// Events and messages displayed in the storefront.
	events?: IAppLoadCommonEvents[];
	// Banner collections for the homepage.
	main_banner?: Record<string, IAppLoadCommonBanner[]>;
	// Category tree for storefront navigation.
	catalog?: ICategory[];
	// Initial storefront products. Each entry contains `seller_id`; read the full
	// seller from `sellers`.
	products?: IAppLoadProduct[];
	// Personalized products based on previous searches and categories. Each entry
	// contains `seller_id`; read the full seller from `sellers`. Empty for guests.
	featured?: IAppLoadProduct[];
	// Seller details keyed by seller ID. Product stores use this object to provide
	// `IProduct.seller` to components.
	sellers: Record<string, IProductSeller>;
	// Localized suggestions for the search input.
	search_hints?: Record<string, string>[];
	// Plans this storefront sells, with their prices and options, as in
	// `subscriptions_guest_search`. A storefront without a plan list gets an empty
	// `data` list.
	tariffs?: IAppLoadCommonTariff;
}

`app/app.vue`

The root component applies the selected theme with OrionplaceThemeProvider and renders the current route page with NuxtPage inside NuxtLayout.

NuxtLoadingIndicator draws a thin bar at the top of the window in the header text color, so it stays visible over the dark header bar, and in the danger color after an error. It runs during page navigation and while a storefront request is in progress: saving, updating, loading and signing in. The buttons stay disabled and screen readers receive the status text; the page shows no separate status strip.

This connects the route pages, the layouts and the global route middleware to the application lifecycle.

Source code

<script setup lang="ts">
  import { watch } from 'vue';
  import { useOrionplaceStore } from '@/stores/orionplace';
  import { NuxtLayout, NuxtLoadingIndicator, NuxtPage } from '#components';
  import { showError, useHead, useRoute } from '#imports';
  import OrionplaceThemeProvider from '@/components/orionplace/theme/OrionplaceThemeProvider.vue';
  import { useOrionplaceTheme } from '@/composables/useOrionplaceTheme';
  import { storefrontPageError } from '@/composables/useOrionplaceMissingPage';
  import { storefrontIconLinks } from '@/utils/orionplace/pageSeo';

  const store    = useOrionplaceStore();
  const route    = useRoute();
  const { mode } = useOrionplaceTheme();

  // The store's icon from the admin panel (logos.ico) for browser tabs and
  // search results; a page without it keeps the browser default.
  useHead(() => ({
    htmlAttrs: { lang: store.localeCode },
    link: storefrontIconLinks(store.init?.logos?.ico),
  }));

  // The middleware opens the 503 error page during navigation. A refresh that
  // fails while a page is open, for example after sign-in, opens it too.
  watch(
    () => store.status,
    (status) => {
      const error = route.matched.length
        ? storefrontPageError(status, false, '')
        : undefined;

      if (error) {
        void showError(error);
      }
    },
  );
</script>

<template>
  <OrionplaceThemeProvider
    :mode="mode"
    class="min-h-screen"
  >
    <NuxtLoadingIndicator
      :height="2"
      color="var(--orionplace-inverse-text)"
      error-color="var(--orionplace-danger)"
    />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </OrionplaceThemeProvider>
</template>

`app/pages/index.vue`

The starter home page reads the load status from the store. Middleware performs the first request before the page opens.

While Application Load is pending, the page shows a loading message. A failed Application Load never reaches the page: the middleware opens the storefront error page instead.

After success, it renders StorefrontHome: banners, categories, events and product selections from Application Load, plus new products requested with products_search. If new products fail to load, the page shows a message with its own Retry button. Page metadata comes from store.init.seo. More in the Featured section opens the /featured page.

Source code

<script setup lang="ts">
  import { useOrionplacePageSeo } from '@/composables/useOrionplacePageSeo';
  import { computed, defineAsyncComponent, onMounted, ref } from 'vue';
  import { useHead, navigateTo, useRoute } from '#imports';
  import { useOrionplaceStore } from '@/stores/orionplace';
  import { useOrionplaceHomeProducts } from '@/composables/useOrionplaceHomeProducts';
  import { useOrionplaceStorefront } from '@/composables/useOrionplaceStorefront';
  import { useOrionplaceSignIn } from '@/composables/useOrionplaceSignIn';
  import { eventReturnPath } from '@/utils/orionplace/signInReturn';
  import StorefrontHome from '@/components/orionplace/storefront/StorefrontHome.vue';
  import { homeLabels } from '@/utils/orionplace/homeLabels';
  import { headerLabels } from '@/utils/orionplace/headerLabels';
  import { getStorefrontSeo } from '@/utils/orionplace/seo';
  import type { IAppLoadCommonBanner } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonBanner';
  import type { IAppLoadCommonEvents } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonEvents';
  const EventEnrollmentDialog = defineAsyncComponent(
    () => import('@/components/orionplace/events/EventEnrollmentDialog.vue'),
  );
  const enrollment   = ref<IAppLoadCommonEvents>();
  function openEnrollment(event: IAppLoadCommonEvents) {
    if (event.promo) {
      enrollment.value = event;
    }
  }

  // A guest's click opens sign-in at once; it returns with `?event=<id>`.
  function selectEvent(event: IAppLoadCommonEvents) {
    if (event.promo && !store.isAuthenticated) {
      signIn.requireSignIn(eventReturnPath(route.fullPath, event.id));
      return;
    }

    openEnrollment(event);
  }

  // The return address `?event=<id>` opens the dialog again for that event,
  // without navigating anywhere. Closing it removes the parameter.
  function reopenEnrollment() {
    const id    = Number(route.query.event);
    const event = store.init?.events?.find((item) => item.id === id);

    if (event) {
      openEnrollment(event);
    }
  }

  function closeEnrollment() {
    enrollment.value = undefined;

    if (route.query.event === undefined) {
      return;
    }

    const query = { ...route.query };
    delete query.event;

    return navigateTo({ path: route.path, query }, { replace: true });
  }

  function openBannerCategory(banner: IAppLoadCommonBanner) {
    if (banner.category != null) {
      return navigateTo({
        path: `/category/${banner.category}`,
        query: { locale: store.localeCode },
      });
    }
  }

  const store        = useOrionplaceStore();
  const route        = useRoute();
  const signIn       = useOrionplaceSignIn();
  const {
    actions,
    variants,
    selection: headerSelection,
  }                  = useOrionplaceStorefront();
  const homeProducts = useOrionplaceHomeProducts();
  const labels       = computed(() => headerLabels(store.localeCode));
  const homeCopy     = computed(() => homeLabels(store.localeCode));
  const metadata     = computed(() =>
    getStorefrontSeo(store.init?.seo ?? [], store.localeCode),
  );
  function namedMeta(name: string) {
    return metadata.value.meta.findLast(
      (tag) => 'name' in tag && tag.name === name,
    )?.content;
  }
  onMounted(reopenEnrollment);
  useOrionplacePageSeo('home', () => store.localeCode, {
    title: () =>
      metadata.value.title || store.init?.contact?.company_name || 'Orionplace',
    description: () => namedMeta('description'),
    keywords: () => namedMeta('keywords'),
  });
  useHead(() => ({
    meta: metadata.value.meta.filter(
      (tag) =>
        !('name' in tag && ['description', 'keywords'].includes(tag.name)),
    ),
  }));
</script>

<template>
  <main>
    <h1 class="sr-only">
      {{ store.init?.contact?.company_name || 'Orionplace' }}
    </h1>
    <p
      v-if="homeProducts.error.value"
      role="status"
      class="
        flex flex-wrap items-center gap-3
        mx-auto max-w-[1440px] px-4 sm:px-6 lg:px-8
        text-sm text-orionplace-muted
      "
    >
      {{ homeCopy.newFailed }}
      <button
        type="button"
        class="
          inline-flex h-11 items-center justify-center
          px-6
          text-xs font-medium uppercase tracking-[0.08em]
          rounded-none border border-solid border-orionplace-text
          bg-transparent text-orionplace-text
          cursor-pointer outline-none
          hover:bg-orionplace-hover focus-visible:bg-orionplace-hover
        "
        @click="homeProducts.load()"
      >
        {{ homeCopy.retry }}
      </button>
    </p>
    <StorefrontHome
      v-if="store.status === 'success'"
      :product-actions-disabled="
        actions.pending.value || actions.needsRefresh.value
      "
      @add="actions.run('add', $event)"
      @remove="actions.run('remove', $event)"
      @toggle-favorite="actions.run('toggleFavorite', $event)"
      @subscribe="actions.run('subscribe', $event)"
      @unsubscribe="actions.run('unsubscribe', $event)"
      @preorder="actions.openPreorder"
      @select-variant="variants.select"
      @request-secondary-variants="variants.requestSecondary"
      @select-category="
        navigateTo({
          path: `/category/${$event.id}`,
          query: { locale: store.localeCode },
        })
      "
      @select-product="
        navigateTo({
          path: `/product/${$event.id}`,
          query: { locale: store.localeCode },
        })
      "
      @select-seller="
        navigateTo({
          path: '/sellers',
          query: { seller: $event.id, locale: store.localeCode },
        })
      "
      @select-banner="openBannerCategory"
      @select-featured="
        navigateTo({ path: '/featured', query: { locale: store.localeCode } })
      "
      @select-event="selectEvent"
    />
    <div
      v-else
      class="
        grid justify-items-start gap-4
        mx-auto max-w-[1440px] px-4 py-12 sm:px-6 lg:px-8
        text-sm
      "
      :aria-busy="store.status === 'pending'"
    >
      <p
        class="m-0"
        role="status"
      >
        {{ homeCopy.loading }}
      </p>
    </div>
    <EventEnrollmentDialog
      v-if="enrollment"
      :key="enrollment.id"
      :event="enrollment"
      @close="closeEnrollment"
    />
  </main>
</template>

Each SSR request has its own Pinia instance.

The browser receives that state during hydration. After sign-in or sign-out, call reset and refresh to replace the profile and available methods.

Install the Nuxt integration

Data source

Where the value comes from and when it changes

Data source

Where the value comes from and when it changes

Data source

Where the value comes from and when it changes

Data source

Where the value comes from and when it changes

Data source

Where the value comes from and when it changes

Application Load · Nuxt

What the response contains

Session and CSRF cookies

How the Nuxt starter forwards cookies during SSR

What to build with init

Language, currencies and units

Catalog and search

Branding and page metadata

Content and contacts

Customer and counters

Maps and integrations

Use the data after initialization

`app/middleware/00.orionplace.global.ts`

`app/composables/useOrionplaceAppLoad.ts`

`app/composables/useOrionplaceApi.ts`

`app/utils/orionplace/api.ts`

`app/stores/orionplace.ts`

`app/stores/orionplaceSelections.ts`

`app/stores/orionplaceCatalog.ts`

`app/stores/orionplaceProducts.ts`

`app/stores/orionplaceBrowse.ts`

`app/stores/orionplaceDomainAccess.ts`

`app/interfaces/orionplace/appBase/IAppLoad.ts`

`app/interfaces/orionplace/appBase/IAppLoadCommon.ts`

`app/app.vue`

`app/pages/index.vue`