Utöka och konfigurera designimporteraren för landningssidor extending-and-configuring-the-design-importer-for-landing-pages
I det här avsnittet beskrivs hur du konfigurerar och vid behov utökar designimporteraren för landningssidor. Arbeta med landningssidor efter import beskrivs i Landningssidor.
Göra så att designimportören extraherar den anpassade komponenten
Här följer de logiska stegen för att få designimporteraren att känna igen din anpassade komponent
-
Skapa en TagHandler
- En tagghanterare är en POJO som hanterar HTML-taggar av en viss typ. Den typ av HTML-taggar som TagHandler kan hantera definieras via taggHandlerFactory-egenskapen OSGi "tagpattern.name". Den här OSGi-egenskapen är i stort sett en regex som ska matcha den HTML-indatatagg som du vill hantera. Alla kapslade taggar kastas till tagghanteraren för hantering. Om du till exempel registrerar dig för en div som innehåller en kapslad <p> -taggen, <p> -taggen skickas också till din TagHandler och det är upp till dig hur du vill ta hand om den.
- Tagghanteringsgränssnittet liknar ett SAX-innehållshanterargränssnitt. Den tar emot SAX-händelser för varje html-tagg. Som tagghanterare måste du implementera vissa livscykelmetoder som anropas automatiskt av designimportramverket.
-
Skapa dess motsvarande TagHandlerFactory.
- Tagghanterarfabriken är en OSGi-komponent (singleton) som ansvarar för att skapa förekomster av tagghanteraren.
- din tagghanterarfabrik måste visa en OSGi-egenskap med namnet"tagpattern.name", vars värde matchas mot HTML-taggen input.
- Om det finns flera tagghanterare som matchar HTML-taggen för indata väljs den med en högre rankning. Själva rankningen visas som en OSGi-egenskap service.ranking.
- TagHandlerFactory är en OSGi-komponent. Alla referenser som du vill ge till din TagHandler måste vara via den här fabriken.
-
Kontrollera att TagHandlerFactory har en bättre rankning om du vill åsidosätta standardinställningen.
Förbereda HTML för import preparing-the-html-for-import
När du har skapat en importsida kan du importera den fullständiga landningssidan för HTML. Om du vill importera landningssidan för HTML måste du först komprimera innehållet till ett designpaket. Designpaketet innehåller landningssidan för HTML tillsammans med de refererade resurserna (bilder, css, ikoner, skript och så vidare).
I följande exempeltabell visas hur du förbereder HTML för import:
Landing page Cheat Sheet
Postfilens layout och krav zip-file-layout-and-requirements
En exempellayout för zip är följande:
- /index.html -> HTML fil för landningssida
- /css -> för att lägga till i CSS-klientlib
- /img -> alla bilder och resurser
- /js -> för att lägga till i JS-klientlib
Layouten baseras på HTML5-mallens bästa praxis-layout. Läs mer på https://html5boilerplate.com/
Förbereda landningssidan HTML preparing-the-landing-page-html
För att kunna importera HTML måste du lägga till en arbetsyta-div på landningssidan HTML.
Arbetsytans div är en html div med id="cqcanvas" som måste infogas i HTML <body> och måste radbryta innehållet som är avsett för konvertering.
Ett exempel på landningssidan HTML efter tillägg av arbetsytans div är följande:
<!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>
Förbereda HTML för att inkludera redigerbara AEM preparing-the-html-to-include-editable-aem-components
När du importerar en landningssida kan du välja att importera sidan i befintligt skick, vilket innebär att när landningssidan har importerats kan du inte redigera något av de importerade objekten i AEM (du kan fortfarande lägga till ytterligare AEM på sidan).
Innan du importerar landningssidan kanske du vill konvertera vissa delar av landningssidan så att de är redigerbara AEM. På så sätt kan du snabbt redigera delar av landningssidan även efter det att landningssidans design har importerats.
Du gör detta genom att lägga till data-cq-component till lämplig komponent i den HTML-fil som du importerar.
I följande avsnitt beskrivs hur du redigerar din HTML-fil så att du konverterar vissa delar av dina landningssidor till olika redigerbara AEM. Komponenterna beskrivs i detalj på Komponenter för landningssidor.
Begränsningar limitations
Observera följande begränsningar innan du importerar:
Alla attribut, som klass eller id, som används i taggen lt;body> bevaras inte any-attribute-like-class-or-id-applied-on-the-amp-lt-body-tag-is-not-preserved
Om till exempel ett attribut som id eller class tillämpas på body-taggen <body id="container"> bevaras inte efter importen. Det innebär att designen som importeras inte ska ha några beroenden av attributen som används på <body> -tagg.
Dra och släpp zip drag-and-drop-zip
Zip-överföring med dra och släpp stöds inte för Internet Explorer och Firefox version 3.6 och tidigare. Om du vill överföra en design när du använder dessa webbläsare klickar du på släppzonen för att öppna en dialogruta för filöverföring och överför designen med den dialogrutan.
De webbläsare som har stöd för"dra och släpp" i zip-designen är Chrome, Safari5.x, Firefox 4 och senare.
Modernizr stöds inte modernizr-is-not-supported
Modernizr.js är ett javascript-baserat verktyg som identifierar webbläsares inbyggda funktioner och identifierar om de passar för HTML5-element eller inte. Designer som använder Modernizer för att förbättra stödet i äldre versioner av olika webbläsare kan orsaka importproblem i landningssidans lösning. Modernizr.js -skript stöds inte av designimporteraren.
Sidegenskaperna bevaras inte vid import av designpaket page-properties-are-not-preserved-at-the-time-of-importing-design-package
Alla sidegenskaper (t.ex. Anpassad domän, Framtvinga HTTPS, osv.) anges för en sida (som använder mallen Tom landningssida) innan designpaketet importeras, tas bort efter att designen har importerats. Därför rekommenderar vi att du anger sidegenskaperna när du har importerat designpaketet.
Markering endast för HTML antas html-only-markup-assumed
Vid import saneras koden av säkerhetsskäl och för att undvika import och publicering av ogiltig kod. Detta förutsätter att koden bara är för HTML och att alla andra typer av element som t.ex. infogade SVG eller webbkomponenter filtreras bort.
Text text
HTML som infogar en textkomponent ( foundation/components/text) i designpaketet HTML:
<div data-cq-component="text"> <p>This is some editable text</p> </div>
Om du tar med ovanstående kod i HTML görs följande:
- Skapar en redigerbar AEM (
sling:resourceType=foundation/components/text) på landningssidan som skapas efter att designpaketet har importerats. - Anger
textegenskapen för den skapade textkomponenten till HTML idiv.
Kortfattad deklaration om komponenttaggar:
<p data-cq-component="text">Text component shorthand</p>
Text med en lista
Så här lägger du till en text med en lista:
- 1st
- 2nd
som kan redigeras i RTE-redigeraren:
<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>
Text med färg
Så här lägger du till en text med färg (rosa) som kan redigeras i textredigeraren:
<div class="pink" data-cq-component="text"><p>This is pink text.</p><p>It can be edited with the RTE editor</p></div>
Titel title
HTML-kod för att infoga en titelkomponent ( wcm/landingpage/components/title) i designpaketet HTML:
<div data-cq-component="title"> <h1>This is some editable title text</h1> </div>
Om du tar med ovanstående kod i HTML görs följande:
- Skapar en redigerbar AEM
sling:resourceType=wcm/landingpage/components/title) på landningssidan som skapas efter att designpaketet har importerats. - Anger
jcr:titleegenskapen för den skapade titelkomponenten till texten inom rubriktaggen omsluten i div. - Anger
type-egenskap till rubriktaggen, i det här falleth1.
Titelkomponenten stöder 7 typer - h1, h2, h3, h4, h5, h6 och default.
Kortfattad deklaration om komponenttaggar:
<h1 data-cq-component="title">Title component shorthand</h1>
Bild image
HTML-kod som infogar en bildkomponent (grund/komponenter/bild) i designpaketet HTML:
<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>
Om du tar med ovanstående kod i HTML görs följande:
- Skapar en redigerbar AEM-bildkomponent (
sling:resourceType=foundation/components/image) på landningssidan som skapas efter att designpaketet har importerats. - Anger
fileReferenceden skapade bildkomponentens egenskap till den sökväg till vilken bilden som anges i src-attributet importeras. - Anger
alt-egenskapen till värdet för alt-attributet i img-taggen. - Anger
title-egenskapen till värdet för title-attributet i img-taggen. - Anger
widthegenskapen till värdet för width-attributet i img-taggen. - Anger
heightegenskapen till värdet för height-attributet i img-taggen.
Kortfattad deklaration för komponenttagg:
<img data-cq-component="image" src="test.png" alt="Image component shorthand"/>
Absolut URL img src stöds inte i Image component Div absolute-url-img-src-not-supported-within-image-component-div
Om en <img> -tagg med en absolut URL-src används för komponentkonvertering, vilket är lämpligt UnsupportedTagContentException är upphöjt. Följande stöds till exempel inte:
<div data-cq-component="image">
<img src="https://cdn.printfriendly.com/pf-button.gif" alt="Print Friendly and PDF"/>
</div>
I annat fall stöds absoluta URL-bilder för img-taggar som inte ingår i Image Component div.
Komponenter för uppmaning call-to-action-components
Du kan markera en del av landningssidan för import som en"redigerbar Call to action-komponent" - sådana importerade call-to-action-komponenter kan redigeras efter att landningssidan har importerats. AEM innehåller följande CTA-komponenter:
- Klicka på Via länk - Gör att du kan lägga till en textlänk som när du klickar på den leder besökaren till en mål-URL.
- Grafisk länk - Gör att du kan lägga till en bild som besökaren kommer till en mål-URL när du klickar på den.
Klicka genom länken click-through-link
Denna CTA-komponent kan användas för att lägga till en textlänk på landningssidan.
Egenskaper som stöds
- Etikett, med fet stil, kursiv stil och understrykning
- Mål-URL, stöder tredje part och AEM-URL
- Alternativ för sidåtergivning (samma fönster, nytt fönster osv.)
Taggen HTML om du vill ta med klickningen genom komponenten i den importerade zippen. Här mappas href till mål-URL, "Visa produktinformation" mappas till etikett och så vidare.
<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>
Den här komponenten kan användas i alla fristående program eller importeras från zip.
Kortfattad deklaration om komponenttaggar:
<a href="/somelink.html" data-cq-component="clickThroughLink">Click Through Link shorthand</a>
Grafisk länk graphical-link
CTA-komponenten kan användas för att lägga till grafik med länk på landningssidan. Bilden kan vara en enkel knapp eller en grafisk bild som bakgrund. När användaren klickar på bilden kommer användaren till mål-URL:en som anges i komponentegenskaperna. Det ingår i gruppen"Call to Action".
Egenskaper som stöds
- Bildbeskärning, rotering
- Hovringstext, beskrivning, storlek i px
- Mål-URL, stöder tredje part och AEM-URL
- Alternativ för sidåtergivning (samma fönster, nytt fönster osv.)
Taggen HTML om du vill ta med en grafisk länkkomponent i det importerade postnumret. Här mappas href till target url, img src blir återgivningsbilden, "title" tas som hovringstext och så vidare.
<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>
Kortfattad deklaration om komponenttaggar:
<a href="/somelink.html" data-cq-component="clickThroughGraphicalLink"><img src="linkimage.png" alt="Click Through Graphical Link shorthand"/></a>
data-cq-component="clickthroughgraphicallink" -attribut.<div data-cq-component="clickthroughlink"> <a href="https://myURLhere/"><img src="image source here"></a> </div><div data-cq-component="clickthroughgraphicallink"><a class="hasBackground" href="https://myURLhere/"></a></div>css .hasbackground { background-image: pathtoimage }Leadformulär lead-form
Ett lead-formulär är ett formulär som används för att samla in profilinformation för en besökare/lead. Denna information kan lagras och användas senare för att skapa en effektiv marknadsföring utifrån informationen. Informationen omfattar vanligtvis titel, namn, e-postadress, födelsedatum, adress, ränta osv. Det ingår i gruppen"CTA Lead form".
Funktioner som stöds
-
Fördefinierade lead-fält - förnamn, efternamn, adress, dob, kön, about, userId, emailId, submit-knapp är tillgängliga i sidosparken. Dra-och-släpp den nödvändiga komponenten i ditt lead-formulär.
-
Med hjälp av dessa komponenter kan författaren utforma ett fristående lead-formulär, motsvarar dessa fält formulärfält lead. I det fristående eller importerade ZIP-programmet kan användaren lägga till extra fält med cq:form eller cta lead-formulärfält, namnge och utforma dem enligt kraven.
-
Mappa lead-formulärfält med specifika fördefinierade namn för CTA-lead-formulär, till exempel firstName för förnamn i lead-formulär och så vidare.
-
Fält som inte är mappade till lead-formulär mappas till cq:form components - text, radio, checkbox, dropdown, hidden, password.
-
Användaren kan ange titeln med taggen"label" och formateringen med formatattributet"class" (endast tillgängligt för CTA-komponenter för inledande formulär).
-
Tack! Sidan och prenumerationslistan kan anges som en dold parameter i formuläret (finns i index.htm) eller kan läggas till/redigeras från redigeringsfältet i "Början av lead-formuläret"
<input type="hidden" name="redirectUrl" value="/content/we-retail/en/user/register/thank_you"/>
<input type="hidden" name="groupName" value="leadForm"/>
-
Begränsningar som - krävs kan anges i redigeringskonfigurationen för varje komponent.
Taggen HTML om du vill ta med en grafisk länkkomponent i det importerade postnumret. Här mappas"firstName" till lead-formulär firstName och så vidare, förutom kryssrutor - dessa två kryssrutor mappar till cq:form dropdown component.
<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>
Parsys parsys
AEM är en behållarkomponent som kan innehålla andra AEM. Det går att lägga till en parsyskomponent i det importerade HTML. Detta gör att användaren kan lägga till/ta bort redigerbara AEM på landningssidan även efter att den har importerats.
Styckesystemet ger användarna möjlighet att lägga till komponenter med hjälp av sidbrytaren.
HTML-kod för att infoga en parsyskomponent ( foundation/components/parsys) i designpaketet HTML:
<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>
Att ta med markeringen ovan i HTML gör följande:
- Infogar en AEM parsys-komponent (grund/komponenter/parsys) på landningssidan som skapas när designpaketet har importerats.
- Initierar sidsparken med standardkomponenter. Du kan lägga till nya komponenter på landningssidan genom att dra komponenter från sidosparken till den parsytiska komponenten.
- Två titelkomponenter ingår också i parsytan.
Mål target
Målkomponenten visar innehållet i en upplevelse på sidan. Man kan ha många upplevelser som skapats i en kampanj och målkomponenten kan dynamiskt visa innehåll från olika upplevelser för olika användare som besöker sidan.
html-koden som infogar en målkomponent och skapar också olika upplevelser i en kampanj:
<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>
Fler importalternativ additional-importing-options
Förutom att ange om de importerade komponenterna är redigerbara AEM kan du konfigurera följande innan du importerar designpaketet:
- Ange sidegenskaper genom att extrahera metadata som definierats i det importerade HTML.
- Ange teckenuppsättningens kodning i HTML.
- Ersätta importsidmallen.
Ange sidegenskaper genom att extrahera metadata som definierats i importerad HTML setting-page-properties-by-extracting-metadata-defined-in-imported-html
Följande metadata som deklarerats i huvudet på det importerade HTML ska extraheras och bevaras av designimportören som egenskapen "jcr:description":
- <meta name="description" content="">
Lang-attributet som anges i taggen HTML ska extraheras och bevaras av designimportören som egenskapen "jcr:language"
- <html lang="en">
Ange teckenuppsättningens kodning i html specifying-the-charset-encoding-in-the-html
Designimportören läser kodningen som anges i det importerade HTML. Kodningen kan anges enligt följande:
<meta charset="UTF-8">
ELLER
<meta http-equiv="content-type" content="text/html;charset=utf-8">
Om ingen kodning anges i det importerade HTML är standardkodningen som anges av designimportören UTF-8.
Överläggningsmall overlaying-template
Mallen Tom landningssida kan överlagras genom att en ny skapas på: /apps/<appName>/designimporter/templates/<templateName>
Steg för att skapa en ny mall i AEM förklaras här.
Referera en komponent från landningssidan referring-a-component-from-landing-page
Anta att du har en komponent som du vill referera till i HTML med data-cq-component-attribut, så att designimporteraren återger en komponent som finns på den här platsen. t.ex. vill du referera till tabellkomponenten ( resourceType = /libs/foundation/components/table). Följande ska läggas till i HTML:
<div data-cq-component="/libs/foundation/components/table">foundation table</div>
Sökvägen i data-cq-komponenten ska vara resourceType för komponenten.
Bästa praxis best-practices
Du bör inte använda CSS-väljare som liknar följande för element som är markerade för komponentkonvertering vid import.
Detta beror på att ytterligare HTML-element som <div> -taggen läggs till i den genererade HTML-koden efter importen.
- Skript som använder en struktur som liknar den ovan rekommenderas inte heller för element som är markerade för konvertering till AEM.
- Användning av format i märkordstaggar för komponentkonvertering som <div data-cq-component="”*”"> rekommenderas inte.
- Designlayouten bör följa vedertagna standarder från HTML5 Boilerplate. Läs mer om: https://html5boilerplate.com/.
Konfigurerar OSGI-moduler configuring-osgi-modules
Komponenterna som visar egenskaper som kan konfigureras via OSGI-konsolen är följande:
- Import av landningssiddesign
- Landing Page Builder
- Mobile Landing Page Builder
- Inmatningsförprocessor för landningssida
Tabellen nedan beskriver kortfattat egenskaperna:
Om du behöver göra några ändringar i sökmönstret måste du lägga till omvända snedstreck manuellt när du öppnar egenskapsredigeraren för felix för att undvika regex-metatecken. Om du inte lägger till omvända snedstreck manuellt anses regex vara ogiltigt och ersätter inte det äldre.
/\&ast *CQ_DESIGN_PATH *\*/ *(['"])CQ_DESIGN_PATH med VIPURL i sökmönstret bör sökmönstret se ut så här:/\* *VIPURL *\*/ *(['"])Felsökning troubleshooting
När du importerar designpaketet kan det uppstå flera fel, som beskrivs i det här avsnittet.
Initiering av sidosparken med komponenter som är relevanta för landningssidan initialization-of-sidekick-with-landing-page-relevant-components
Om designpaketet innehåller en parsys-komponentkod börjar sidosparken visa relevanta komponenter för landningssidan efter importen. Du kan dra och släppa nya komponenter på den parsytiska komponenten på landningssidan. Du kan också gå till designläget och lägga till nya komponenter i sidosparken.
Felmeddelanden som visas vid import error-messages-displayed-during-import
Om fel uppstår (t.ex. om det importerade paketet inte är en giltig zip-fil), kommer designimporten inte att importera paketet och i stället visas ett felmeddelande ovanpå sidan precis ovanför dra-och-släpp-rutan. Här finns exempel på felscenarier. När du har åtgärdat felet kan du återimportera den uppdaterade zippen till samma tomma landningssida. Olika scenarier där fel uppstår är följande:
- Det importerade designpaketet är inte ett giltigt zip-arkiv.
- Det importerade designpaketet innehåller inte index.html på den översta nivån.
Varningar som visas efter import warnings-displayed-after-import
Om det finns varningar (t.ex. HTML avser bilder som inte finns i paketet), kommer designimportören att importera zip-filen, men samtidigt visa en lista med problem/varningar i resultatrutan. Om du klickar på problemlänken visas en lista med varningar som pekar på eventuella problem i designpaketet. Olika scenarier där varningar fångas upp och visas av designimportören är följande:
- HTML avser bilder som inte finns i paketet.
- HTML avser skript som inte finns i paketet.
- HTML avser format som inte finns i paketet.
Var lagras filerna i ZIP-filen i AEM? where-are-the-files-of-the-zip-file-being-stored-in-aem
När landningssidan har importerats, filerna (bilder, css, js osv.) i designpaketet lagras på följande plats i AEM:
/etc/designs/default/canvas/content/campaigns/<name of brand>/<name of campaign>/<name of landing page>
Anta att landningssidan skapas under kampanjen We.Retail och att namnet på landningssidan är myBlankLandingPage så är platsen där ZIP-filer lagras följande:
/etc/designs/default/canvas/content/campaigns/geometrixx/myBlankLandingPage
Formateringen bevaras inte formatting-not-preserved
Tänk på följande begränsningar när du skapar CSS:
Om en text och (redigerbar) bild ser ut som följande:
<div class="box">
<p><div data-cq-component="image"><img src="assets/image.jpg" width="115"
height="116" /></div>Some Text </p>
</div>
med en CSS tillämpad på klassen box enligt följande:
.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; }
Sedan box img används i designimportören, den resulterande landningssidan verkar inte ha bevarat formateringen. För att undvika detta bör du vara medveten om att AEM lägger till div-taggar i CSS och skriver om koden därefter. Annars är vissa CSS-regler ogiltiga.
.box img
{ float:right; margin: 0 0 5px 5px; border: 1px #343434 solid; }