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

getSallaSDK

functionBeginnerserverbrowserlive demo

Returns the Salla SDK (window.Salla) in the browser and undefined on the server, so code can reach it without touching window.

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

In plain words

The Salla SDK is a script Salla adds to every storefront. It handles the cart, login, the wishlist and more, and lives on window.Salla. The server has no window, so reading window.Salla there throws an error.

getSallaSDK() checks first: in the browser it returns the SDK, on the server undefined. The SDK may still be starting when you get it, so wait for Salla.onReady() (a Promise) before reading its settings.

Signature

function getSallaSDK(): SallaSDK | undefined   // declared as typeof window.salla

Try it live

Reads the Salla SDK in this browser. It exists only in the browser, and only becomes usable once onReady() resolves.Try this: reload the page and watch "onReady() resolved" flip to true a moment after the rest.
Storefront canvas · en · LTR
Runs in the browser…
What a theme writes
import { useEffect, useState } from 'react';
import { getSallaSDK } from '@salla.sa/twilight-theme-engine/utils';

export function GuestNotice() {
  const [isGuest, setIsGuest] = useState(false);

  useEffect(() => {
    const salla = getSallaSDK();
    if (!salla) return; // no SDK on the server, or its script failed to load
    let active = true;
    void salla.onReady().then(() => {
      if (active) setIsGuest(salla.config.get('user.type') === 'guest');
    });
    return () => {
      active = false;
    };
  }, []);

  return isGuest ? <p>Sign in to collect loyalty points.</p> : null;
}

Example

app/components/account/GuestNotice.tsx
import { useEffect, useState } from 'react';
import { getSallaSDK } from '@salla.sa/twilight-theme-engine/utils';

export function GuestNotice() {
  const [isGuest, setIsGuest] = useState(false);

  useEffect(() => {
    const salla = getSallaSDK();
    if (!salla) return; // no SDK on the server, or its script failed to load
    let active = true;
    void salla.onReady().then(() => {
      if (active) setIsGuest(salla.config.get('user.type') === 'guest');
    });
    return () => {
      active = false;
    };
  }, []);

  return isGuest ? <p>Sign in to collect loyalty points.</p> : null;
}

How it behaves

  • It is window.Salla when typeof window !== 'undefined', and undefined otherwise. The window check is made once, when the module loads.

  • In the browser it can still be undefined when the SDK script has not run or failed to load; the return type says so.

  • Inside components, useTwilight().salla gives the same object. getSallaSDK() suits code outside components: plain modules, analytics helpers, event handlers.

Gotchas

  • Branching on it during render gives different output on the server (undefined) and in the browser, a hydration mismatch. Call it in an effect or an event handler.

  • onReady() never settles when the SDK fails to initialise. The engine's AppsSnippets races it against a timeout for that reason (src/components/snippets/AppsSnippets.tsx); do the same when a page must not wait forever.

  • TypeScript knows the SDK only as window.salla: the engine's published types declare salla?: SallaSDK and no Salla, so window.Salla — which is the same object at run time — fails to compile with TS2551: Property 'Salla' does not exist on type 'Window'. Did you mean 'salla'?. That is the reason to call this function rather than reach for the global at all.

Related

useTwilight

Reads everything TwilightProvider knows: store, theme, settings, language, direction, current page, login token and the Salla SDK.

useIsClient

Returns false while the page is rendered on the server and during hydration, then true once the component has mounted in the browser.

dispatchRouteChanged

Fires the Salla SDK event route::changed with the current page data; the TanStack router already fires it after every navigation.

Source and docs