Experience engineering / Evidencia en vivo

Cuatro caminos. Un contrato de página.

Cambia el origen y observa la respuesta real de Drupal. No son fixtures ni JSON construido en el frontal.

OrigenPágina Canvas · Componentes React

Componentes React registrados mediante ExtJS, con propiedades y tarjetas anidadas en slots.

ResoluciónDrupal + Lupus

Ruta, acceso anónimo, selección de campos y metadatos.

ContratoCustom Elements

Elementos semánticos, props y slots recursivos.

ExperienciaNext.js + React

SSR y componentes compartidos con el editor Canvas.

La consulta es pública y pasa por el proxy CE de Next.js. No se reenvían cookies ni datos de sesión. Esto no es una prueba de invalidación CDN.

Compara cómo cambia content según el origen y cómo los bloques aparecen aparte, por región, en blocks. El shell de navegación es Next.js; esta POC presenta la región content de Drupal, no todas las regiones del tema. No es un preview autenticado de páginas completas. Del contrato al HTML ↗

GET /ce-api/demo

{
  "title": "NTT DATA - Connected experiences",
  "content_format": "json",
  "content": {
    "element": "canvas-page",
    "slots": {
      "components": [
        {
          "element": "NttHero",
          "props": {
            "eyebrow": "NTT DATA / Digital experience lab",
            "title": "Una experiencia. Todas las posibilidades.",
            "description": "Drupal conserva el contenido y las reglas. Custom Elements define la entrega. Next.js presenta una experiencia conectada, con Canvas y más allá de Canvas.",
            "href": "/demo/insights",
            "linkText": "Explorar la experiencia"
          }
        },
        {
          "element": "NttSection",
          "props": {
            "eyebrow": "01 / Un mismo frontal, distintos origenes",
            "title": "Drupal decide. Next.js presenta.",
            "description": "Composición visual, fichas estructuradas, Views y módulos con bloques: descubre qué hace cada capa y compruébalo en ejemplos reales."
          },
          "slots": {
            "items": [
              {
                "element": "NttCard",
                "props": {
                  "eyebrow": "Canvas / Composicion visual",
                  "title": "Componentes externos, composición editorial.",
                  "description": "Hero, secciones y tarjetas React registrados con Canvas ExtJS. Un contrato de propiedades y slots conecta el catálogo frontend con el editor.",
                  "href": "/demo/guide/components",
                  "linkText": "Explorar Canvas y ExtJS"
                }
              },
              {
                "element": "NttCard",
                "props": {
                  "eyebrow": "Drupal / Contenido estructurado",
                  "title": "Una entidad. Distintos modos de presentarla.",
                  "description": "Drupal configura campos y formateadores en displays CE. La misma entidad se entrega como ficha y teaser, sin una plantilla Canvas.",
                  "href": "/demo/digital-experience",
                  "linkText": "Descubrir el caso"
                }
              },
              {
                "element": "NttCard",
                "props": {
                  "eyebrow": "Views / Seleccion dinamica",
                  "title": "La consulta se queda en Drupal.",
                  "description": "Una View real selecciona siete contenidos publicados y devuelve resultados y pager. Next.js presenta tres elementos por página.",
                  "href": "/demo/insights",
                  "linkText": "Explorar los insights"
                }
              }
            ]
          }
        },
        {
          "element": "NttCta",
          "props": {
            "title": "Más Drupal. Un mismo frontal.",
            "description": "Entiende Lupus Decoupled, Custom Elements, CE API y ExtJS. Explora la diferencia entre entregar datos y entregar una presentación, con ejemplos de módulos y bloques.",
            "href": "/demo/guide",
            "linkText": "Cómo funciona Lupus"
          }
        },
        {
          "element": "NttCta",
          "props": {
            "title": "Una experiencia.",
            "description": "Libertad editorial en Drupal.",
            "href": "/demo/insights",
            "linkText": "Explorar"
          }
        }
      ]
    }
  },
  "metatags": {
    "meta": [],
    "link": [
      {
        "rel": "alternate",
        "hreflang": "en",
        "href": "https://dev-headless-lupus.pantheonsite.io/en"
      },
      {
        "rel": "alternate",
        "hreflang": "es",
        "href": "https://dev-headless-lupus.pantheonsite.io/"
      }
    ]
  },
  "blocks": {
    "sidebar_first": {
      "canvas_lupus_theme_page_title": {
        "element": "drupal-markup",
        "slots": {
          "default": "\n\n"
        }
      },
      "canvas_lupus_theme_powered": {
        "element": "drupal-markup",
        "slots": {
          "default": "<span>Powered by <a href=\"https://www.drupal.org\">Drupal</a></span>"
        }
      }
    },
    "header": {
      "canvas_lupus_theme_site_branding": {
        "element": "drupal-markup",
        "slots": {
          "default": "<img src=\"https://dev-headless-lupus.pantheonsite.io/themes/custom/canvas_lupus_theme/logo.svg\" alt=\"Home\" />\nCanvas Lupus POC"
        }
      }
    },
    "primary_menu": {
      "canvas_lupus_theme_main_menu": {
        "element": "drupal-markup",
        "slots": {
          "default": "\n              <ul>\n              <li>\n        <a href=\"/\" data-drupal-link-system-path=\"&lt;front&gt;\">Home</a>\n              </li>\n        </ul>\n  \n\n"
        }
      }
    },
    "secondary_menu": {
      "canvas_lupus_theme_account_menu": {
        "element": "drupal-markup",
        "slots": {
          "default": "\n              <ul>\n              <li>\n        <a href=\"/user/login\" data-drupal-link-system-path=\"user/login\">Log in</a>\n              </li>\n        </ul>\n  \n\n"
        }
      }
    },
    "highlighted": {
      "canvas_lupus_theme_messages": {
        "element": "drupal-markup",
        "slots": {
          "default": "<div data-drupal-messages-fallback class=\"hidden\"></div>"
        }
      }
    }
  }
}