Pular para o conteúdo principal

Painel admin

Ao final desta página

Uma loja que seu cliente consegue ajustar sozinho — e uma visão honesta do que esse painel é e do que ele não é.

O que é​

<CatalogApp /> monta uma tela de administração em /admin com quatro abas:

AbaO que o dono muda
DashboardUm panorama do catálogo atual
ConfiguraçõesIdentidade, contato, WhatsApp, Pix, moeda, logo, favicon, ids de analytics
CatálogoImportar e exportar produtos em CSV, imprimir uma folha de catálogo
MarketingCódigos de cupom e seus valores

Tudo que ele grava vai para localStorage, em ecom-site-config e ecom-imported-products.

Isso é local ao navegador, e sem proteção

Não existe autenticação em /admin, e nada do que ele salva sai do navegador do visitante. É uma conveniência para uma loja de um operador só, uma demonstração, ou uma prévia para o cliente — não é um backoffice.

Para qualquer coisa séria: desligue a rota e gerencie os dados pelo seu data provider.

<CatalogApp disableAdmin />

Importação e exportação em CSV​

A aba de catálogo lê e escreve CSV, que é como um dono de loja pequena de fato mantém uma lista de produtos.

import {
  productsToCsv,
  parseProductsCsv,
  downloadProductsCsv,
  openCatalogPrintable,
} from '@neverleans-labs/plug-store-core';

// Exportar
downloadProductsCsv(products, 'catalogo.csv');

// Ou pegar a string
const csv = productsToCsv(products);

// Importar
const products = parseProductsCsv(csvText, 'fashion');

// Uma folha de catálogo pronta para impressão em nova janela
openCatalogPrintable(products, 'Bloom Cosméticos');

Produtos importados são guardados por id de tema e mesclados sobre o catálogo de demonstração:

import {
  setImportedProducts,
  getImportedProducts,
  clearImportedProducts,
} from '@neverleans-labs/plug-store-core';

setImportedProducts('fashion', products);
clearImportedProducts('fashion');
A importação só afeta o provider de demonstração

Essas funções gravam no armazenamento do navegador que o provider de demonstração lê. Quando você fornece o seu próprio dataProvider, ele é a fonte da verdade e os produtos importados não são consultados. Importe no seu backend.

Prévia como cliente​

As configurações incluem um botão de "visualizar como cliente", guardado em previewAsCustomer. Ele esconde os controles de dono para que o cliente veja a loja do jeito que o comprador vai ver.

Substituindo o painel​

O painel é uma página comum, então a abordagem usual em um projeto sério é desligá-lo e construir o seu atrás da sua autenticação:

<CatalogProvider dataProvider={provider}>
  <Routes>
    <Route path="/*" element={<Loja />} />
    <Route path="/gerenciar/*" element={<ExigeAuth><MeuAdmin /></ExigeAuth>} />
  </Routes>
</CatalogProvider>

Dentro dele, useSiteConfig().updateConfig te dá as mesmas alavancas que o painel embutido usa.

Próximos passos​