JSON templates

Un JSON template es el blueprint de una página o región de layout: declara qué sections se renderizan, en qué orden, con qué settings precargados y qué blocks contienen. El Brand Editor lee ese blueprint para presentar la página al usuario y permitirle reorganizarla sin tocar código.

Tipos de template

Hay dos variantes, con la misma estructura JSON pero renderizadas en regiones distintas:

Tipo	Ubicación	Cómo se renderiza
Page template	templates/pages/*.json	Se inyecta dentro de <main> vía {{ page_template_content }} en layouts/layout.tpl.
Layout template	templates/layout/header.json, templates/layout/footer.json	Se renderiza desde {% layout_template 'header' %} y {% layout_template 'footer' %}.

Tipo	Ubicación	Cómo se renderiza
Page template	templates/pages/*.json	Se inyecta dentro de <main> vía {{ page_template_content }} en layouts/layout.tpl.
Layout template	templates/layout/header.json, templates/layout/footer.json	Se renderiza desde {% layout_template 'header' %} y {% layout_template 'footer' %}.

Estructura del archivo

{
  "sections": {
    "<section-id>": {
      "type": "<nombre del archivo en sections/>",
      "settings": { ... },
      "blocks": {
        "<block-id>": {
          "type": "<nombre del archivo en blocks/>",
          "settings": { ... },
          "blocks": { ... },
          "block_order": [ ... ]
        }
      },
      "block_order": [ "<block-id>", ... ]
    }
  },
  "order": [ "<section-id>", ... ]
}

Clave	Qué hace
sections	Diccionario de sections keyed por un id arbitrario.
order	Array que define el orden de renderizado de las sections.
type	Nombre del archivo en sections/ o blocks/ (sin la extensión .tpl).
settings	Valores precargados para los settings declarados en el schema.
blocks	Diccionario de blocks hijo, con la misma estructura recursiva.
block_order	Array que controla el orden de renderizado de los blocks dentro de su padre.

Claves t: en settings

Los valores de settings pueden ser claves t: que se resuelven desde los archivos *.schema.json en translations/. Esto permite que los valores por defecto del template aparezcan en el idioma del usuario en el editor.

"settings": {
  "text": "t:defaults.slide.heading",
  "label": "t:defaults.slide.button"
}

La resolución de claves t: ocurre al momento de renderizar la UI del editor, usando los archivos <locale>.schema.json.

Ejemplo completo

Fragmento de templates/pages/home.json:

{
  "sections": {
    "slideshow": {
      "type": "slideshow",
      "settings": {
        "section_width": "full",
        "height": 400,
        "autoplay": true
      },
      "blocks": {
        "slide_1": {
          "type": "slide",
          "blocks": {
            "heading": {
              "type": "heading",
              "settings": { "text": "t:defaults.slide.heading", "size": "h1" }
            },
            "text": {
              "type": "text",
              "settings": { "text": "t:defaults.slide.description" }
            },
            "button": {
              "type": "button",
              "settings": { "label": "t:defaults.slide.button" }
            }
          },
          "block_order": ["heading", "text", "button"]
        }
      },
      "block_order": ["slide_1"]
    }
  },
  "order": ["slideshow"]
}

Lo que ilustra este ejemplo:

• sections es un diccionario; order controla el orden de renderizado.
• Cada section tiene type (coincide con un archivo en sections/), settings y blocks opcionales.
• Los blocks pueden anidar otros blocks: el block slide contiene heading, text y button.
• block_order controla la secuencia de renderizado dentro de cada padre.
• Los valores t: en settings se resuelven desde las traducciones de schema.

Layout templates

templates/layout/header.json y templates/layout/footer.json siguen exactamente el mismo formato, pero se renderizan en las regiones de header y footer en lugar de <main>. Estas regiones son compartidas entre todas las páginas del sitio.

Desde layouts/layout.tpl:

{% layout_template 'header' %}

<main id="MainContent" class="main-content main-container" role="main">
  {{ page_template_content }}
</main>

{% layout_template 'footer' %}

Las sections declaradas en templates/layout/header.json (como header.tpl y announcement-bar.tpl) se renderizan en todas las páginas sin necesidad de incluirlas en cada page template individual.