Using AEM Design Importer for Landing Pages

Jan 30, 2016 · 3 minute read · Comments
AEM

AEM has a feature that makes very easy to create landing pages for campaigns. Basically what we need to do is:

Prepare the HTML
Prepare a ZIP file containing the HTML created and the assets referred
Import them on AEM

In order to demonstrate this I’ve forked the startbootstrap-landing-page project.

Prepare the HTML

To import the page, the zip file must contain at least the index.html file.

But it also could contain other assets like images, css and js files.

The html should contain an div with id “cqcanvas”. This Div identifies the HTML portion that will be converted.

Only with the canvas div we can import a page, but we can not edit anything on AEM.

We can add some additional attributes to the HTML in order to inform AEM which component it should use for that HTML tag.

We can use for example attributes like these:

<p data-cq-component="text">Text component shorthand</p>
<h1 data-cq-component="title">Title component shorthand</h1>

We can find the reference to the components in the documentation.

Changing the startbootstrap-landing-page to be imported

The first step we need to do is create the canvas div.

Basically we’ve enclosed all the body content into the canvas div.

That’s the only thing we need to do in order to import this HTML into AEM.

Then to allow the content edition when imported we added the data-cq-component attribute to some HTML elements, like:

<h1 data-cq-component="title">Landing Page</h1>
<h3 data-cq-component="title">A Template by Start Bootstrap</h3>

It also works for images like below:

<img data-cq-component="image" src="img/phones.png" alt="">

After the changes we just need to package the assets into a ZIP file and upload to a Importer Page on AEM.

Some Limitations found when importing the landing Page

When I tried to use the startbootstrap-landing-page project, I faced problems in two places:

Titles
Images

Titles

In the original HTML we have an Title with this HTML:

<h2 class="section-heading">3D Device Mockups<br>by PSDCovers</h2>

If we simply try to add the data-cq-component=“title” to the h2 like below:

<h2 data-cq-component="title" class="section-heading">3D Device Mockups<br>by PSDCovers</h2>

We got an error when uploading the zip file, saying the Title supports only H tags. So, to test I removed the <br> from those blocks.

Images

For this template I got a problem because the image tag has a class attribute that is not preserved when imported. So, to keep the same layout after the import I changed the HTML and the css a bit in order to apply the style using a css class in the enclosing div.

Conclusion

This is a real nice feature and allows marketers to create landing pages very quickly. We need only to care about the way we create the HTML code to avoid some problems like these I faced.

The final code is on github.

You can see the template in action in the short video below:

I hope you enjoyed.

Xico Junior