Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

AEM component wise JavaScript via clientlib

Avatar

Avatar
Validate 1
Level 1
Nesan
Level 1

Likes

0 likes

Total Posts

10 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile

Avatar
Validate 1
Level 1
Nesan
Level 1

Likes

0 likes

Total Posts

10 posts

Correct Reply

0 solutions
Top badges earned
Validate 1
View profile
Nesan
Level 1

20-05-2021

Hi,

 

I have developed one component, Used clientlib library to load the JavaScript inside the component. 

 

This below code is used in component HTL.

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"/>
<sly data-sly-call="${clientlib.js @ categories='project.componentname'}"/>

 

Only one time this JavaScript is calling. But from as a requirement I need to get the count of the specific component and need to inject attribute according to the count via jQuery.

 

This is the JavaScript function. But this is working for first component in the page.

var componentCount = 0;
$('.componentClassName').each(function() {
      componentCount ++;
     $(this).attr("component-number", componentCount );
});

 

without putting to etc/clientlib, Can we handle this issue?

 

How I can tackle this.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Boost 100
Employee
markus_bulla_adobe
Employee

Likes

110 likes

Total Posts

89 posts

Correct Reply

46 solutions
Top badges earned
Boost 100
Applaud 25
Affirm 25
Boost 50
Boost 25
View profile

Avatar
Boost 100
Employee
markus_bulla_adobe
Employee

Likes

110 likes

Total Posts

89 posts

Correct Reply

46 solutions
Top badges earned
Boost 100
Applaud 25
Affirm 25
Boost 50
Boost 25
View profile
markus_bulla_adobe
Employee

20-05-2021

Hi @Nesan!

 

In AEM ClientLibrary Manager will make sure that a specific ClientLib is only loaded once to avoid duplicate, unnecessary loading of redundant code.

However, I feel that you may have a slightly incorrect understanding of how ClientLibs work. While the HTL code you shared will make sure that your JavaScript code will be loaded on the page, you may still have your code executed by various triggers.

For your specific requirement, this sounds like something that can easily be done with simple jQuery logic. You could set a component-specific class on your components HTML (there probably already is one; let's call it "myComponent") and use jQuery selectors to get all components on the page and count them:

var componentCount = $(".myComponent").size(); 

This code should be executed in the footer of your page to make sure that all instances of the component are already present in the HTML DOM. No need to iterate or load code multiple times.

 

Hope that helps!

Answers (1)

Answers (1)

Avatar

Avatar
Give Back 100
Level 10
asutosh_jena
Level 10

Likes

570 likes

Total Posts

687 posts

Correct Reply

197 solutions
Top badges earned
Give Back 100
Boost 500
Affirm 100
Ignite 1
Establish
View profile

Avatar
Give Back 100
Level 10
asutosh_jena
Level 10

Likes

570 likes

Total Posts

687 posts

Correct Reply

197 solutions
Top badges earned
Give Back 100
Boost 500
Affirm 100
Ignite 1
Establish
View profile
asutosh_jena
Level 10

20-05-2021

Hi @Nesan 

 

If you put the clientlib in component and load it based on the number of times the component loads, it will make multiple calls to the client lib. You need to embed the clientlib in the main clientlib and load it only once.