Skip to main content
Vani1012
Level 6
July 22, 2022
Solved

Issue when adding Component clientlib as embed in clientlib base

Hi All,

 

I have a clientlibrary(yp-poc.clientlibweather) for a component(suppose weather component) when I invoke clientlib in the component(suppose in weather.html)

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.all @ categories='YP-POC.clientlibweather'}">
</sly>

 

the css and js are working fine but when I added this clientlib as embed property in clientlib-base instead of calling clientlib inside component.html the css are disturbed and js isnt not all loading Can anyone help me on this issue.

 

Thanks,

Vani.

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Aditya_Chabuku
Aditya_ChabukuAccepted solution
Community Advisor
July 22, 2022

Hi @vani1012 , I understand you want to embed your custom clientlibs in clientlib-base, But by doing so you are unnecessarily increasing the load on base clientlibs and also it's not a good practice. 

 

However, to include your clientlibs as a dependency into the base at <yourProject>/ui.frontend/clientlib.config.js

Thanks,Aditya Chabuku
View in thread

4 replies

user1576
Level 3
July 22, 2022

The CSS and JS may get due to redundant data or multiple loading.

Translate
    ShaileshBassi
    Community Advisor
    ShaileshBassiCommunity Advisor
    Community Advisor
    July 22, 2022

    @vani1012 Can you try loading the Javascript and the css separately. Could be the possibility that you are calling the javascript in the header and the DOM elements are not initialized yet.

    You can separately call the css and the javscript by the below syntax:

    FOR CSS, INCLUDE IN HEADER 
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.css @ categories='mysite'}" data-sly-unwrap/>

FOR JS, INCLUDE IN FOOTER
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientLib.js @ categories='mysite'}" data-sly-unwrap/>

    Hope this helps!

    Thanks

    Translate
      Vani1012Author
      Level 6
      July 22, 2022
      • @shaileshbassi I don't want to call css and js in header and footer I just want to embed the components clientlibrary in clientlib-base
      Translate
        Aditya_Chabuku
        Community Advisor
        Aditya_ChabukuCommunity AdvisorAccepted solution
        Community Advisor
        July 22, 2022

        Hi @vani1012 , I understand you want to embed your custom clientlibs in clientlib-base, But by doing so you are unnecessarily increasing the load on base clientlibs and also it's not a good practice. 

         

        However, to include your clientlibs as a dependency into the base at <yourProject>/ui.frontend/clientlib.config.js

        Translate
        Thanks,Aditya Chabuku
          Terms & ConditionsAccessibility statement

          Loading footer...