Modéliser du contenu

Accédez à Outils > Explorateur de configurations pour créer une configuration pour l’expérience découplée.

Fournissez un titre et un nom, et cochez Requêtes persistantes GraphQL et Modèles de fragment de contenu.

Accédez à Outils > Modèles de fragment de contenu et sélectionnez le dossier avec le nom de la configuration créée à l’étape 1.

Dans le dossier, sélectionnez Créer et donnez au modèle le nom Teaser. Ajoutez les types de données suivants au modèle Teaser.

Dans le dossier, créez un deuxième modèle nommé Offre. Cliquez sur Créer et donnez au modèle le nom « Offre » et ajoutez les types de données suivants :

Dans le dossier, créez un troisième modèle nommé Liste des images. Cliquez sur Créer et donnez au modèle le nom « Liste des images » et ajoutez les types de données suivants :

Accédez maintenant à Assets et créez un dossier pour le nouveau site. Cliquez sur créer et nommez le dossier.

Une fois le dossier créé, sélectionnez-le et ouvrez ses Propriétés.

Dans l’onglet Configurations cloud du dossier, sélectionnez la configuration créée précédemment.

Cliquez dans le nouveau dossier et créez un teaser. Cliquez sur Créer et Fragment de contenu et sélectionnez le modèle Teaser. Nommez le modèle Héros et cliquez sur Créer.

Accédez à Outils > GraphQL.

Cliquez sur Créer et donnez un nom au nouveau point d’entrée, puis choisissez la configuration nouvellement créée.

Testons le nouveau point d’entrée. Accédez à Outils > Éditeur de requêtes GraphQL et sélectionnez notre point d’entrée dans la liste déroulante en haut à droite de la fenêtre.

Dans l’éditeur de requêtes, créez quelques requêtes différentes.

{
    teaserList {
        items {
        title
        }
    }
}

Vous devriez obtenir une liste contenant le fragment unique créé plus haut.

Pour cet exercice, créez une requête complète utilisée par l’application AEM Headless. Créez une requête qui renvoie un seul teaser par chemin d’accès. Dans l’éditeur de requêtes, saisissez la requête suivante :

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

Dans l’entrée Variables de requête en bas, saisissez ce qui suit :

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

NOTE

Vous devrez peut-être ajuster la variable de requête path en fonction des noms des dossiers et des fragments.

Exécutez la requête pour recevoir les résultats du fragment de contenu créé précédemment.

Cliquez sur Enregistrer pour conserver (enregistrer) la requête et donnez-lui le nom teaser. Cela nous permet de référencer la requête par nom dans l’application.