Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!
SOLVED

Import Clientlibs

Avatar

Level 1

I'm new working with AEM and faced a situation on WKND Tutorial that couldn't figure out how it happens.

 

When we want to import some clientlibs, many tutorials on onternet explains that is needed to add some code, for example, on customheaderlibs.html file of page component like:

<sly data-sly-use.clientlibs="${'com.adobe.cq.wcm.core.components.models.ClientLibraries' @ categories='wknd.site'}">
</sly>

However, on aem-guide-wknd project on Github, there is no such code anywhere, but the clientlibs are still loaded. How is it possible?

 

Besides that, if I create a new page from the empty-page template, no clientlibs are loaded.

 

What are the others forms of importing clientlibs?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @mmouraam 

 

You can add client libs

  1. At the component level: using the below code, you include both CSS and js (all)
    1. <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
      <sly data-sly-call="${clientlib.all @ categories=''}"/>
  2. At template level: Edit template > Page policy
    1. Kiran_Vedantam_0-1670434107439.png

       

  3. At the page level
    1. At head.html, include css
      1. <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
        <sly data-sly-call="${clientlib.css @ categories=''}"/>
    2. At footer.html: Include js
      1. <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
        <sly data-sly-call="${clientlib.js @ categories=''}"/>

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hi @mmouraam 

 

You can add client libs

  1. At the component level: using the below code, you include both CSS and js (all)
    1. <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
      <sly data-sly-call="${clientlib.all @ categories=''}"/>
  2. At template level: Edit template > Page policy
    1. Kiran_Vedantam_0-1670434107439.png

       

  3. At the page level
    1. At head.html, include css
      1. <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
        <sly data-sly-call="${clientlib.css @ categories=''}"/>
    2. At footer.html: Include js
      1. <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
        <sly data-sly-call="${clientlib.js @ categories=''}"/>