Modifica di uno SPA esterno in AEM

• Verificare che le dipendenze del SDK SPA siano di versioni consigliate.

Creare/identificare un componente AEM per il quale viene creato un componente React modificabile. In questo esempio, utilizza il componente testo del progetto WKND.

Creare un componente testo React semplice nell’SPA. In questo esempio è stato creato un nuovo file Text.js con il contenuto seguente.

Crea un oggetto di configurazione in modo da poter specificare gli attributi necessari per abilitare la modifica AEM.

• resourceType è obbligatorio per mappare il componente React al componente AEM e abilitare la modifica all'apertura nell'editor AEM.

Utilizzare la funzione wrapper withMappable.

Questa funzione wrapper mappa il componente React all'AEM resourceType specificato nella configurazione e abilita le funzionalità di modifica quando viene aperto nell'editor AEM. Per i componenti autonomi, recupera anche il contenuto del modello per il nodo specifico.

NOTE

In questo esempio, esistono versioni separate del componente: componenti AEM wrapped e React unwrapped. La versione racchiusa deve essere utilizzata quando si utilizza esplicitamente il componente. Quando il componente fa parte di una pagina, puoi continuare a utilizzare il componente predefinito come già fatto nell’editor SPA.

Esegui il rendering del contenuto nel componente.

Le proprietà JCR del componente testo vengono visualizzate come segue in AEM.

Questi valori vengono passati come proprietà al componente React AEMText creato e possono essere utilizzati per il rendering del contenuto.

import React from 'react';
import { withMappable } from '@adobe/aem-react-editable-components';

export const TextEditConfig = {
    // Empty component placeholder label
    emptyLabel:'Text',
    isEmpty:function(props) {
       return !props || !props.text || props.text.trim().length < 1;
    },
    // resourcetype of the AEM counterpart component
    resourceType:'wknd-spa-react/components/text'
};

const Text = ({ text }) => (<div>{text}</div>);

export default Text;

export const AEMText = withMappable(Text, TextEditConfig);

Di seguito è riportato l’aspetto del componente una volta completate le configurazioni dell’AEM.

const Text = ({ cqPath, richText, text }) => {
   const richTextContent = () => (
      <div className="aem_text" id={cqPath.substr(cqPath.lastIndexOf('/') + 1)} data-rte-editelement dangerouslySetInnerHTML={{__html: text}}/>
   );
   return richText ? richTextContent() : (<div className="aem_text">{text}</div>);
};

NOTE

In questo esempio, sono state apportate ulteriori personalizzazioni al componente di cui è stato eseguito il rendering, in modo che corrisponda al componente testo esistente. Non è correlato all’authoring in AEM.

Identifica una pagina da aggiungere per l’authoring nell’SPA. Questo esempio utilizza /content/wknd-spa-react/us/en/home.html.

Creare un file (ad esempio, Page.js) per il componente Pagina modificabile. utilizzare il componente Pagina fornito in @adobe/cq-react-editable-components.

Ripetere il passaggio 4 nella sezione Componenti foglia modificabili dall'AEM. Utilizzare la funzione wrapper withMappable sul componente.

Come già fatto in precedenza, applica MapTo ai tipi di risorse AEM per tutti i componenti secondari all'interno della pagina.

import { Page, MapTo, withMappable } from '@adobe/aem-react-editable-components';
import Text, { TextEditConfig } from './Text';

export default withMappable(Page);

MapTo('wknd-spa-react/components/text')(Text, TextEditConfig);

NOTE

In questo esempio, viene utilizzato il componente testo React non racchiuso invece del testo AEMText racchiuso creato in precedenza. Il motivo è che quando il componente fa parte di una pagina o di un contenitore e non è indipendente, il contenitore si occupa della mappatura ricorsiva del componente. Inoltre, non è necessario abilitare le funzionalità di authoring e il wrapper aggiuntivo per ogni bambino.

Per aggiungere una pagina modificabile nell'SPA, seguire gli stessi passaggi della sezione Aggiungere componenti modificabili alla pagina. In questo caso, è possibile ignorare la proprietà itemPath.

In index.js dell'applicazione React (o dove viene chiamato ReactDOM.render())

In index.html dell'applicazione React

Nel corpo del componente Pagina dell’app AEM, segui questi due passaggi:

1. Crea un body.html per il componente pagina.

1. Aggiungere l'elemento radice nel nuovo file body.html.

Identificare il livello che fungerebbe da base per l’AEM.

• Per il tuo campione, considera wknd-spa-react/us/en come la radice dell’SPA. Questa radice significa che tutto ciò che precede quel percorso è solo pagine/contenuti AEM.

Crea una pagina al livello richiesto.

• In questo esempio, la pagina da modificare è mydomain.com/test. test è nel percorso principale dell'app. Questo percorso principale deve essere mantenuto anche durante la creazione della pagina in AEM. Pertanto, puoi creare una pagina al livello principale definito nel passaggio precedente.
• La nuova pagina creata deve avere lo stesso nome della pagina da modificare. In questo esempio, per mydomain.com/test, la nuova pagina creata deve essere /path/to/aem/root/test.

Aggiungere helper all’interno del routing SPA.

• La pagina creata non è ancora in grado di eseguire il rendering del contenuto previsto in AEM. Il motivo è che il router prevede un percorso di /test mentre il percorso attivo AEM è /wknd-spa-react/us/en/test. Per includere la porzione dell’URL specifica per l’AEM, devi aggiungere alcuni helper sul lato SPA.

• È possibile utilizzare l'helper toAEMPath fornito da @adobe/cq-spa-page-model-manager. Trasforma il percorso fornito per il routing in modo da includere parti specifiche dell'AEM quando l'applicazione è aperta su un'istanza dell'AEM. Accetta tre parametri:

  • Percorso necessario per il routing
  • URL di origine dell’istanza AEM in cui viene modificato l’SPA
  • Elemento di base del progetto sull’AEM come determinato nella prima fase

• Questi valori possono essere impostati come variabili di ambiente per maggiore flessibilità.

Verifica la modifica della pagina in AEM.

• Distribuire il progetto in AEM e passare alla pagina test creata. Ora viene eseguito il rendering del contenuto della pagina e i componenti AEM sono modificabili.