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

[mvelicheti]

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!

[Madhur-Madan]

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

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

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

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

[mvelicheti]

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

[Madhur-Madan]

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

Thanks

[aanchal-sikka]

@mvelicheti 

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

[Madhur-Madan]

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

[aanchal-sikka]

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

[arunpatidar · Accepted solution]

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.

[kautuk_sahni]

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