Utilizing Sightly snippet inside template engine | Community
Skip to main content
D
dibyajyotis2501
Level 2
September 8, 2020
Question

Utilizing Sightly snippet inside template engine

  • September 8, 2020
  • 1 reply
  • 1634 views

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 class ="root">

<sly data-sly-call="${clientLib.all @ categories='core.abc.xyz'}" />

<div>

<script id="result-template" type="text/x-handlebars-template">

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

</div>

</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.

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

1 reply

BrianKasingli
Community Advisor and Adobe Champion
BrianKasingliCommunity Advisor and Adobe Champion
Community Advisor and Adobe Champion
September 8, 2020

@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.

    D
    dibyajyotis2501Author
    Level 2
    September 9, 2020

    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.

    Terms & ConditionsAccessibility statement

    Loading footer...