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.

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

SPA AEM Asignación de las URL de la a páginas de la

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

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

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.

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

SPA Asignación remota

La asignación de las solicitudes que salen del sitio remoto se ha configurado a través de la configuración setupProxy realizada en el Bootstrap SPA el SPA de la base de datos.

SPA Asignación de editor de

SPA SPA AEM SPA AEM La asignación para las solicitudes de cuando se abre el a través del Editor de se configura mediante la configuración Asignaciones de Sling realizada en Configurar el.

AEM Creación de páginas de contenido en la

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

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

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

Actualización de la aplicación WKND

SPA Coloquemos el componente <ResponsiveGrid...> creado en el último capítulo, en nuestro componente AdventureDetail, para crear un contenedor editable.

SPA Colocar el componente 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. AEM Se debe derivar pagePath para que apunte a la página de correspondiente, según 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:

AEM Crear el contenedor en el espacio de trabajo de

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.

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

Enhorabuena.

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

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