Content fragments em React no AEM | 🇧🇷

Uma das facilidades do AEM (Adobe Experience Manager) é usar content fragments, que são basicamente pedaços de conteúdo que podem ser reproduzidos em diversas partes do nosso site através de componentes.
Neste artigo, vamos construir um componente react simples que consome os dados de um content fragment e renderiza na tela.

Passo a passo ✏️

Primeiro precisamos criar um modelo de content fragment e um (ou mais) content fragment(s) no nosso AEM local. Para saber como criar um modelo de content fragment, acesse a documentação oficial. Depois de criar um modelo, é possível criar um content fragment que se utiliza desse padrão. Saiba como fazer isso através da documentação oficial ou deste vídeo explicativo (em inglês)

📌 Modelo

No meu caso construí o seguinte modelo de content fragment:

Este modelo contém:

1. Dois campos de texto simples (título e subtítulo)
2. Um campo de caminho (pathfield) para relacionar dois content fragments diferentes
3. Um campo de texto rico (descrição)

O modelo pode conter muito mais campos e detalhes, mas lembre-se que geralmente o content fragment é utilizado para reproduzir um mesmo conteúdo várias vezes, o que faz com que quanto mais genérico seu modelo, melhor. Entretanto, cada situação pode exigir estruturas diferentes, então fique à vontade para criar.

📌 Content Fragment

Uma vez criado o modelo, podemos habilitá-lo na pasta de asset que iremos utilizar para o nosso site. Depois de habilitado, criamos um novo content fragment que terá sempre os mesmos campos.

📌 Consumindo dados (AEM)

Para consumir os dados desse content fragment no react vamos ter que criar um endpoint. Para isso acessamos o localhost:4502 > tools > general > graphql (ou apenas acesse http://localhost:4502/libs/cq/graphql/sites/admin/content/console.html).
Clique no botão "create" e crie um novo endpoint referenciando o projeto desejado.
Depois de criado, entramos novalmente em localhost:4502 > tools > general > graphql editor
Selecionamos o endpoint no dropdown superior direito.

No modelo que é aberto automaticamente, vamos editar a partir da linha 29, como sinalizado abaixo:

Vamos adicionar a estrutura que incluímos no nosso model. No caso do exemplo acima, teremos título, subtítulo e descrição. Lembrando que, uma vez que a descrição é um texto rico, devemos incluir a linguagem de marcação (html, json, etc)

Para confirmar se os dados estão retornando corretamente, clicamos no "play" superior para mostrar os dados na tela à direita. Depois disso, salvamos com um novo nome, publicamos (clicando no botão publish) e, ao aparecer na barra lateral esquerda, podemos copiar o url do novo endpoint

📌 Consumindo dados (React)

Para consumir os dados que recebemos neste endpoint no react, criaremos um componente simples. Para que o AEM não se perca, sugiro criar uma dialog (em apps) e um model (em core/bundle), mas a parte principal será no front-end, onde criaremos o componente Content Fragment.

import React, { useEffect, useState } from 'react';

export default function ContentFragment(props) {
    const { title } = props;
    const [items, setItems] = useState([]);

    useEffect(() => {
        getPosts();
    }, []);

    function getPosts() {
        fetch('/graphql/execute.json/your-project-name/posts', {
            method: 'GET',
            headers: {
                'Accept': 'application/json',
            }
        })
        .then(res => res.json())
        .then(json => {
            setItems(json.data.postList.items);
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }

    return (
        <section>
            <h1>Content Fragment</h1>
            <p>{title}</p>

            <ul>
                {items.map((item, index) => (
                    <div key={index}>
                        <li>{item.title}</li>
                        <li>{item.subtitle}</li>
                        <li dangerouslySetInnerHTML={{ __html: item.description.html }} />
                    </div>
                ))}
            </ul>
        </section>
    );
}

O código acima é um exemplo de como conseguimos consumir os dados do endpoint criado no aem de forma simples.

O comportamento desse componente é igual a qualquer outro componente react: deve ser importado no arquivo import-components.js, além de receber um MapTo para ser mapeado.

Pronto! Agora você terá um componente AEM que recebe content fragments! Basta apenas arrastar na sua página de preferência

Na imagem acima podemos ver como o componente exemplo renderiza. A partir deste ponto você pode estilizá-lo como quiser, como um componente qualquer.

Referências

• Content Fragment #1 | Content Fragments in aem - AEM GEEKS 📺
• Working with Content Fragments - Experience League
• Content Fragment #3 | Create Content Fragment and use on aem pages using core cf component - AEM GEEKS 📺
• Using a Content Fragment API in React
• Explore GraphQL APIs | Experience League
• Learning to use GraphQL with AEM - Sample Content and Queries | Experience League