Persistência de dados no Checkout

🔍 Preview

Para que o cliente tenha uma experiência contínua entre:

• Store Theme
• Checkout
• Área Restrita

é necessário que os dados (carrinho, login, preferências, etc.) sejam persistidos corretamente.

Essa persistência acontece através de um token compartilhado entre as aplicações.

Se esse token não for mantido corretamente:

• o cliente pode perder o login
• o carrinho pode “sumir” ao navegar
• o Checkout pode não refletir o estado da loja

---

⚙️ Como funciona na prática

A persistência de dados já está automaticamente configurada quando você utiliza o public-sdk

Nesse cenário, você não precisa se preocupar com nada.

O SDK:

• Gerencia o token
• Atualiza os dados
• Sincroniza entre Store Theme, Checkout e Área Restrita

🧠 Como a persistência acontece

A persistência funciona através de um token armazenado no navegador do cliente.

Para que os dados sejam compartilhados corretamente entre:

• Store Theme
• Checkout
• Área Restrita

esse token precisa:

• Ter o mesmo nome em todas as aplicações
• Ser enviado em todas as requisições

Isso permite que o backend:

• Identifique o token
• Atualize os dados
• Mantenha consistência entre as aplicações
independente do fluxo de navegação do cliente

⚠️ Uso sem o public-sdk

Não recomendamos fazer requisições diretas.

Mas, caso necessário, você deve garantir que todas as requisições enviem o header obrigatório:

1Uappi-Cookie-Name

Esse header informa ao backend qual token deve ser utilizado para persistência.

🧩 Exemplo com Axios

1const headers = new AxiosHeaders({
2  'Uappi-Cookie-Name': 'token',
3  Accept: 'application/json',
4});
5
6if (
7  window.location.hostname === 'localhost' ||
8  window.location.hostname === '127.0.0.1'
9)
10  headers.set('uappi-environment', 'development');
11
12const axiosInstance = axios.create({
13  baseURL: ${window.location.protocol}//${window.location.host}/api/v3,
14  headers,
15  paramsSerializer: {
16    encode: encodeWafNormalizer,
17  },
18});

🌐 Importante: funcionamento em ambiente local

Para que a persistência funcione corretamente durante o desenvolvimento local, é essencial que:

• As variáveis de ambiente estejam corretamente configuradas
• O vite.config.ts esteja com proxy ativo

Isso garante que:

• O deploy funcione corretamente
• As requisições passem do localhost para o domínio real
• O backend consiga gerenciar o token

🔁 Configuração do Proxy

No vite.config.ts

1server: {
2  proxy: {
3    '/upload': {
4      target: env.VITE_API_BASE_URL,
5      changeOrigin: true,
6      secure: false,
7      ws: true,
8    },
9    '/api/v3': {
10      target: env.VITE_API_BASE_URL,
11      changeOrigin: true,
12      secure: false,
13      ws: true,
14    },
15  },
16},

✅ Recomendação final

Sempre que possível utilize o public-sdk

Ele já resolve automaticamente:

• Persistência de dados
• Sincronização entre aplicações
• Compatibilidade com o ecossistema Uappi

Evite implementar essa lógica manualmente para prevenir inconsistências na experiência do cliente.

🏁 Próximo passo

Agora que você entende como funciona a persistência de dados e como manter o token do cliente consistente entre as aplicações da Uappi, o próximo passo é aprender a garantir que todas essas interações estejam sendo corretamente monitoradas.

Tracking e SEO: eventos GA4 usando public-sdk Tracking e SEO: dados estruturados e boas práticas