Experience fragment client libraries are not loading when using Experience fragment on the page | Community
Skip to main content
M
mvelicheti
Level 2
January 4, 2024
Solved

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

  • January 4, 2024
  • 3 replies
  • 1435 views

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!

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

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.

3 replies

Madhur-Madan
Community Advisor
Madhur-MadanCommunity Advisor
Community Advisor
January 4, 2024

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

 





 

    M
    mvelichetiAuthor
    Level 2
    January 4, 2024

    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
      Community Advisor
      Madhur-MadanCommunity Advisor
      Community Advisor
      January 4, 2024

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



      Thanks

        aanchal-sikka
        Community Advisor
        aanchal-sikkaCommunity Advisor
        Community Advisor
        January 5, 2024

        @mvelicheti 

         

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

        Aanchal Sikka
          Madhur-Madan
          Community Advisor
          Madhur-MadanCommunity Advisor
          Community Advisor
          January 5, 2024

          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

            arunpatidar
            Community Advisor
            arunpatidarCommunity AdvisorAccepted solution
            Community Advisor
            January 5, 2024

            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
              kautuk_sahni
              Community Manager
              kautuk_sahniCommunity Manager
              Community Manager
              January 8, 2024

              @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
              Terms & ConditionsAccessibility statement

              Loading footer...