Reading store data

Beginner10 min

Build a small store header one hook at a time with useStore, useTheme, useAsset and useTranslation.

Everything a header needs is already loaded before your component runs: the store's name and logo, the merchant's colors, the translations. You read it with hooks, one hook per kind of data.

Build a small store header below, one piece at a time. Each step adds one hook; the highlighted lines are what the step added.

1. The store name

useStore() returns the store this page belongs to. Its fields sit at the top level, so you take what you need straight out of it: here, name.

ثيم رائد

app/components/StoreHeader.tsx

import { useStore } from '@salla.sa/twilight-theme-engine/hooks/useStore';

export function StoreHeader() {
  const { name } = useStore();

  return (
    <header className="store-header">
      <strong>{name}</strong>
    </header>
  );
}

The same header in plain JavaScript

Without the engine you would fetch the store settings yourself, wait for them, and write each value into the page. The engine makes that request once per page, on the server, and every component reads the result.

header.js

// Plain JavaScript: ask the Salla API yourself, then fill the page in.
const response = await fetch(
  'https://api.salla.dev/store/v1/store/settings?include[]=store&include[]=theme',
  { headers: { 'store-identifier': '1510890315' } }
);
const { data } = await response.json();

const header = document.querySelector('.store-header');
header.querySelector('strong').textContent = data.store.name;
header.style.background = data.theme.color.primary;

Which hook holds what

Hook	Gives you	Import from
`useStore()`	The store: `name`, `logo`, `url`, `contacts`, `social`, `settings`…	`/hooks/useStore`
`useTheme()`	`color`, `font`, `settings` (your twilight.json settings) and `isRTL`	`/hooks/useTheme`
`useTranslation()`	`t`, `locale`, `direction`, `isRTL`	`/i18n`
`useAsset()`	URL builders: `asset()` for your theme's files, `cdn()` for Salla's asset CDN	`/hooks/useAsset`

In engine terms

The data comes from one request, store/settings, made by rootBeforeLoad during the server render and handed to the browser with the page. TwilightProvider keeps its store and theme in state; useStore() returns { ...store, refresh } and useTheme() returns { color, font, settings, isRTL } (src/hooks/useStore.ts, src/hooks/useTheme.ts).
refresh() re-reads the store from Salla.config.all() in the browser; on the server, or before the SDK exists, it does nothing.
t searches Salla's shared messages first, then your locales/*.json. blocks.header.cart is one of Salla's.
All four hooks work in the server render, so this header is in the HTML a search engine reads.
Reference: useStore, useTheme, useAsset, useTranslation, Link, and the Store and Theme types.

Check yourself

How do you read the store's name in a component?

const { name } = useStore();const name = useStore().store.name;const name = window.Salla.store.name;