Expand my Community achievements bar.

SOLVED

Calling Clientlib inside html

Avatar

Level 7

I have a clientlib in two different places.Rather calling template/clientlib.html two times is that fine to call it once.

 

Solution 1

<sly data-sly-use.clientlib="/libs/granite/sightly/template/clientlib.html">

      <sly data-sly-call=${clientlib.js @ categories='aaa'}/>

</sly>

<sly data-sly-use.clientlib="/libs/granite/sightly/template/clientlib.html">

      <sly data-sly-call=${clientlib.js @ categories='bbb'}/>

</sly>

 

Solution 2

<sly data-sly-use.clientlib="/libs/granite/sightly/template/clientlib.html">

      <sly data-sly-call=${clientlib.js @ categories='aaa'}/>

       <sly data-sly-call=${clientlib.js @ categories='bbb'}/>

</sly>

 

What is the difference between solution 1 and solution 2.If error occurred in clientlib which category is 'aaa' then clientlib which category is 'bbb' is loading fine ?   

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @JakeCham 

If you want to load 2 different clientlibs at 2 different place (i.e. in 2 different files) then you will need to call the clientlib.html template multiple times.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.all @ categories=['myCategory1', 'myCategory2']}"/>

But if you want to load 2 different clientlibs in a single file, then you do not need to call the clientlib.html template multiple times. A single time instantiation is enough for this.

<html data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <head>
        <!-- HTML meta-data -->
        <sly data-sly-call="${clientlib.css @ categories='myCategory'}"/>
    </head>
    <body>
        <!-- page content -->
        <sly data-sly-call="${clientlib.js @ categories='myCategory'}"/>
    </body>
</html>

If there is an error in one of the clientlib, still the other clientlib will load as it's not dependent on each other.

 

Here is the adobe document for reference:

https://experienceleague.adobe.com/docs/experience-manager-htl/using/getting-started/getting-started...

 

Hope this helps!

Thanks!

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hi @JakeCham 

If you want to load 2 different clientlibs at 2 different place (i.e. in 2 different files) then you will need to call the clientlib.html template multiple times.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.all @ categories=['myCategory1', 'myCategory2']}"/>

But if you want to load 2 different clientlibs in a single file, then you do not need to call the clientlib.html template multiple times. A single time instantiation is enough for this.

<html data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <head>
        <!-- HTML meta-data -->
        <sly data-sly-call="${clientlib.css @ categories='myCategory'}"/>
    </head>
    <body>
        <!-- page content -->
        <sly data-sly-call="${clientlib.js @ categories='myCategory'}"/>
    </body>
</html>

If there is an error in one of the clientlib, still the other clientlib will load as it's not dependent on each other.

 

Here is the adobe document for reference:

https://experienceleague.adobe.com/docs/experience-manager-htl/using/getting-started/getting-started...

 

Hope this helps!

Thanks!