Modelado de contenido

Vaya a Herramientas > Explorador de configuración para crear una configuración para la experiencia sin encabezado.

Proporcione un título y nombre, y compruebe Consultas persistentes de GraphQL y Modelos de fragmentos de contenido.

Vaya a Herramientas > Modelos de fragmento de contenido y seleccione la carpeta con el nombre de la configuración creada en el paso 1.

Dentro de la carpeta, seleccione Crear y asigne un nombre al modelo Teaser. Agregue los siguientes tipos de datos al modelo Teaser.

Dentro de la carpeta, cree un segundo modelo llamado Oferta. Haga clic en Crear y asigne al modelo el nombre "Oferta" y añada los siguientes tipos de datos:

Dentro de la carpeta, cree un tercer modelo denominado Lista de imágenes. Haga clic en Crear y asigne al modelo el nombre "Lista de imágenes" y añada los siguientes tipos de datos:

Ahora, vaya a Assets y cree una carpeta para el nuevo sitio. Haga clic en crear y asigne un nombre a la carpeta.

Una vez creada la carpeta, selecciónela y abra sus Propiedades.

En la ficha Configuraciones en la nube de la carpeta, seleccione la configuración creada anteriormente.

Haga clic en la carpeta nueva y cree un teaser. Haga clic en Crear y en Fragmento de contenido y seleccione el modelo Teaser. Asigne un nombre al modelo Hero y haga clic en Crear.

Vaya a Herramientas > GraphQL

Haga clic en Crear, asigne un nombre al nuevo extremo y elija la configuración recién creada.

Vamos a probar el nuevo punto final. Vaya a Herramientas > Editor de consultas de GraphQL y elija el punto final en la lista desplegable de la parte superior derecha de la ventana.

En el editor de consultas, cree algunas consultas diferentes.

{
    teaserList {
        items {
        title
        }
    }
}

Debe obtener una lista que contenga el fragmento único creado arriba.

Para este ejercicio, cree una consulta completa que utilice la aplicación sin encabezado de AEM. Cree una consulta que devuelva un solo teaser por ruta. En el editor de consultas, introduzca la siguiente consulta:

query TeaserByPath($path: String!) {
component: teaserByPath(_path: $path) {
    item {
    __typename
    _path
    _metadata {
        stringMetadata {
        name
        value
        }
    }
    title
    preTitle
    style
    asset {
        ... on MultimediaRef {
        __typename
        _authorUrl
        _publishUrl
        format
        }
        ... on ImageRef {
        __typename
        _authorUrl
        _publishUrl
        mimeType
        width
        height
        }
    }
    description {
        html
        plaintext
    }
    }
}
}

En la entrada variables de consulta de la parte inferior, escriba:

{
    "path": "/content/dam/pure-headless/hero"
}

NOTE

Es posible que necesite ajustar la variable de consulta path en función de los nombres de carpeta y fragmento.

Ejecute la consulta para recibir los resultados del fragmento de contenido creado anteriormente.

Haga clic en Guardar para mantener (guardar) la consulta y asigne un nombre a la consulta teaser. Esto nos permite hacer referencia a la consulta por su nombre en la aplicación.