AEM component wise JavaScript via clientlib | Community
Skip to main content
N
Nesan
Level 2
May 20, 2021
Solved

AEM component wise JavaScript via clientlib

  • May 20, 2021
  • 2 replies
  • 4054 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by MarkusBullaAdobe

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!

2 replies

Asutosh_Jena_
Community Advisor
Asutosh_Jena_Community Advisor
Community Advisor
May 20, 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.

    MarkusBullaAdobe
    Adobe Employee
    MarkusBullaAdobeAdobe EmployeeAccepted solution
    Adobe Employee
    May 20, 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!

      N
      NesanAuthor
      Level 2
      May 20, 2021

      Thanks, @markusbullaadobe for your explanation.

       

      I forgot to trigger after the DOM ready, Now i have wrapped the code with the document.ready function. It is working fine now. Thanks for the quick response. 🙂

       

      Terms & ConditionsAccessibility statement

      Loading footer...