Monday, 18 May 2015

Hide extra component divs in CQ/AEM

This can be really tedious sometimes when, while developing a component in CQ/AEM, the extra CQ generated divs surrounding your component might disturb the HTML structure intended.

A common usecase is a carousel component in which, lets suppose, for every slide we drop in the carousel wrapper, no extra component div is required just to make sure the plugin driving the carousel runs fine.

An ideal structure would be :
<ul>
<li></li>
<li></li> 
<li></li>  
<li></li>
</ul>

If each li comes from a carousel slide component, here is what it looks like in cq:

<ul>
<div class="carousel-slide"><li></li</div>
<div class="carousel-slide"><li></li</div> 
<div class="carousel-slide"><li></li</div>  
<div class="carousel-slide"><li></li</div>
</ul>

This structure sometimes prevents the carousel JS plugins to stop behaving the way they should.

Solution:
One of the alternatives is to use cq:noDecoration="true", but that makes the component un-editable. Neither the editconfig not the dialog is visible.
Thus, an ideal approach would be :

Just before cq including the component, add this code snippet:

 <%
                        IncludeOptions opts = IncludeOptions.getOptions(request, true);
                        opts.setDecorationTagName("");

 %>
This would require an import:
<%@ page import="com.day.cq.wcm.api.components.IncludeOptions" %>

Now cq inlcude your component, for eg:

<cq:include path="slide"> resourceType="/component/content/carousel-slide"/>

Hope this helps! 

1 comment: