Calling Clientlib inside html

Avatar

Avatar
Validate 1
Level 2
JakeCham
Level 2

Likes

6 likes

Total Posts

77 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile

Avatar
Validate 1
Level 2
JakeCham
Level 2

Likes

6 likes

Total Posts

77 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Ignite 3
Ignite 1
Give Back 5
Give Back 3
View profile
JakeCham
Level 2

28-03-2021

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 ?   

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct reply

207 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile

Avatar
Applaud 25
Level 10
asutosh_jena
Level 10

Likes

593 likes

Total Posts

705 posts

Correct reply

207 solutions
Top badges earned
Applaud 25
Give Back 100
Boost 500
Affirm 100
Ignite 1
View profile
asutosh_jena
Level 10

28-03-2021

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!

Answers (0)