Adobe Experience Manager Sites & More

dibyajyotis2501 · 9/8/20

I'm facing a situation where :

I want to invoke a clientlib cateogory (OOTB) once the markup is formed. Now, the particular markup is injected as compiled template (e.g. mustache) inside the root html where the OOTB clientlib is already invoked.

Example:

In the below format, clientlib of category core.abc.xyz is loaded with DOM prior to the execution of custom template getting injected. So, even if it is required the presence of "target" class in the html for some necessary clientlib actions (binded over this class), its not able to take place.

<div>

{{#each this}} <div class="target"> {{/each}}
</script>

</div>

So, I want to know if there is any way to load a OOTB clientlib script via its category after any custom JS event e.g. on-click. There is a way to load it via relative/absolute path, (e.g. $.getScript()) but in case the libs script location gets changed, custom modules will get impacted.

BrianKasingli · 9/8/20

@dibyajyotis2501,

When your view logic for your AEM website is served by a client library, example clientlib-site, you can include a property called dependencies. This will load dependencies that are other registered client libraries apart off the page request, before the clientlib-site.
Example:

<?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="[mycompany.site]"
    dependencies="[cq.jquery,cq.handlebars]"/>

I hope this helps,
Brian.

dibyajyotis2501 · 9/8/20

Hi Brian,

Thanks for the reply! Actually dependencies was not able to resolve me issue as this will rank the dependent categories only to load before my custom script. But I want to load a libs (OOTB) script after my custom script is called. Because, my template is compiled and html is getting ready with my custom logic; After that, once the markup is ready, I want to place that call.

My component html has one <data-sly-call> to get some core script and my component specific clientlib js has the template injection logic. But due to DOM load precedence, the component clientlib call is placed after.