Clientlib query

Avatar

Avatar
Applaud 25
Level 2
Shaheena_Sheikh
Level 2

Likes

2 likes

Total Posts

97 posts

Correct reply

1 solution
Top badges earned
Applaud 25
Applaud 5
Affirm 1
Validate 10
Validate 1
View profile

Avatar
Applaud 25
Level 2
Shaheena_Sheikh
Level 2

Likes

2 likes

Total Posts

97 posts

Correct reply

1 solution
Top badges earned
Applaud 25
Applaud 5
Affirm 1
Validate 10
Validate 1
View profile
Shaheena_Sheikh
Level 2

25-01-2021

If I add a clientlib files under my component package, will that get automatically picked or do I need to call it in my html/js files?

View Entire Topic

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

645 likes

Total Posts

607 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

25-01-2021

You will need to ensure that the client library is a valid client library, allowProxy is true, and the client library and exists under /apps/my-site/*. For example /apps/my-site/components/structure/header/clientlib.

To reach the CSS and JS, you will need to call http://localhost:4502/etc.clientlibs/my-site/components/structure/header/clientlib.js

For example, a valid client library .XML would look something like this:

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    allowProxy="{Boolean}true"
    categories="mysite.header"/>

 

To use your client library using sightly, you can use the snippets below:

<head data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"> 
    <!--for css+js -->
    <meta data-sly-call="${clientLib.all @ categories='mysite.header'}" data-sly-unwrap></meta> 
    <!-- only js -->
    <meta data-sly-call="${clientLib.js @ categories='mysite.header'}" data-sly-unwrap></meta> 
    <!-- only css -->
    <meta data-sly-call="${clientLib.css @ categories='mysite.header'}" data-sly-unwrap>    </meta>
</head>