Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
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

4 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.