Load clientlibs multiple times for single component in page | Community
Skip to main content
veerareddyc1015
veerareddyc1015
Level 3
December 20, 2023
Solved

Load clientlibs multiple times for single component in page

  • December 20, 2023
  • 4 replies
  • 1377 views

Dear Team,

 

I am currently working on a project that involves various components, such as single article and multiple article components, each associated with specific client libraries.

 

I am facing an issue while attempting to load the single article component multiple times on a single page. The client libraries load successfully for the first instance; however, subsequent attempts to load additional instances (2nd, 3rd, 4th, etc.) result in the client libraries not being loaded.

 

I am seeking clarification on whether it is possible to load the same client libraries multiple times on a single page. The reason behind this inquiry is that the Target team is replacing the first component with the Y component, and the subsequent components (2nd, 3rd, 4th, etc.) are expecting the relevant client libraries. The absence of these client libraries is causing UI distortion on the page.

 

I would greatly appreciate your insights and guidance on how to address this issue. If there are any recommended best practices or solutions to ensure the proper loading of client libraries for each instance, it would be immensely helpful.

 

Thank you in advance for your assistance.

 

Best regards,

Veera

 

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 ibishika

Hi @veerareddyc1015,

 

Although I have never tried this but I think you can try adding onload attribute like this for each of the component / section that loads later:

 

<meta data-sly-call="${clientLib.js @ categories='your.clientlib', loading='defer', onload='myFunction()'}" data-sly-unwrap></meta>

 

 

More details can be found here: https://github.com/nateyolles/aem-clientlib-async 

 

Regards,

Ishika B

4 replies

Kamal_Kishor
Community Advisor
Kamal_KishorCommunity Advisor
Community Advisor
December 20, 2023

@veerareddyc1015 : clientlibs are meant to be loaded once per page if added.

    ibishika
    ibishikaAccepted solution
    Level 4
    December 20, 2023

    Hi @veerareddyc1015,

     

    Although I have never tried this but I think you can try adding onload attribute like this for each of the component / section that loads later:

     

    <meta data-sly-call="${clientLib.js @ categories='your.clientlib', loading='defer', onload='myFunction()'}" data-sly-unwrap></meta>

     

     

    More details can be found here: https://github.com/nateyolles/aem-clientlib-async 

     

    Regards,

    Ishika B

      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      December 20, 2023

      Hi @veerareddyc1015 
      Clientlibs are meant to be loaded only once. If you need to load specific clientlibs on demand then you need to write a custom logic, for example on component replace event check the associated clientlibs and load again after component replaced.

       

      You can write all these custome events in your main that loaded on all the pages javascript and target can trigger those events.

      Arun Patidar
        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        January 2, 2024

        @veerareddyc1015 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

        Kautuk Sahni
        Terms & ConditionsAccessibility statement

        Loading footer...