<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>
Setting page properties by extracting the metadata defined in the imported HTML.
Specifying the charset encoding in the HTML.
Overlaying the importer page template.
Following metadata declared in the head of the imported HTML shall be extracted and preserved by design importer as property “jcr:description”:
Specifying the charset encoding in the html specifying-the-charset-encoding-in-the-html
The design importer reads the encoding specified in the imported HTML. Encoding can be specified as follows:
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
If no encoding is specified in the imported HTML, then the default encoding set by the design importer is UTF-8.
Overlaying template overlaying-template
The Blank Landing Page template can be over layed by creating a one at: /apps/<appName>/designimporter/templates/<templateName>
Steps for creating a template in AEM are explained under Templates.
Referring a component from Landing page referring-a-component-from-landing-page
Suppose you have a component which you want to reference in your HTML using data-cq-component attribute such that the design importer renders a component include at this place. For example, you want to reference the table component ( resourceType = /libs/foundation/components/table). Following needs to be added in the HTML:
<div data-cq-component="/libs/foundation/components/table">foundation table</div>
The path in the data-cq-component should be the resourceType of the component.
Best Practices best-practices
Use of CSS selectors similar to following ones is not recommended for use with elements which are marked for component conversion on import.
an F element child of an E element
E + F
an F element immediately preceded by an E element
E ~ F
an F element preceded by an E element
E:root
an E element, root of the document
E:nth-child(n)
an E element, the n-th child of its parent
E:nth-last-child(n)
an E element, the n-th child of its parent, counting from the last one
E:nth-of-type(n)
an E element, the n-th sibling of its type
E:nth-last-of-type(n)
an E element, the n-th sibling of its type, counting from the last one
This is because additional html elements like <div> tag are added to the generated Html after the import.
Scripts relying on the structure similar to above also are not recommended for use with elements marked for conversion to AEM components.
Use of styles on the markup tags for component conversion like <div data-cq-component=“*”> is not recommended.
The design layout should follow best practices from HTML5 Boilerplate. Read more on: https://html5boilerplate.com/.
Landing Page Design Importer
Extract Filter
The list of regular expressions to be used for filtering files from extraction.
Zip entries matching any of the specified patterns are excluded from extraction
Landing Page Builder
File Pattern
The Landing Page Builder can be configured to handle HTML files matching a regular expression as defined by file pattern.
Mobile Landing Page Builder
File Pattern
The Landing Page Builder can be configured to handle HTML files matching a regular expression as defined by file pattern.
Device Groups
The list of device groups to be supported.
Landing Page Entry Preprocessor
Search Pattern
The pattern to search for, in the archive entry contents. This regular expression is matched with the entry content line by line. Upon match, the matching text is replaced with the replacement pattern specified.
See note below regarding current limitations of landing page entry preprocessor.
Replace Pattern
The pattern that replaces the matches found. You may use regex group references like $1, $2. Also, this pattern supports keywords like {designPath} that get resolved with the actual value during import.
Current limitation of Landing Page Entry Preprocessor:
If you need to make any changes to the search pattern, when you open the felix property editor, you need to manually add backslash characters to escape the regex metacharacters. If you do not manually add backslash characters, the regex is considered invalid and will not replace the older one.
For example, if the default configuration is
And you need to replace CQ_DESIGN_PATH with VIPURL in the search pattern, then your search pattern should look like this:
/\* *VIPURL *\*/ *(['"])
Troubleshooting troubleshooting
When importing the design package, you may encounter several errors, described in this section.
Initialization of sidekick with Landing Page relevant components initialization-of-sidekick-with-landing-page-relevant-components
If the design package contains a Parsys component markup, then after importing, the sidekick starts showing landing-page relevant components. You can drag and drop new components onto the Parsys component within your landing page. You can also go to the design mode and add new components to the sidekick.
Error messages displayed during import error-messages-displayed-during-import
If there was any errors (for example, the imported package is not a valid zip), the design import does not import the package. Instead, an error message is displayed on top of the page just above the drag and drop box. Examples of error scenarios are stated here. After correcting the error, you can reimport the updated zip onto the same blank landing page. Different scenarios where errors are thrown are as follows:
Warnings displayed after import warnings-displayed-after-import
If there are any warnings (for example, HTML refers to images that do not exist within the package), the design importer imports the zip but at the same time display a list of issues/warnings on the Result Pane, Clicking on the issues link, will display a list of warnings which point out any issues within the design package. Different scenarios where warnings are caught and displayed by design importer are as follows:
HTML refers to images that do not exist within the package.
HTML refers to scripts that do not exist within the package.
HTML refers to styles that do not exist within the package.
Where are the files of the ZIP file being stored in AEM? where-are-the-files-of-the-zip-file-being-stored-in-aem
After the landing page has been imported, the files (images, css, js, and so on) within the design package are stored in the following location in AEM:
/etc/designs/default/canvas/content/campaigns/<name of brand>/<name of campaign>/<name of landing page>
Suppose that the landing page is created under the campaign We.Retail and the name of the landing page is myBlankLandingPage then the location were Zip files are stored is as follows:
/etc/designs/default/canvas/content/campaigns/geometrixx/myBlankLandingPage
When creating your CSS, be aware of the following limitations:
If a text and (editable) image are like the following:
<div class="box">
<p><div data-cq-component="image"><img src="assets/image.jpg" width="115"
height="116" /></div>Some Text </p>
