Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Experience fragment client libraries are not loading when using Experience fragment on the page

Avatar

Level 2

Hi,

 

I have added clientlibs in the Experience fragment template and created an Experience fragment from it. When I use this Experience fragment on the page, the clientlibs defined in the Experience fragment template are not loading on the page. Is there a way to load them?

 

Thanks!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Madhur-Madan 
I think you should include all your clientlibs(site CSS/JS) in the site clientlibs and load on Experience fragment editor as well rather than doing other way.

 

overlaying XF and loading clientlibs for XF can result in loading multiple clientlibs(more network call) even worse if more than one instance of XF is added on page.



Arun Patidar

View solution in original post

8 Replies

Avatar

Community Advisor

Hi @mvelicheti,

You can follow the steps below:

Step 1: Go to the experience fragment. Click on the 'Page Info' icon on the top left. Select "Edit template".

Step 2: Click on the 'Page Info' icon on the top left and select Page policy
MadhurMadan_0-1704383394384.png

Step 3: Add your custom clientlibs and create a new Policy. I have added 'yourproject.test' and named the policy 'Test Policy'

MadhurMadan_1-1704383803283.png

Step 4: Create a clientlib folder under 'apps/yourproject/clientlibs' and provide the same category as added in step 3 ie. 'yourproject.test'

MadhurMadan_2-1704383984194.png


Step 5: Open you XF in view as published mode and you can see your custom clientlibs being loaded in the network calls

MadhurMadan_3-1704384076270.png

 





 

Avatar

Level 2

Hi @Madhur-Madan  But clientlibs are not loading on the page.
Steps:
1. Create an experience fragment which will have those clientlibs.

2. Create a page and then include the above experience fragment.

3. Observe that clientlibs which are included in experience fragment are not loaded on the page

 

Avatar

Community Advisor

In that case you can simply overlay the experience fragment component and include the clientlibs in the html 

MadhurMadan_0-1704390590004.png

Thanks

Avatar

Community Advisor

@mvelicheti 

 

Please add the relevant client libs in the Page template as well using the Page policy. That should resolve the issue.


Aanchal Sikka

Avatar

Community Advisor

Hi @aanchal-sikka ,

Wouldnt' the clientlib be loaded on every page created using the same template even if the experience fragment component is not present on the page. That is why i overlayed the XF component so that the clientlib would only load when XF is present on the page.
If there are some other aspects you considered please let me know.

Thanks

Avatar

Community Advisor

@Madhur-Madan 

 

What might be best for you, will depend on how your site, templates and XF usage is.

  • If XF is used on majority of the pages like Header, then their is no harm including it in Template
  • If you load it on XF level, then you might also want to cross-check for any issues, when a page has multiple XF.
  • If XF is on few pages only of a specific template, then you can load library only on that template and skip for others.

Aanchal Sikka

Avatar

Correct answer by
Community Advisor

Hi @Madhur-Madan 
I think you should include all your clientlibs(site CSS/JS) in the site clientlibs and load on Experience fragment editor as well rather than doing other way.

 

overlaying XF and loading clientlibs for XF can result in loading multiple clientlibs(more network call) even worse if more than one instance of XF is added on page.



Arun Patidar

Avatar

Administrator

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