Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
SOLVED

Best practice for one off client libs?

Avatar

Level 2

I am building a store locator for a client like this Best way to integrate a store locator in AEM 6.1 and I am trying to figure out the best way to load client libaries in a way that does not follow the normal pattern of client libraries in AEM. As described here Using Client-Side Libraries, Best practices to manage clientlibs in AEM(Adobe CQ), and Best Approaches to Clientlibs in AEM:  Part III - iCiDIGITAL

I will need to load the google maps API on a single page (this way it is not loaded on every page and the client doesn't pay for all those extra loads) as well as the Places API on a handful of other pages < 5. The approach in Best Approaches to Clientlibs in AEM:  Part III - iCiDIGITAL would work for the google maps API implementation but not the Places API. Even with that in mind, would I load that in the component or create a template?

1. I have found that just putting a script tag in the component will work but then I could run into having multiple copies of the library added to a single page.

Like the Question here How can Google Map be included in a component using sightly?

2. Building a Template. This would limit the libraries to just this page but could lead to a enormous amount of templates if that pattern is continued with other libraries.

As described here Adobe Experience Manager Help | Integrating custom Adobe Experience Manager Component with third-par... And It's Gonna be Legendary: Google Maps Integration with AEM Page

What have people found worked the best for usability and maintainability when managing client libraries where the use is minimal to a few pages but may not be able to be divided into a site category?

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

Hi,

Option 1 is only a problem if you embed the same component multiple times on a page, and if the component contains the reference to the Javascript file.

What if you could detect that a reference to a specific clientlib has already been added to the page? When rendering "component A" on the page, you store this information at a request level; and in case this information is already present you don't render the reference to the Clientlib anymore (it's already referenced earlier).

Or am I missing something?

Jörg

View solution in original post

1 Reply

Avatar

Correct answer by
Employee Advisor

Hi,

Option 1 is only a problem if you embed the same component multiple times on a page, and if the component contains the reference to the Javascript file.

What if you could detect that a reference to a specific clientlib has already been added to the page? When rendering "component A" on the page, you store this information at a request level; and in case this information is already present you don't render the reference to the Clientlib anymore (it's already referenced earlier).

Or am I missing something?

Jörg