Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

SightlyPageComponent.html does not include my own clientLib

Avatar

Level 2

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 data-sly-include="head.html">
        <sly data-sly-call="${clientlib.css @ categories='flex'}" data-sly-unwrap />

    </head>

    <body>

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

       <p>TEST TEST TEST</p>
        <!-- page content -->
        <sly data-sly-use.body="body.js" data-sly-resource="${body.resourcePath @ resourceType='wcm/foundation/components/parsys'}"/>

    </body>


</html>

head.html:

    <!-- HTML meta-data -->
    <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>

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

0 Replies

Avatar

Correct answer by
Community Advisor

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

Avatar

Community Advisor

Hi,

you are using : 

<head data-sly-include="head.html">
        <sly data-sly-call="${clientlib.css @ categories='flex'}" data-sly-unwrap />

    </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

Avatar

Level 2

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:

<!--/*
based on /libs/wcm/foundation/components/page/head.html
Renders the head markup of a sightly page
*/-->

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

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

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

Paldies

Avatar

Level 2

Thank you for your advice. It was helpful as well.