Conteúdo localizado com AEM Headless

O AEM fornece uma Estrutura de integração de tradução para conteúdo headless, permitindo que os Fragmentos de conteúdo e ativos de suporte sejam facilmente traduzidos para uso em localidades. Essa é a mesma estrutura usada para traduzir outro conteúdo AEM, como Páginas, Fragmentos de experiência, Ativos e Forms. Uma vez o conteúdo headless foi traduzidoe publicado, está pronto para ser consumido por aplicativos headless.

Estrutura da pasta de ativos assets-folder-structure

Verifique se os Fragmentos de conteúdo localizados no AEM seguem o estrutura de localização recomendada.

As pastas de local devem ser irmãs e o nome da pasta, em vez do título, deve ser válido Código ISO 639-1 que representa o local do conteúdo contido na pasta.

O código de localidade também é o valor usado para filtrar os fragmentos de conteúdo retornados pela consulta do GraphQL.

Consulta persistente do GraphQL

O AEM fornece uma _locale Filtro do GraphQL que filtra automaticamente o conteúdo por código de localidade. Por exemplo, consultar todas as aventuras em inglês no Projeto do site WKND pode ser feita com uma nova consulta persistente wknd-shared/adventures-by-locale definido como:

query($locale: String!) {
  adventureList(_locale: $locale) {
    items {
      _path
      title
    }
  }
}

A variável $locale variável usada no _locale O filtro exige o código de localidade (por exemplo, en, en_usou de) conforme especificado no Convenção de localização da base de pastas de ativos do AEM.

Exemplo do React

Vamos criar um aplicativo React simples que controla qual conteúdo Adventure consultar do AEM com base em um seletor de localidade usando o _locale filtro.

Quando Inglês é selecionado no seletor de local e Fragmentos de conteúdo de aventura em inglês, em /content/dam/wknd/en são retornados, quando Espanhol estiver selecionada, depois Fragmentos de conteúdo em espanhol em /content/dam/wknd/ese assim por diante.

Criar um LocaleContext

Primeiro, crie um Contexto do React para permitir que o local seja usado nos componentes do aplicativo React.

// src/LocaleContext.js

import React from 'react'

const DEFAULT_LOCALE = 'en';

const LocaleContext = React.createContext({
    locale: DEFAULT_LOCALE,
    setLocale: () => {}
});

export default LocaleContext;

Criar um LocaleSwitcher Componente do React locale-switcher

Em seguida, crie um componente React do alternador de local que defina como ContextoLocal para a seleção do usuário.

Esse valor de localidade é usado para direcionar as consultas do GraphQL, garantindo que elas retornem apenas o conteúdo correspondente à localidade selecionada.

// src/LocaleSwitcher.js

import { useContext } from "react";
import LocaleContext from "./LocaleContext";

export default function LocaleSwitcher() {
  const { locale, setLocale } = useContext(LocaleContext);

  return (
    <select value={locale}
            onChange={e => setLocale(e.target.value)}>
      <option value="de">Deutsch</option>
      <option value="en">English</option>
      <option value="es">Español</option>
    </select>
  );
}

Consultar conteúdo usando o _locale filtro adventures

O componente Aventuras consulta o AEM para todas as aventuras por localidade e lista seus títulos. Isso é feito passando o valor do local armazenado no contexto do React, para a consulta usando o _locale filtro.

Essa abordagem pode ser estendida para outras consultas em seu aplicativo, garantindo que todas as consultas incluam apenas o conteúdo especificado pela seleção de localidade de um usuário.

A consulta ao AEM é executada no gancho React personalizado getAdventuresByLocale, descrito com mais detalhes na documentação do Querying AEM GraphQL.

// src/Adventures.js

import { useContext } from "react"
import { useAdventuresByLocale } from './api/persistedQueries'
import LocaleContext from './LocaleContext'

export default function Adventures() {
    const { locale } = useContext(LocaleContext);

    // Get data from AEM using GraphQL persisted query as defined above
    // The details of defining a React useEffect hook are explored in How to > AEM Headless SDK
    let { data, error } = useAdventuresByLocale(locale);

    return (
        <ul>
            {data?.adventureList?.items?.map((adventure, index) => {
                return <li key={index}>{adventure.title}</li>
            })}
        </ul>
    )
}

Defina o App.js

Por último, agrupe-o embrulhando o aplicativo React com o LanguageContext.Provider e definindo o valor do local. Isso permite que os outros componentes do React, LocaleSwitcher, e Aventuras para compartilhar o estado de seleção de local.

// src/App.js

import { useState, useContext } from "react";
import LocaleContext from "./LocaleContext";
import LocaleSwitcher from "./LocaleSwitcher";
import Adventures from "./Adventures";

export default function App() {
  const [locale, setLocale] = useState(useContext(LocaleContext).locale);

  return (
    <LocaleContext.Provider value={{locale, setLocale}}>
      <LocaleSwitcher />
      <Adventures />
    </LocaleContext.Provider>
  );
}