Design Studio Local

O que é o Design Studio Local?

O Design Studio Local é um ambiente de desenvolvimento integrado ao Storefront Local que permite ao desenvolvedor criar, testar e validar blocos e schemas do Design Studio diretamente na máquina, antes de publicar qualquer alteração no ambiente de produção.

Com ele, é possível:

Validar se os schemas dos blocos estão corretos;
Validar se os templates HTML dos blocos compilam sem erros de Scriban;
Visualizar blocos com conteúdo mockado (sem precisar cadastrar nada no CMS de produção);
Importar o layout que está publicado atualmente na loja;
Acompanhar o status de todos os arquivos em tempo real via LiveReload.

Como acessar

Com o projeto rodando localmente, acesse:

http://localhost:5501/design-studio/dashboard

O painel exibirá um resumo do estado atual do projeto com contadores de Templates, Schemas, Blocks e Layouts Locais.

LiveReload ativo — alterações nas pastas Blocks/ e Layouts/ recarregam automaticamente o painel.

Design Studio Dashboard

O painel é dividido em três seções principais:

1. Templates

Lista os templates do projeto (ex.: Pages/home.html) e exibe:

Os tipos de bloco associados a cada template (ex.: banner_principal, vitrine_1, newsletter);
Se existe um Layout Local salvo para aquele template;
Ações disponíveis: Preview, Gerar Layout e Importar Publicado.

Ação	Descrição
Preview	Abre a página localmente renderizando o layout salvo em `Layouts/`.
Gerar Layout	Cria automaticamente um layout mockado com dados fictícios para todos os blocos configurados no template. Útil quando o bloco foi criado mas ainda não tem conteúdo cadastrado.
Importar Publicado	Baixa o layout que está publicado em produção para uso local, permitindo visualizar como o site está hoje.

2. Validação de Schemas

Exibe o status de validação de cada arquivo *.schema.json encontrado na pasta Blocks/.

Coluna	Descrição
Tipo	Nome do bloco (ex.: `banner_principal`)
Arquivo	Caminho do schema (ex.: `Blocks/banner_principal.schema.json`)
Status	`OK` quando o schema é válido; lista de erros caso contrário

Exemplo de erro de schema:

{
  "success": false,
  "type": "marquee_banner",
  "file": "Blocks/marquee_banner.schema.json",
  "errors": [
    "Setting 'speed': field 'type' is required."
  ]
}

Exemplo de schema válido:

{
  "success": true,
  "type": "marquee_banner",
  "file": "Blocks/marquee_banner.schema.json"
}

3. Validação de Blocks

Exibe o status de validação dos arquivos *.html de cada bloco na pasta Blocks/, verificando se o template Scriban compila corretamente.

Coluna	Descrição
Tipo	Nome do bloco (ex.: `banner_carousel`)
Arquivo	Caminho do template (ex.: `Blocks/banner_carousel.html`)
Status	`OK` quando o bloco compila; lista de erros com linha e coluna em caso de falha

Exemplo de erro de bloco:

{
  "success": false,
  "type": "banner_carousel",
  "file": "Blocks/banner_carousel.html",
  "errors": [
    {
      "message": "Error while parsing if statement: The <end> statement was not found in: if <expression> ... end|else|else if",
      "line": 20,
      "column": 74
    }
  ]
}

Exemplo de bloco válido:

{
  "success": true,
  "type": "banner_carousel",
  "file": "Blocks/banner_carousel.html"
}

Fluxo recomendado de desenvolvimento

Crie o arquivo Blocks/meu_bloco.schema.json com as configurações do bloco.
Crie o arquivo Blocks/meu_bloco.html com o template Scriban do bloco.
Acesse o Dashboard (/design-studio/dashboard) e verifique se ambos aparecem com status OK.
Use Gerar Layout no template desejado para visualizar o bloco com conteúdo mockado.
Acesse o Preview para ver o resultado renderizado no browser.
Quando satisfeito, faça o deploy normalmente e use Importar Publicado para confirmar que o layout de produção está correto.

Dica: Se algum bloco existente já está publicado e você quer usá-lo como referência, use Importar Publicado antes de começar as alterações.