---
title: "System options"
description: "Configurações da loja com cache, tipagem real e atualização controlada."
---
A loja é configurada pelas **system options**: nome, cores, logo, módulos, meios de pagamento, SEO e outras preferências do tenant. O backend expõe esse pacote em `GET /system/info/:context`.

O **Cinderace Core** entrega isso como `sdk.systemOptions`, com cache em memória, cache persistente opcional e tipos derivados do contrato real do backend.

## Primeiro acesso

```ts
const options = await sdk.systemOptions.get();

console.log(options.labels?.siteName);
console.log(options.colors?.primary);
console.log(options.seo?.description);
```

A primeira chamada busca no servidor. As seguintes reutilizam o valor em cache até o TTL expirar. O objeto retornado é compartilhado com o cache, então trate-o como somente leitura.

## Contextos

```ts
const site = await sdk.systemOptions.get("site");
const drawer = await sdk.systemOptions.get("drawer");
```

Os contextos disponíveis são `site`, `drawer`, `admin`, `resellers` e `app-builder`. O padrão é `site`, e você pode trocar na instância:

```ts
import { LMSdk } from "@luckymaker/sdk-core";

const sdk = new LMSdk({
    baseUrl: "api.sualoja.com.br",
    systemOptions: {
        context: "site"
    }
});
```

## Cache

- **Memória:** sempre ativo, por instância da SDK.
- **Persistente:** `localStorage` no browser, isolado por `baseUrl`. Use `storage: false` para desligar.
- **TTL padrão:** 60 segundos, alinhado ao cache do backend.
- **Requisições simultâneas:** compartilham a mesma chamada, sem duplicar tráfego.

```ts
import { LMSdk } from "@luckymaker/sdk-core";

const sdk = new LMSdk({
    baseUrl: "api.sualoja.com.br",
    systemOptions: {
        ttl: 5 * 60_000,
        storage: false
    }
});
```

Para usar outro storage, implemente `SystemOptionsStorage`:

```ts
import { LMSdk } from "@luckymaker/sdk-core";

const sdk = new LMSdk({
    baseUrl: "api.sualoja.com.br",
    systemOptions: {
        storage: {
            read: (key) => sessionStorage.getItem(key),
            write: (key, value) => sessionStorage.setItem(key, value),
            remove: (key) => sessionStorage.removeItem(key)
        }
    }
});
```

## Atualizar e inspecionar

```ts
await sdk.systemOptions.refresh(); // ignora o cache e busca de novo
sdk.systemOptions.peek();          // último valor em memória, sem Promise
await sdk.systemOptions.clear();   // limpa o contexto padrão
await sdk.systemOptions.clearAll();
```

`refresh()` é útil depois de uma ação que altera a configuração da loja. O `peek()` serve para ler o valor já carregado em um componente síncrono.

## Features e variáveis

```ts
const features = await sdk.systemOptions.features();
const vars = await sdk.systemOptions.vars(["services.zendesk.enabled"]);
```

`features()` e `vars()` também usam cache em memória, com TTLs próprios:

```ts
import { LMSdk } from "@luckymaker/sdk-core";

const sdk = new LMSdk({
    baseUrl: "api.sualoja.com.br",
    systemOptions: {
        featuresTtl: 30_000,
        varsTtl: 60_000
    }
});
```

## Tipos

O retorno de `get()` é `FrontendWhitelabel`:

```ts
import type { FrontendWhitelabel } from "@luckymaker/sdk-core";

const options: FrontendWhitelabel = await sdk.systemOptions.get();
```

O tipo acompanha o `SystemOptions` do backend, então campos como `labels.siteName`, `colors.primary` e `seo.description` aparecem com o formato real — e o retorno é parcial, porque cada contexto expõe apenas as opções públicas que se aplicam a ele.

:::tip[Quando usar]
Carregue as opções uma vez no bootstrap da aplicação e reuse o valor tipado nas telas. Deixe o `refresh()` para momentos em que a configuração realmente pode ter mudado.
:::