Rutas dinámicas y componentes editables

En este capítulo, habilitamos dos rutas dinámicas de Adventure Detail para admitir componentes editables: Bali Surf Camp y Beervana en Portland.

La ruta de la SPA Detalles de la aventura se define como /adventure/:slug, donde slug es una propiedad de identificador único en el fragmento de contenido de aventura.

Asignación de direcciones URL de SPA a páginas de AEM

En los dos capítulos anteriores, asignamos contenido de componente editable de la vista Inicio de la SPA a la página raíz de la SPA remota correspondiente en AEM en /content/wknd-app/us/en/.

La definición de la asignación para componentes editables para las rutas dinámicas de la SPA es similar, pero debemos crear un esquema de asignación 1:1 entre instancias de la ruta y páginas de AEM.

En este tutorial, tomamos el nombre del fragmento de contenido de WKND Adventure, que es el último segmento de la ruta, y lo asignamos a una ruta de acceso simple bajo /content/wknd-app/us/en/adventure.

Por lo tanto, en función de esta asignación, debemos crear dos nuevas páginas de AEM en:

Asignación de SPA remota

La asignación de solicitudes que salen de la SPA remota se configura mediante la configuración de setupProxy realizada en Bootstrap the SPA.

Asignación del editor de SPA

La asignación de solicitudes de SPA cuando el SPA se abre mediante el Editor de SPA de AEM se configura mediante la configuración de Asignaciones de Sling realizada en Configurar AEM.

Creación de páginas de contenido en AEM

Primero, cree el segmento de página adventure intermedio:

A continuación, cree las páginas de AEM que correspondan a cada una de las direcciones URL de la SPA que requieran áreas editables.

Estas dos páginas de AEM contienen el contenido creado respectivamente para sus rutas de SPA coincidentes. Si otras rutas SPA requieren creación, se deben crear nuevas páginas AEM en la dirección URL de su SPA en la página raíz de la página SPA remota (/content/wknd-app/us/en/home) en AEM.

Actualización de la aplicación WKND

Vamos a colocar el componente <ResponsiveGrid...> creado en el último capítulo, en nuestro componente de SPA AdventureDetail, creando un contenedor editable.

Colocar el componente de la SPA de ResponsiveGrid

Al colocar <ResponsiveGrid...> en el componente AdventureDetail, se crea un contenedor editable en esa ruta. El truco se debe a que varias rutas utilizan el componente AdventureDetail para representarse, debemos ajustar dinámicamente el atributo <ResponsiveGrid...>'s pagePath. Se debe derivar pagePath para que apunte a la página de AEM correspondiente, en función de la aventura que muestre la instancia de la ruta.

Actualice AdventureDetail.js con las líneas siguientes:

...
import { ResponsiveGrid } from '@adobe/aem-react-editable-components';
...

function AdventureDetailRender(props) {
    ...
    // Get the slug from the React route parameter, this will be used to specify the AEM Page to store/read editable content from
    const { slug } = useParams();

    return(
        ...
        // Pass the slug in
        function AdventureDetailRender({ title, primaryImage, activity, adventureType, tripLength,
                groupSize, difficulty, price, description, itinerary, references, slug }) {
            ...
            return (
                ...
                <ResponsiveGrid
                    pagePath={`/content/wknd-app/us/en/home/adventure/${slug}`}
                    itemPath="root/responsivegrid"/>

                <h2>Itinerary</h2>
                ...
            )
        }
    )
}

El archivo AdventureDetail.js debe tener el siguiente aspecto:

Crear el contenedor en AEM

Con <ResponsiveGrid...> en su lugar y su pagePath establecido dinámicamente en función de la aventura que se está representando, intentamos crear contenido en él.

Al navegar a una ruta de detalles de aventura que no tiene una página de AEM asignada, no hay capacidad de creación en esa instancia de ruta. Para habilitar la creación en estas páginas, simplemente cree una página de AEM con el mismo nombre en la página Aventura.

Enhorabuena.

¡Enhorabuena! ¡Ha agregado la capacidad de creación a las rutas dinámicas en el SPA!

Ahora ha completado la exploración de los primeros pasos de cómo se puede utilizar el Editor de SPA de AEM para agregar áreas editables específicas a un SPA remoto.