Questa sezione descrive come configurare ed eventualmente estendere la funzione Importazione progettazione per le pagine di destinazione. L’utilizzo delle pagine di destinazione dopo l’importazione è trattato in Pagine di destinazione.
Estrazione di un componente personalizzato tramite Importazione progettazione
Passaggi logici per il riconoscimento di un componente personalizzato da parte di Importazione progettazione
Creare un gestore di tag
Crea il tagHandlerFactory corrispondente.
Assicurati che il tuo TagHandlerFactory abbia una classificazione migliore se desideri ignorare il valore predefinito.
L’importazione di progettazione, usata per importare le pagine di destinazione, è diventata obsoleta in AEM 6.5.
Dopo aver creato una pagina di importazione, puoi importare la pagina di destinazione completa di HTML. Per importare la pagina di destinazione HTML, occorre innanzitutto creare un pacchetto di progettazione, ossia un file .zip del suo contenuto. Il pacchetto di progettazione contiene la pagina di destinazione HTML e tutti i contenuti a cui si fa riferimento (immagini, css, icone, script e così via).
Esempio di come preparare la pagina HTML da importare:
Foglio di riferimento della pagina di destinazione
A questo punto, i file ZIP possono solo contenere una pagina HTML o una parte di una pagina.
Esempio di layout del file ZIP:
Il layout si basa sulle best practice HTML5 Boilerplate. Ulteriori informazioni su https://html5boilerplate.com/
Come minimo, il pacchetto di progettazione deve contengono un index.html file a livello principale. Se la pagina di destinazione da importare ha anche una versione per dispositivi mobili, il file ZIP deve contenere un mobile.index.html insieme a index.html a livello principale.
Per poter importare il file HTML, occorre aggiungere un elemento canvas div alla pagina di destinazione HTML.
L’elemento canvas div è un HTML div con id="cqcanvas"
che devono essere inseriti all’interno della HTML <body>
e deve racchiudere il contenuto destinato alla conversione.
Snippet di esempio della pagina di destinazione HTML dopo l’aggiunta dell’elemento canvas div:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
</head>
<body>
<div id="cqcanvas">
<!-- HTML content intended for conversion -->
</div>
</body>
</html>
Quando importate una pagina di destinazione, potete scegliere se importare la pagina così com’è. In questo caso, una volta importata la pagina di destinazione non sarà più possibile modificare gli elementi importati in AEM. Tuttavia sarà possibile aggiungere alla pagina altri componenti AEM.
Prima di importare la pagina di destinazione, potete eventualmente convertire alcune sue parti in modo da ottenere componenti AEM modificabili. Questo consente di modificare rapidamente alcune parti della pagina di destinazione anche dopo l’importazione.
A questo scopo occorre aggiungere l’attributo data-cq-component
al componente appropriato nel file HTML da importare.
Di seguito viene descritto come modificare il file HTML al fine di convertire alcune parti della pagina di destinazione in diversi componenti AEM modificabili. I componenti sono descritti in dettaglio in Componenti delle pagine di destinazione.
La marcatura HTML per convertire parti della pagina di destinazione in componenti AEM dispone di una forma estesa e di una dichiarazione di tag con abbreviazioni. Per ciascun componente vengono descritte entrambe queste forme.
Prima di procedere all’importazione, considerate i seguenti limiti:
Se un attributo come id o class viene applicato, ad esempio, al tag body <body id="container">
quindi non viene conservato dopo l’importazione. Pertanto, la progettazione da importare non deve avere dipendenze dagli attributi applicati al <body>
tag .
Il caricamento ZIP tramite trascinamento non è supportato da Internet Explorer e Firefox versione 3.6 e precedenti. Per caricare una progettazione con uno di questi browser, fate clic sulla zone di rilascio del file per aprire una finestra di dialogo che consente di caricare la progettazione.
I browser che supportano il "drag and drop" dello zip di progettazione sono Chrome, Safari5.x, Firefox 4 e versioni successive.
Modernizr.js
è uno strumento basato su javascript che rileva le funzionalità native dei browser e se queste sono o meno adatte per elementi html5. Le progettazioni che utilizzano Modernizr per estendere il supporto delle versioni precedenti di vari browser possono provocare problemi di importazione nella soluzione della pagina di destinazione. Gli script Modernizr.js
non sono supportati da Importazione progettazione.
Eventuali proprietà pagina (ad esempio Dominio personalizzato, Applicazione HTTPS ecc.) impostate per una pagina (che utilizza il modello Pagina di destinazione vuota) prima dell’importazione del pacchetto di progettazione vengono perdute dopo l’importazione. Si consiglia quindi di impostare le proprietà pagina dopo l’importazione del pacchetto di progettazione.
Durante l’importazione il codice viene bonificato per motivi di sicurezza e per evitare di importare e pubblicare un codice non valido. Ciò presuppone che solo il codice HTML e tutte le altre forme di elementi, ad esempio i componenti web o SVG in linea, saranno esclusi dal filtro.
Marcatura HTML per inserire un componente testo (foundation/components/text
) nel codice HTML in un pacchetto di progettazione:
<div data-cq-component="text"> <p>This is some editable text</p> </div>
Risultato dell’inclusione nell’HTML della marcatura riportata qui sopra:
sling:resourceType=foundation/components/text
) nella pagina di destinazione creata dopo l’importazione del pacchetto di progettazione.text
del componente di testo creato nell’HTML racchiuso nell’elemento div
.Dichiarazione abbreviata del tag del componente:
<p data-cq-component="text">Text component shorthand</p>
Testo con elenco
Per aggiungere un testo con un elenco:
che possa essere modificato nell’editor RTE:
<div data-cq-component="text"><p>This is text with a list:</p><ul><li>1st</li><li>2nd</li></ul><p>It can be edited with the RTE editor</p></div>
Testo con colore
Per aggiungere un testo con colore (rosa) che possa essere modificato nell’editor RTE:
<div class="pink" data-cq-component="text"><p>This is pink text.</p><p>It can be edited with the RTE editor</p></div>
Marcatura di HTML per inserire un componente titolo ( wcm/landingpage/components/title
) in HTML all’interno del pacchetto di progettazione:
<div data-cq-component="title"> <h1>This is some editable title text</h1> </div>
Risultato dell’inclusione nell’HTML della marcatura riportata qui sopra:
sling:resourceType=wcm/landingpage/components/title
) nella pagina di destinazione creata dopo l’importazione del pacchetto di progettazione.jcr:title
del componente titolo creato sul testo all’interno del tag del titolo racchiuso in un elemento div.type
sul tag del titolo, in questo caso h1
.Il componente titolo supporta 7 tipi: h1, h2, h3, h4, h5, h6
e default
.
Dichiarazione abbreviata del tag del componente:
<h1 data-cq-component="title">Title component shorthand</h1>
Marcatura HTML per inserire un componente immagine (foundation/components/image) nel codice HTML in un pacchetto di progettazione:
<div data-cq-component="image">
<img src="img/video1.png" alt="Video about Polar Brake Goggles in action" title="Polar Brake Goggles" width="300" height="200" />
</div>
Risultato dell’inclusione nell’HTML della marcatura riportata qui sopra:
sling:resourceType=foundation/components/image
) nella pagina di destinazione creata dopo l’importazione del pacchetto di progettazione.fileReference
del componente immagine creato sul percorso nel quale viene importata l’immagine specificata dall’attributo src.alt
sul valore dell'attributo alt nel tag img.title
sul valore dell'attributo title nel tag img.width
sul valore dell'attributo width nel tag img.height
sul valore dell'attributo height nel tag img.Dichiarazione abbreviata del tag del componente:
<img data-cq-component="image" src="test.png" alt="Image component shorthand"/>
Se <img>
si tenta di eseguire la conversione del componente con un URL assoluto src, un UnsupportedTagContentException viene cresciuto. Esempio di riferimento non supportato:
<div data-cq-component="image">
<img src="https://cdn.printfriendly.com/pf-button.gif" alt="Print Friendly and PDF"/>
</div>
Fatta eccezione di questo caso, immagini con URL assoluto sono supportate per i tag img che non sono parte dell’elemento div di un componente immagine.
Puoi contrassegnare una parte della pagina di destinazione da importare come "componente Invito all’azione modificabile". Tali componenti importati da invito all’azione possono essere modificati dopo l’importazione della pagina di destinazione. AEM include i seguenti componenti CTA (Call To Action, invito all’azione):
Questo componente CTA può essere usato per aggiungere un testo con collegamento sulla pagina di destinazione.
Proprietà supportate
Tag HTML per includere un componente collegamento ClickThrough nel file ZIP importato. Qui href viene mappato sull’URL di destinazione, "Visualizza dettagli prodotto" viene mappato sull’etichetta e così via.
<div id="cqcanvas">
.
.
<div data-cq-component="clickThroughLink">
<a href="/content/we-retail/us/en/products/equipment/snow-sports/flying-snowboard.html">View Product Details ></a>
</div>
.
.
</div>
Questo componente può essere usato in qualsiasi applicazione indipendente oppure può essere importato da un pacchetto ZIP.
Dichiarazione abbreviata del tag del componente:
<a href="/somelink.html" data-cq-component="clickThroughLink">Click Through Link shorthand</a>
Questo componente Invito all'azione può essere usato per aggiungere un’immagine come collegamento sulla pagina di destinazione. L’immagine può essere un semplice pulsante o un’immagine grafica di sfondo. Quando un visitatore fa clic sull’immagine, viene portato all’URL di destinazione specificato nelle proprietà del componente. Fa parte del gruppo “Invito all’Azione”.
Proprietà supportate
Tag HTML per includere un componente collegamento grafico nel file ZIP importato. Qui href viene mappato sull’URL di destinazione, img src è l’immagine di rendering, "title" viene preso come testo al passaggio del mouse e così via.
<div id="cqcanvas">
<div data-cq-component="clickThroughGraphicalLink"><a href="https://www.adobe.com/go/wem"><img src="img/call-to-action-button.png" title="Click Here to Learn More" /></a></div>
</div>
Dichiarazione abbreviata del tag del componente:
<a href="/somelink.html" data-cq-component="clickThroughGraphicalLink"><img src="linkimage.png" alt="Click Through Graphical Link shorthand"/></a>
Per creare un collegamento grafico, è necessario racchiudere un tag di ancoraggio e un tag immagine all’interno di un elemento div con data-cq-component="clickthroughgraphicallink"
attributo.
Esempio: <div data-cq-component="clickthroughlink"> <a href="https://myURLhere/"><img src="image source here"></a> </div>
Non sono supportati altri metodi per associare un’image con un tag di ancoraggio utilizzando CSS, ad esempio la marcatura seguente non funziona:
<div data-cq-component="clickthroughgraphicallink">
<a class="hasBackground" href="https://myURLhere/"></a>
</div>
con un css .hasbackground { background-image: pathtoimage }
I moduli lead vengono utilizzati per raccogliere le informazioni profilo di un visitatore o lead. Tali informazioni vengono memorizzate e usate più tardi per attività di marketing basate su informazioni. Le informazioni comprendono in genere qualifica, nome, indirizzo e-mail, data di nascita, interessi e così via. Fa parte del gruppo "Modulo lead CTA".
Funzioni supportate
Campi per lead predefiniti: nome, cognome, indirizzo, punto di accesso, genere, informazioni, ID utente, ID e-mail, pulsante Invia sono disponibili nella barra laterale. È sufficiente trascinare il componente richiesto nel modulo per lead.
Inserendo questi componenti è possibile creare moduli per lead indipendenti, con campi per moduli lead. In applicazioni ZIP indipendenti o importate, gli utenti possono aggiungere altri campi utilizzando i campi per modulo cq:form o di invito all’azione, assegnare loro un nome e progettarli in base alle proprie esigenze.
Puoi mappare i campi per moduli lead utilizzando nomi predefiniti specifici per i moduli lead CTA, ad esempio firstName per il nome nel modulo per lead e così via.
I campi che non vengono mappati sul modulo lead vengono mappati su componenti cq:form: testo, pulsante di scelta, casella di selezione, menu a comparsa, nascosto e password.
L’utente può fornire il titolo utilizzando il tag "label" e lo stile utilizzando l’attributo di stile "class" (disponibile solo per i componenti per modulo lead CTA).
La pagina di ringraziamento e l’elenco degli abbonamenti possono essere forniti come parametro nascosto del modulo (presente nell’index.htm) oppure possono essere aggiunti/modificati dalla barra di modifica di "Inizio del modulo lead"
<input type="hidden" name="redirectUrl" value="/content/we-retail/en/user/register/thank_you"/>
<input type="hidden" name="groupName" value="leadForm"/>
Vincoli come - possono essere forniti dalla configurazione di modifica di ciascun componente.
Tag HTML per includere un componente collegamento grafico nel file ZIP importato. Qui "firstName" è mappato su firstName del modulo lead e così via, ad eccezione delle caselle di controllo - queste due caselle di controllo vengono mappate sul componente a discesa cq:form.
<div id="cqcanvas">
<div id="form_wrapper">
<h2>NEWSLETTER SIGN UP</h2>
<div data-cq-component="leadFormGeneration">
<form method="post" action="#" onsubmit="return popupBox()">
<label for="firstName" class="checkText">
FIRST NAME
</label><br />
<input name="firstName" class="text pink" type="text" /><br />
<label for="lastName" class="checkText">
LAST NAME
</label><br />
<input name="lastName" class="text pink" type="text" /><br />
<label for="emailId" class="checkText">
EMAIL ADDRESS
</label><br />
<input name="emailId" class="text pink" type="text" /><br />
<div class="checkboxes">
<input type="checkbox" class="check" name="send_news" /> <label for="send_news" class="checkText">Send me the latest We.Retail news and announcements.</label><br />
<input type="checkbox" class="check" name="send_offers" /> <label for="send_offers" class="checkText">Send me We.Retail deals and special offers.</label><br />
</div>
<input type="submit" name="submit" class="submit pink" value="Sign Up >" />
</form>
</div>
</div>
Il componente AEM parsys è un contenitore per altri componenti AEM. È possibile aggiungere un componente parsys nell’HTML importato. Questo consente di aggiungere o eliminare componenti AEM modificabili nella pagina di destinazione anche dopo l’importazione.
Il sistema paragrafo offre agli utenti la possibilità di aggiungere componenti mediante la barra laterale.
Marcatura HTML per inserire un componente parsys (foundation/components/parsys
) nel codice HTML in un pacchetto di progettazione:
<div data-cq-component="parsys">
<div data-cq-component="title"><h2>ULTIMATE PROTECTION</h2></div>
<div data-cq-component="title"><h3>ON SALE</h3></div>
</div>
Risultato dell’inclusione nell’HTML della marcatura riportata qui sopra:
Il componente Destinazione mostra i contenuti di un’esperienza sulla pagina. È possibile creare numerose esperienze in una campagna e il componente Destinazione può mostrare in modo dinamico i contenuti da diverse esperienze per i diversi visitatori della pagina.
Marcatura HTML per inserire un componente Destinazione e creare diverse esperienze in una campagna:
<div data-cq-component="target">
<section data-cq-component="experience" data-cq-experience="default">
<p data-cq-component="text">Default content. Select this campaign in client context to view other experiences</p>
</section>
<section data-cq-component="experience" data-cq-segment="over-30">
<p data-cq-component="text">Content for Over 30</p>
</section>
<section data-cq-component="experience" data-cq-segment="under-30">
<p data-cq-component="text">Content for Under 30</p>
</section>
</div>
Oltre a specificare se i componenti importati sono componenti AEM modificabili, potete anche configurare quanto segue prima di importare il pacchetto di progettazione:
I seguenti metadati dichiarati nella testa del HTML importato vengono estratti e conservati da Importazione progettazione come proprietà "jcr:description":
L’attributo Lang impostato nel tag HTML viene estratto e mantenuto da Importazione progettazione come proprietà "jcr:language"
Importazione progettazione legge la codifica specificata nell’HTML importato. La codifica può essere specificata come segue:
<meta charset="UTF-8">
OPPURE
<meta http-equiv="content-type" content="text/html;charset=utf-8">
Se non si specifica alcuna codifica nell’HTML importato, Importazione progettazione imposta la codifica predefinita UTF-8.
Per sovrapporre il modello Pagina di destinazione vuota, createne uno nuovo in: /apps/<appName>/designimporter/templates/<templateName>
Vengono descritti i passaggi per la creazione di un nuovo modello in AEM qui.
Supponiamo che vogliate fare riferimento a un componente nell’HTML utilizzando l’attributo data-cq-component in modo che Importazione progettazione effettui il rendering del componente. Ad esempio, per fare riferimento al componente tabella ( resourceType = /libs/foundation/components/table
). è necessario aggiungere quanto segue all’HTML:
<div data-cq-component="/libs/foundation/components/table">foundation table</div>
Il percorso in data-cq-component deve corrispondere al resourceType del componente.
Non è consigliato usare selettori CSS simili ai seguenti con elementi contrassegnati per la conversione del componente durante l’importazione.
E > F | un elemento F figlio di un elemento E | Combinatore di bambini |
---|---|---|
E > F | un elemento F immediatamente preceduto da un elemento E | Combinazione di pari livello adiacente |
E ~ F | un elemento F preceduto da un elemento E | Combinazione generale di pari livello |
E:root | un elemento E, radice del documento | pseudoclassi strutturali |
E:nth-child(n) | un elemento E, n-esimo figlio del proprio elemento padre | pseudoclassi strutturali |
E:nth-last-child(n) | un elemento E, n-esimo figlio del proprio elemento padre, a partire dall’ultimo | pseudoclassi strutturali |
E:nth-of-type(n) | un elemento E, n-esimo elemento di pari livello del proprio tipo | pseudoclassi strutturali |
E:nth-last-of-type(n) | un elemento E, n-esimo elemento di pari livello del proprio tipo, a partire dall’ultimo | pseudoclassi strutturali |
Ciò è dovuto al fatto che elementi HTML aggiuntivi come <div> vengono aggiunti all’HTML generato dopo l’importazione.
I componenti con proprietà configurabili tramite la console OSGI sono i seguenti:
Le proprietà sono riassunte nella tabella seguente:
Componente | Nome proprietà | Descrizione proprietà |
Importazione progettazione per pagina di destinazione | Filtro estrazione | Elenco di espressioni regolari da usare per filtrare i file dall’estrazione. Gli elementi ZIP che corrispondono a qualsiasi dei pattern specificati vengono esclusi dall’estrazione |
Generazione pagina di destinazione | Pattern file | È possibile configurare il Generatore di pagine di destinazione per gestire i file HTML che corrispondono a un’espressione regolare definita dal pattern di file. |
Generazione pagina di destinazione per dispositivi mobili | Pattern file | È possibile configurare il Generatore di pagine di destinazione per gestire i file HTML che corrispondono a un’espressione regolare definita dal pattern di file. |
Gruppi dispositivo | Elenco dei gruppi di dispositivi da supportare. | |
Pre-elaborazione pagina di destinazione | Pattern di ricerca | Pattern da cercare, nei contenuti dell’archivio. A questa espressione regolare corrisponde la riga del contenuto della voce per riga. Alla corrispondenza, il testo corrispondente viene sostituito con il pattern di sostituzione specificato. Vedere la nota di seguito sui limiti attuali della pre-elaborazione della pagina di destinazione. |
Pattern di sostituzione | Pattern con cui sostituire la corrispondenza trovata. È possibile utilizzare riferimenti di gruppo regex come $1, $2. Inoltre, questo pattern supporta parole chiave come {designPath} che vengono risolte con il valore effettivo durante l’importazione. |
Limite attuale della pre-elaborazione della pagina di destinazione:
Se dovete apportare delle modifiche al pattern di ricerca, quando aprite l’editor di proprietà Felix dovete aggiungere manualmente i caratteri di barra rovesciata per effettuare l’escape dei metacaratteri regex. In caso contrario, il regex viene considerato non valido e non potrà sostituire il precedente.
Ad esempio, se la configurazione predefinita è
/\* *CQ_DESIGN_PATH *\*/ *(['"])
E devi sostituire >CQ_DESIGN_PATH
con VIPURL
nel pattern di ricerca, il pattern di ricerca deve essere simile al seguente:
/\* *VIPURL *\*/ *(['"])
Quando si importa il pacchetto di progettazione, si potrebbero riscontrare alcuni errori, descritti in questa sezione.
Se il pacchetto di progettazione contiene una marcatura di componente parsys, dopo l’importazione la barra laterale inizia a mostrare componenti relativi alla pagina di destinazione. Potete rilasciare nuovi componenti sul componente parsys nella pagina di destinazione. Potete inoltre passare alla modalità di progettazione e aggiungere nuovi componenti alla barra laterale.
In caso di errori (ad esempio, se il pacchetto importato non è un file ZIP valido), l’importazione di progettazione non importa il pacchetto e visualizza invece un messaggio di errore sulla pagina appena sopra la casella di trascinamento. Seguono alcuni esempi di scenari di errore. Una volta corretto l’errore, potete importare nuovamente il file ZIP aggiornato nella stessa pagina di destinazione vuota. Diversi scenari in cui si verifica un errore:
In caso di avvisi (ad esempio, se HTML fa riferimento a immagini che non esistono nel pacchetto), Importazione progettazione importa il file ZIP e visualizza nel contempo un elenco di problemi/avvisi nel riquadro dei risultati. Facendo clic sul collegamento dei problemi, viene visualizzato un elenco di avvisi che segnalano eventuali problemi nel pacchetto di progettazione. Alcuni scenari di avvertenze rilevate e visualizzate da Importazione progettazione:
Dopo l’importazione di una pagina di destinazione, i file (immagini, css, js, ecc.) nel pacchetto di progettazione sono memorizzati nel seguente percorso in AEM:
/etc/designs/default/canvas/content/campaigns/<name of brand>/<name of campaign>/<name of landing page>
Supponiamo che la pagina di destinazione venga creata nella campagna We.Retail e che il nome della pagina di destinazione sia myBlankLandingPage il percorso in cui i file Zip vengono memorizzati è il seguente:
/etc/designs/default/canvas/content/campaigns/geometrixx/myBlankLandingPage
Quando create il CSS, tenete presenti i seguenti limiti:
Se un testo e un’immagine (modificabile) sono simili ai seguenti:
<div class="box">
<p><div data-cq-component="image"><img src="assets/image.jpg" width="115"
height="116" /></div>Some Text </p>
</div>
con un CSS applicato alla classe box
come segue:
.box
{ width: 450px; padding:10px; border: 1px #C5DBE7 solid; margin: 0px auto 0 auto; background-image:url(assets/box.gif); background-repeat:repeat-x,y; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#6D6D6D; }
Then box img
viene utilizzato in Importazione progettazione, la formattazione della pagina di destinazione risultante non viene mantenuta. Per ovviare a questo problema, tenete presente che AEM aggiunge i tag div nel CSS e riscrive di conseguenza il codice. In caso contrario alcune regole CSS risulterebbero non valide.
.box img
{ float:right; margin: 0 0 5px 5px; border: 1px #343434 solid; }
Inoltre, i designer devono essere consapevoli che solo il codice all’interno del id=cqcanvas Il tag viene riconosciuto dall’importazione, altrimenti la progettazione non viene mantenuta.