Page specific javascript Best practices

[vhochsteinTef]

HI,

I am wondering what is the best way to add page specific javascript using AEM as a Cloud.

Author should be able to control which flavor of javascript logic is included.
Javascript code should be part of AEM Code Repository same as all other javascript (ui.frontend)

My brainstorming results:
- Add option to add a custom css class to each page, which "activates" the javascript flavour if present

- Build a new component which is added to page, Author can select logic flavor by adding component
- ...

Your feedback would be greatly appreciated 

--

Volker

[anupampat]

Hi @vhochsteinTef ,

Page specific JS can be achieved by including the clientlib(JS & CSS) at a template level.

Regards,

Anupam Patra

[anupampat]

Checkout https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/load-site-specific-client-... thread more info.

[vhochsteinTef]

thank you all for your replies...

a template might be used for many pages.

I do not understand how I might add page specific javascript by using templates ??

--

[AmitVishwakarma]

To add page-specific JavaScript in AEM as a Cloud:

1. Use Client Libraries: Include JS at the template level, allowing specific scripts per template.
2. Custom CSS Class: Add a custom class to the page and load JS based on its presence.
3. Page-Specific Component: Create a component where authors select the JS flavor to apply.

Make sure the JS is stored in the AEM code repository (ui.frontend) for easy management.

[chaudharynick]

Hi @vhochsteinTef ,

You can try 2 ways:

1. write component specific JS and create individual client libraries and include them within components.
2. create a page property field to select custom client library and in the customheadlibs.html, call that clientlibs from the page property

[kautuk_sahni]

@vhochsteinTef Did you find the suggestions helpful? Please let us know if you need more information. If a response worked, kindly mark it as correct for posterity; alternatively, if you found a solution yourself, we’d appreciate it if you could share it with the community. Thank you!

[MukeshYadav_]

Hi @vhochsteinTef ,
Greetings of the day,

Page specific requirement should be controlled using page properties.

This requirement was already catered in project.

Keep all the js as part of different b2b clientlibs. The code was written in such a way that it fetch all the available clientlibs(js/css) as dropdown on the page property which can be controlled by author. This property was on one of tab of each page (business clientlibs -not sure about text)

The selected (authored) clientlib js and css was added to page (js files in footer and css files in header)

It was dynamic load so it automatically fetch any new clientlibs (js/css) if added to the code base

Advantages of above approach over any other approach:-

If we add option to author(select) as part of component, then script tag get added in between some where in body which may blocks the html load.

Not sure about css class approach, how it will load css class specific js? Will it trigger new call to fetch corresponding js based on css class on page.
If not, then whole js will be loaded and based on css class it will be executed? if this is the case, it is loading whole JS and not specific

would love to hear back if still any issue..

Thanks