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.

2. Validação de Schemas

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

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.

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"
}

Layout exclusivo por URL no ambiente local

O Design Studio de produção resolve o layout por URL: uma URL pode ter um
layout exclusivo, desvinculado do template. O ambiente local não reproduz esse
comportamento.

No modo local, o layout é lido de um único arquivo por template:

Layouts/<nome-do-template>.json

Ou seja, ao navegar localmente por /calca, /camiseta ou /blazer — todas
atendidas pelo mesmo template — você verá sempre o mesmo layout, que é o
conteúdo desse arquivo. A URL acessada não altera qual arquivo de layout é
carregado.

Isso vale também para as ações do dashboard:

Como simular um layout exclusivo localmente

Para conferir como uma URL específica vai ficar quando estiver desvinculada do
template, edite temporariamente o Layouts/<template>.json com o conteúdo que
você espera daquela URL e use o Preview. Como o LiveReload observa a pasta
Layouts/, a alteração aparece imediatamente.

Lembre-se de restaurar o arquivo depois: ele representa o layout do template, e
é ele que o Importar Publicado sobrescreve.

Regra prática: use o ambiente local para validar blocos, schemas e o
layout de template. A validação de layouts exclusivos por URL — e do
comportamento de desvincular/revincular — precisa ser feita no Design Studio
do Admin, em um ambiente com o CMS de verdade.

Fluxo recomendado de desenvolvimento

1. Crie o arquivo Blocks/meu_bloco.schema.json com as configurações do bloco.
2. Crie o arquivo Blocks/meu_bloco.html com o template Scriban do bloco.
3. Acesse o Dashboard (/design-studio/dashboard) e verifique se ambos aparecem com status OK.
4. Use Gerar Layout no template desejado para visualizar o bloco com conteúdo mockado.
5. Acesse o Preview para ver o resultado renderizado no browser.
6. 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.