Changelog
Back to All
Added

Design Studio — Edição de conteúdos em todas as páginas de hotsite

2 days ago by Natali Maciel

O que mudou

Até então, o Design Studio permitia edição de blocos apenas na Home. A partir desta entrega, o lojista pode editar banners e demais conteúdos em qualquer template de hotsite — categoria, marca, portfólio, buy list e
landing pages — desde que a agência habilite o template para o CMS.

Do ponto de vista de implementação, nada de novo precisa ser aprendido: a habilitação continua sendo feita pela propriedade content_for_page no pages.json. O que mudou é que essa propriedade deixou de ser restrita à Home e passou a valer para qualquer definição de página do tipo hotsite.

Conceito central: a edição é por template, não por URL

Esta é a regra mais importante para entender o comportamento e para orientar o
lojista.

No Storefront, um template de hotsite pode responder por várias URLs. Por
exemplo, o template hotsite.html pode atender:

/blusas
/camisetas
/saias
/casacos

Quando o lojista edita um bloco no Design Studio, ele edita o template. Por consequência, o mesmo conteúdo é renderizado em todas as URLs associadas àquele template. Não há, nesta versão, edição de conteúdo específica por URL.

ℹ️

A granularidade de edição por URL está prevista como

Evolução futura. Hoje, o modelo mental correto para o lojista é: "edito o template → reflete em todas as páginas que usam esse template".

Como o CMS comunica isso ao lojista

Para evitar edições em massa não intencionais, o Design Studio exibe uma sinalização condicional:

  • Template com mais de uma URL vinculada: aparece o card "URLs vinculadas", listando todas as URLs que herdarão o conteúdo, além de mensagens de alerta informando que a alteração refletirá em várias páginas.
  • Template com uma única URL (como a Home): o card e os alertas não são exibidos — a experiência permanece idêntica à anterior.

Como desenvolvedor da agência, você não precisa configurar nada para esse comportamento: ele é derivado automaticamente das URLs que o template atende no pages.json.

Passo a passo: habilitar o CMS em um template de hotsite

1. Declare content_for_page na página de hotsite (pages.json)

Adicione a propriedade content_for_page à definição da página de hotsite,
listando os type de blocos permitidos naquele template:

{
  "type": "hotsite",
  "path": "hotsite.html",
  "query": "hotsite.graphql",
  "content_for_page": [
    "banner_full",
    "banner_button",
    "product_carousel"
  ]
}

Cada type listado precisa ter o par de arquivos correspondente em Blocks/
(<type>.html e <type>.schema.json). Veja a página Blocks.

2. Renderize os blocos no template HTML

No arquivo HTML do template (Pages/hotsite.html), use as variáveis do Design Studio para renderizar os blocos salvos pelo lojista:

{{~ if wake_has_content_for_page ~}}
  {{ wake_content_for_page }}
{{~ else ~}}
  <!-- fallback: conteúdo padrão quando o CMS ainda não tem blocos salvos -->
{{~ end ~}}
  • wake_has_content_for_page — indica se existem blocos configurados via CMS para a página atual.
  • wake_content_for_page — renderiza, na ordem definida pelo lojista, os blocos salvos.
✅

Boa prática: sempre mantenha um fallback no else.

Assim, templates recém-habilitados (ainda sem conteúdo salvo no CMS) continuam renderizando um
conteúdo padrão.

3. Garanta os blocos em Blocks/

Para cada type declarado no content_for_page, confirme que existem:

Blocks/
  banner_full.html
  banner_full.schema.json
  banner_button.html
  banner_button.schema.json
  product_carousel.html
  product_carousel.schema.json

Sem o .schema.json, o bloco não pode ser salvo pelo lojista; sem o .html, não é renderizado corretamente.

4. Valide localmente antes de publicar

Use o Design Studio Local (http://localhost:5501/design-studio/dashboard) para conferir, antes do deploy:

  • se os *.schema.json dos blocos estão válidos;
  • se os *.html compilam sem erros de Scriban;
  • como o template renderiza via Preview e Gerar Layout.

Checklist de implementação para a agência

  • content_for_page declarado na definição de hotsite no pages.json.
  • Todos os type de blocos possuem <type>.html e <type>.schema.json em Blocks/.
  • O template HTML usa wake_has_content_for_page + wake_content_for_page.
  • Há um fallback para quando não há conteúdo salvo.
  • Blocos validados no Design Studio Local (schema OK + HTML OK).
  • Você orientou o lojista de que a edição é por template e reflete em
    todas as URLs vinculadas.

Perguntas frequentes

Posto conteúdo diferente por URL dentro do mesmo template? Não nesta versão. A edição é por template e o conteúdo é o mesmo para todas as URLs associadas. Edição por URL/componente é uma evolução futura.

Preciso mudar algo para o card "URLs vinculadas" aparecer?
Não. Ele é exibido automaticamente quando o template atende mais de uma URL. Em
templates de URL única (ex.: Home), ele não aparece.

A Home continua funcionando como antes?
Sim. Nada muda para a Home nem para templates de URL única.

Páginas relacionadas