Adobe Experience Manager Sites & More

aleksandrsp9196 · 4/3/17

I am a newbie with AEM and I am "arrived" from Frontend Dev, and will be happy to use everywhere (where possible) HTL (Sightly)...

<!--/*

Based on: /libs/wcm/foundation/components/page/page.html
*/-->
<!DOCTYPE HTML>
<html data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">

</head>

<body>

<div data-sly-test="${wcmmode.edit}">This text is visible only in edit mode to the authors</div>

</body>

</html>

head.html:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en">
<sly data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" />

<title>${properties.title || currentPage.name}</title>

___ but JSP version is working fine!
<%--
boilerplatePage component.
Boilerplate Page's Component to present Touch UI components
--%>
<html>
   <%@include file="/libs/foundation/global.jsp" %>
   <cq:include script="/libs/wcm/core/components/init/init.jsp"/>
   <%--<cq:includeClientLib categories="cq.jquery"/>--%>
   <cq:includeClientLib categories="flex"/>
<body>
<div class="container">
       <h1 data-sly-test="${wcmmode.edit}"Here is where your Touch UI component will go</h1>
       <cq:include path="par" resourceType="foundation/components/parsys" />
</div>
</body>
</html>

Peter_Puzanovs · 4/3/17

Hi Aleksandrs,

Can you try following:

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.css @ categories='flex'}"  />

Ar Cienu,

Peter

View solution in original post

Peter_Puzanovs · 4/3/17

Hi Aleksandrs,

Can you try following:

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.css @ categories='flex'}"  />

Ar Cienu,

Peter

Nupur_Jain · 4/3/17

Hi,

you are using :

</head>

you can't have any element inside the tag where you are doing data-sly-include. The statement of data-sly-call won't be called.

In order to include the clientlib in head, include your clientlib 'flex' in head.html that you are including using data-sly-include.Do these changes and your code will work fine.

Hope this helps!

Thank you !

Nupur Jain

aleksandrsp9196 · 4/3/17

sightlyPageComponent.html:
<!DOCTYPE HTML>
<html data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
<head data-sly-include="head.html"></head>
<body>
<div data-sly-test="${wcmmode.edit}">This text is visible only in edit mode to the authors</div> ...

head.html:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en">

<title>${properties.title || currentPage.name}</title>

Paldies